prototype的本质

在《关于思维方式的思绪》那篇文章里提到了，
原型的本质就是一种委托关系。
即我这里没有，就到我的原型里去看看，一旦找到就当成我的用。

本文详细说一下这个事情。
比如某女买东西，钱都是她老公付款的。
用程序刻画是这样的：

 var girl = {
     name:'小美'
 };
 var boy = {
     name:'小帅',
     pay:function(){
         console.log('花了1000元');
     }
 };
 Object.setPrototypeOf(girl,boy);
 girl.pay();

/**
程序中指明了girl的原型是boy, girl 没有pay方法, 但是boy有, 所以boy花钱了.
从这个例子来看,原型是一种委托关系,如果说是一种继承关系就不是那么贴切了.
*/

 var girl0 = {
     name: '小美',
     pay:function(){
         boy0.pay();
     }
 };

 var boy0 = {
     name: '小帅',
     pay:function(){
         console.log('花了2000元');
     }
 }
 girl0.pay();

同上面代码意义相同

 /**
 用这种委托关系,而不是用继承关系去理解原型,会感觉一切豁然开阔.
 下面我们通过这个例子看看什么事原型链?
 */
 var a = {
     fn1:function(){
         console.log(1);
     }
 };
 var b = {
     fn2:function(){
         console.log(2);
     }
 };
 var c = {
     fn3:function(){
         console.log(3);
     }
 };
 var d = {
     fn4:function(){
         console.log(4);
     }
 };
 Object.setPrototypeOf(d,c);
 Object.setPrototypeOf(c,b);
 Object.setPrototypeOf(b,a);
 d.fn1();
 d.fn2();
 d.fn3();
 d.fn4();
 /**
 上面代码中,a是b的原型,b是c的原型,c是d的原型.
 那么d要找到fn1方法,怎么找呢?
 先去其原型c中找.==没找到
 再去c的原型b中找.==没找到
 再去b的原型a中找.==找到了
 因此能调用fn1的方法.
 上面的过程就是原型链查找的过程.
 讲到这里,原型链的原理想必是懂了.
 此时我们再看a,b,c,d四个对象是什么关系?
 如果要看作是集成的话,那么就是父子关系.
 如果用委托的观点来看,那么每一个对象,都是后一个对象的智囊,也就是原型.
 所以本文的关点是什么呢?
 不要把原型当成亲爹,要当成智囊,要当成老公,要当成干爹.
 本质是委托关系,说白了,就是利用.
 其实,讲到这里原型是什么已经基本说完,后面我们准备展开说说,跟构造函数扯上.
 */

第一个问题:什么叫做"一旦找到就当我的用"?
其实指的就是this问题.

 var aaa = {
     sayName:function(){
         console.log(this.name);
     }
 };
 var laoyao = {
     name:'laoyao'
 };
 Object.setPrototypeOf(laoyao,aaa);
 laoyao.sayName();

第二个问题:克隆的观点?
加入一个对象是一个空对象的原型.
因为空对象什么都没有,所有的都来自其原型,我们可以认为此对象是其原型的克隆.

 var laowang = {
     name:'laowang',
     sayName:function(){
         console.log(this.name);
     }
 };
 var fenshen={};
 Object.setPrototypeOf(fenshen,laowang);
 console.log(fenshen.name);
 fenshen.sayName();

当然, Object.create更适合描述克隆.

var laoli = {
    name:'laoli',
    sayName:function(){
        console.log(this.name);
    }
};
var clone = Object.create(laoli);
clone.sayName();

第三:我们封装产生对象的过程?
希望上述对象通过函数产生.

var createPerson = function(name){
    return{
        name:name,
        sayName:function(){
            console.log(this.name);
        }
    };
}
var laozhang =createPerson('laozhang');
laozhang.sayName();

我也换种方式来做：

 var createPersonOther = function(name){
     var o = {};
     o.name = name;
     var proto ={
         sayName:function(){
             console.log(this.name);
         }
     };
     Object.setPrototypeOf(o,proto);
     return o;
 }
 var laoyang =createPersonOther('laoyang');
 laoyang.sayName();

 var createPerson =function(name){
     var o = {};
     o.name = name;
     Object.setPrototypeOf(o,createPerson.proto);
     return o;
 }
 createPerson.proto={
     sayName:function(){
         console.log(this.name);
     }
 };
 var laoyao =createPerson('laoyao');
 laoyao.sayName();

写到这里,你会发现其实跟我们平常写的代码很像:

 var Person = function(name){
     this.name=name;
 }
 Person.prototype = {
     sayName:function(){
         console.log(this.name);
     }
 };
 var laoyaoq =new Person('laoyaoq');
 laoyaoq.sayName();

我们来刻画一下new过程.我们假设new是一个函数,类似call和bind的那样的函数.
new Person('laoyaoq');我们换成Person.new('laoyao');
此函数定义如下:

 Function.prototype.new = function (){
     var that = Object.create(this.prototype);
     this.apply(that,arguments);
     return that;
 };

 var Person = function (name) {
     this.name = name;
 }

 Person.prototype ={
     sayName:function(){
         console.log(this.name);
     }
 };
 var laoli = Person.new('laoli');
 laoli.sayName();

其中这new函数,不是完整模拟new的(考虑返回值是否是对象).详细请看《js语言精粹》47页。其中this指向的是当前函数(Person)
如果上面的代码看不习惯的话,我们也可以发明如下的api：
myNew(Person, 'laoli')

 var myNew = function() {
     var Constructor = [].shift.call(arguments);
     var that = Object.create(Constructor.prototype);
     Constructor.apply(that, arguments);
     return that;
 }
 var Person = function(name) {
     this.name = name;
 }
 Person.prototype = {
     sayName: function() {
         console.log(this.name);
     }
 };
 var laoyaoyao = myNew(Person, 'laoyaoyao');
 laoyaoyao.sayName();

说明:上述代码改编于《JS设计模式与开发实践》第20页.
如果读者没有其他什么面向对象语言基础,
那么看此文,会觉得new是一个封装委托关系的过程.
而不是什么模拟java，模拟不彻底啥的.
所以在我看来,那些号召不要使用new的文章,也未必正确.
最后说下:这个委托的观点,《你不知道的javascript》有更详细的介绍.