You Don't Know JS: this & Object Prototypes (第6章 Behavior Delegation)附加的ES6 class未读

时间:2022-05-05 15:26:48

本章深挖原型机制。

[[Prototype]]比类更直接和简单!

https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch6.md

这个实际的机制,都是关于对象之间的连接,一个对象被连接到其他对象上!


Towards Delegation-Oriented Design

行为授权的设计模式。OLOO模式。

Class Theory(略)

Delegation Theory

首先,定义一个对象叫做Task, 它将有具体的行为,包括诸多utility methods可以让各类tasks使用(delegatet to)。

然后,轮到每个task("ABC","XYZ"), 你定义一个对象来持有task-specific data/behavior。你连接你的task-specific对象到Task utility对象, 通过授权让它们可以使用它(Task utility对象)。

例子:

var Task = {
setID: function(ID) { this.id = ID; },
outputID: function() { console.log( this.id ); }
}; // make `XYZ` delegate to `Task`
var XYZ = Object.create( Task ); XYZ.prepareTask = function(ID,Label) {
this.setID( ID );
this.label = Label;
}; XYZ.outputTaskDetails = function() {
this.outputID();
console.log( this.label );
};

1. Task, XYZ是纯对象,不是函数(类)。

2. XYZ是通过Object.create(..)建立的,并通过原型机制得到Task对象的授权Delegate!

这种模式可以成为objects-linked-to-other-objects, OLOO

⚠️

1.类的设计模式,可以在子类重写父类的方法,使用相同的方法名字。但OLOO模式正相反,避免在原型链上出现相同的name.(就是shadowing,第五章讲过,如果出现的话,有比较复杂的判断模式)

2.this.setID(ID); 首先在XYZ上寻找setID(..), 没有,顺着原型链向上找。

3. 无需使用new关键字,创建构建器函数,无需使用prototype方法。

Behavior Delegation模式无需父类子类,继承,多态等概念。

⚠️:Delegation更适合用在内部的使用,而不建议直接使用: XYZ.setID(ID).  而是通过使用prepareTask这个XYZ自己的方法,调用原型链条上的函数。

Mutual Delegation (Disallowed)

一个对象不能被多个对象授权,这样容易造成♻️。禁止。

Debugged

我们一般使用chrome Developer Tools进行debug。

但注意浏览器工具如firefox之间的代码输出不同:

function Foo() {}

var a1 = new Foo();

a1; // Foo {}  这是用chrome, {} 是一个空对象,由Foo函数构建。
a1; // Object {} 这是用火狐, {}是一个空对象,从Object构建

细微的区别是Chrome是主动追踪的, 作为一个内部的property特性, 这个实际函数的名字制造了这个构建,而其他浏览器不追踪这个增加的信息!

Chrome的这个功能:内部的constructor name追踪在你完全拥抱Class-style时很有用,但如果你拥抱OLOO则没有用


Mental Models Compared(复杂的结构图)

2张图,2块代码(用class-style, 和OLOO)

Class-style

function Foo(who) {
this.me = who;
}
Foo.prototype.identify = function() {
return "I am " + this.me;
}; function Bar(who) {
Foo.call( this, who );
}
Bar.prototype = Object.create( Foo.prototype ); Bar.prototype.speak = function() {
alert( "Hello, " + this.identify() + "." );
}; var b1 = new Bar( "b1" );
var b2 = new Bar( "b2" ); b1.speak();
b2.speak();

object-link-to-another-object

var Foo = {
init: function(who) {
this.me = who;
},
identify: function() {
return "I am " + this.me;
}
}; var Bar = Object.create( Foo ); Bar.speak = function() {
alert( "Hello, " + this.identify() + "." );
}; var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" ); b1.speak();
b2.speak();

oloo模式,无需classes, constructors, prototypes, new的调用!

You Don't Know JS: this & Object Prototypes (第6章 Behavior Delegation)附加的ES6 class未读

You Don't Know JS: this & Object Prototypes (第6章 Behavior Delegation)附加的ES6 class未读


后面的暂时不看了,这是用纯javascript设计网页的交互行为。!!!

Classes vs. Objects

上面是不同的理论探索,和模型:classes vs behavior delegation.

现在看看更多的细节。

前端的设计:创建UI widgets(buttons, drop-downs)

Widget "Classes"

ES6 class sugar

Delegating Widget Objects


Simpler Design

De-class-ified

Nicer Syntax

Unlexical


Introspection反省(查询)


Review (TL;DR)