本章深挖原型机制。
[[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的调用!
后面的暂时不看了,这是用纯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反省(查询)