JS中的原型链机制的本质就是对象之间的关联关系。
面向委托的设计
我们需要把思路从类和继承的设计模式转换到委托行为的设计模式。
首先进行一些理论训练，然后在传授一些能应用在代码中的具体实例。
6.1.1 类理论
假设我们需要在软件中建模一些类似的任务("XYZ", "ABC"等)。
如果使用类，那设计方法可能是这样的：定义一个通用父（基）类，可将其命名为Task，在Task类中定义所有任务都有的行为。接着定义子类XYZ和ABC，它们都继承自Task并且会添加一些特殊的行为来处理对应的任务。
非常重要的是，类设计模式鼓励你在继承时使用方法重写（和多态），比如说在XYZ任务在重写Task中定义的一些通用方法，甚至在添加新行为时通过super调用这个方法的原始版本。你会发现许多行为可先“抽象”到父类然后在用子类进行特殊化（重写）。
6.1.2 委托理论
首先你会定义一个名为Task的对象，它会包含所有任务都可使用（写作使用读作委托）的具体行为。接着，对于每个任务（XYZ，ABC）你都会定义一个对象来存储对应的数据和行为。你会把特定的任务对象都关联到Task功能对象上，让它们在需要的时候可进行委托。
基本上你可想象成，执行任务“XYZ”需要两个兄弟对象（XYZ和Task）协作完成。但是我们并不需要把这些行为放在一起，通过类的复制，我们可把它们分别放在各自独立的对象中，需要时可允许XYZ对象委托给Task。
下面是推荐的代码形式：
Task = {
setID () { this.id = ID; },
outputID () { console.log( this.id ); }
};
// 让 XYZ 委托 Task
XYZ = Object.create( Task );
XYZ.prepareTask = function (ID, Label) {
this.setID( ID );
this.label = Label;
};
XYZ.outputTaskDetails = function() {
this.outputID();
console.log( thi.label );
};
// ABC = Object.create( Task );
// ABC ... = ...
在这段代码中，Task和XYZ并不是类（或函数），它们是对象。XYZ通过Object.create() 创建，它的[[Prototype]]委托了Task对象。
对象关联风格的代码还有一此不同之处。
- 在上面的代码中，id和label数据成员都是直接存储在XYZ上（而不是Task）。通常来说，在[[Prototype]]委托中最好把状态保存在委托者(XYZ, ABC)而不是委托目标（Task）上。
- 在委托行为中，我们会尽量避免在[[Prototype]]链的不同级别中使用相同的命名，否则就需要使用笨拙并且脆弱的语法来消除引用歧义。
这个设计模式要求尽量少使用容易被重写的通用方法名，提倡使用更有描述性的方法名，尤其是要写清相应对象行为的类型。 - this.setID(id);XYZ中的方法首先会寻找XYZ自身是否有setID()，但是XYZ没有，因此会通过[[Prototype]]委托关联到Task继续寻找，这时就可找到setID()方法。此外，由于调用位置处了this的隐式绑定规则，因此虽然setID()方法在Task中，运行时this仍然会绑定到XYZ，这正是我们想要的。
换句话说，我们可YXZ进行交互时可使用Task中的通用方法，因为YXZ委托了Task。
委托行为意味着某些对象（XYZ）在找不到属性或方法引用时会把这个请求委托给另一个对象（Task）。
这是一种极其强大的设计模式，和父类、子类、继承、多态等概念完全不同，在你脑海中应是通过任意方向的委托关联并排组织的。
1. 互相委托（禁止）
你无法在两个以上互相委托的对象之间创建循环委托。不然会出错。如果你引用了一个两边都不存在的属性或方法，会产生一个无限递归的循环。
2. 调试
现在已明白了“类”和“委托”两种模式的理论区别，接下来看看思维模型方面的区别。下面是典型的“原型”面向对象风格：
function Foo(who){
this.me = who;
}
Foo.prototype.identify = function() {
return "I am " + this.name;
};
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" );
子类Bar继承了父类Foo，然后生成了b1和b2两个实例，b1委托了Bar.prototype，后者委托了Foo.prototype。这种风格很常见。
下面使用对象关联风格来编写功能完全相同的代码：
Foo = {
init(who){
this.me = who;
},
identify(){
return "I am " + this.name;
}
};
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();
我们仍然实现了三个对象之间的关联。
但是这段代码简洁了许多，我们只是把对象关联起来，并不需要那些即复杂又令人困惑的模仿类的行为（构造函数、原型以及new）。
6.2 类与对象
我们已经看到“类”和“行为委托”在理论和思维模型方面的区别，现在看看在真实场景中如何应用这些方法。
6.2.1 控件“类”
6.2.2 委托控件对象
var Widget = {
init(width, height){
this.width = width || 50;
this.height = height || 50;
this.$elem = null;
},
insert($where) {
if(this.$elem){
this.$elem.css({
width: this.width + 'px',
height: this.height + 'px'
}).appendTo( $where );
}
}
};
var Button = Object.create( Widget );
Button.setup = function(width, height, label) {
// 委托调用
this.init( width, height );
this.label = label || "Default";
this.$elem = $("<button>").text( this.label );
};
Button.build = function ($where) {
// 委托调用
this.insert( $where );
this.$elem.click( this.onClick.bind(this) );
};
Button.onClick = function(evt) {
console.log("Button '" this.label + "' clicked!");
};
$( document ).ready( function () {
var $body = $( document.body );
var btn1 = Object.create( Button );
btn1.setup( 125, 30, "Hello");
var ben2 = Object.create( Button );
btn2.setup( 150, 40, "World" );
btn1.build( $body );
btn2.build( $body );
});
widget只是一个对象，包含一组通用的函数，任何类现的控件都可委托，Button同样只是一个对象。
从设计模式的角度来说，我们并没有像类一样在两个对象中都定义相同的方法名render()，相反，我们定义了两个更具描述性的方法名(insert() 和 build())。同理，初始化方法分别叫做init() 和 setup()。
6.3 更简洁的设计
在来看最后一个例子，它展示了对象关联如何简化整体设计。
在这个场景中我们有两个控制器对象，一个用来操作网页中的登录表单，另一个用来与服务器进行验证。我们需要一个辅助函数来创建Ajax通信。这里使用Jquery。
var LoginController = {
errors: [],
getUser() {
return document.getElementById( "login_username" ).value;
},
validateEntry(user, pw) {
user = user || this.getUser();
pw = pw || this.getPassword();
if ( !(user && pw) ) {
return this.failure( "Please enter a username & password!" );
} else if (user.length < 5) {
return this.failure( "Password must be 5+ characters!" );
}
// 如果执行到这里说明通过验证
return true;
},
showDialog(title, msg) {
// 给用户显示标题和消息
},
failure(err){
this.errors.push( err );
this.showDialog( "Error", "Login invalid: " + err );
}
};
// 让 AuthController 委托 LoginController
var AuthController = Object.create( LoginController );
AuthController.errors = [];
AuthController.checkAuth = function() {
var user = this.getUser();
var pw = this.getPassword();
if(this.validateEntry( user, pw )) {
this.server( "/check-auth", {
user: user,
pw: pw
} )
.then( this.accepted.bind( this ) )
.fail( this.rejected.bind( this ) );
}
};
AuthController.server = function(url, data) {
return $.ajax({
url: url,
data: data
});
};
AuthController.accepted = function() {
this.showDialog( "Success", "Authenticated!" );
};
AuthController.rejected = function(err) {
this.failure( "Auth Failed: " + err );
}
在行为委托模式中，AuthController 和 LoginController 只是对象，它们之间是兄弟关系，而非父类和子类的关系。
6.4 ES6更好的语法
// 使用更好的对象字面形式语法和简洁方法
var AuthController = {
errors: [],
checkAuth() {
//...
},
server(url, data){
//...
}
//...
}
// 现在把 AuthController 关联到 LoginController
Object.setPropertyOf( AuthController, LoginController );
反词法
简洁方法有一个非常小但是非常重要的缺点：
var Foo = {
bar(){ /*...*/ },
baz: function baz() { /*...*/ }
}
// 去掉语法糖之后的代码如下
var Foo = {
bar: function() { /*...*/ },
baz: function baz() { /*...*/ }
}
简洁写法即是匿名函数，所以也不具备可自我引用的词法标识符。
6.5 内省
var Foo = { /*..*/ };
var Bar = Object.create( Foo );
Bar...
var b1 = Object.create( Bar );
使用对象关联时，所有的对象都是通过[[Prototype]]委托互相关联，下面是内省方法
// 让Foo和Bar互相关联
Foo.isPrototypeOf( Bar ); // true
Object.getPrototypeOf( Bar ) === foo; // ture
// 让b1 关联到Foo 和 Bar
Foo.isPrototypeOf( b1 ); // true
Bar.isPrototypeOf( b1 ); // true
Object.getPrototypeOf( b1 ) === Bar; //true
我们没有使用 instanceof ，因为它会产生一些和类有关的误解。现在我们想的问题是“你是我的原型吗？”我们并不需要使用间接的形式，比如Foo.prototype或者繁琐的Foo.prototype.isPrototypeOf()。
网友评论