javascript中原型和原型链的机制是最难的部分(没有之一),也是最重要的部分。你可能在学习的过程中认真看了一遍,但还是完全看不懂书上说的是什么。这是真的。我读书的时候,看了四五遍才看懂。下面我总结一下我的理解,希望对你有所帮助。对象在说原型和原型链之前,先说说基础——js对象。什么是对象?这里引用别人的话“js中的一切都是对象”。先不要完全理解,因为我自己也不懂,在后面的学习中会慢慢理解的。首先,js中的对象分为两种:函数对象和普通对象。请参见以下示例:functionfun1(){};varfun2=function(){};varfun3=newFunction();varobj1=newfun1();varobj2={};varobj3=new对象();控制台日志(对象类型);//函数console.log(typeofFunction);//函数console.log(typeofobj1);//对象控制台.log(typeofobj2);//对象console.log(typeofobj3);//对象console.log(typeoffun1);//函数console.log(typeoffun2);//函数console.log(typeoffun3);//function上面代码中,fun1、fun2、fun3是函数对象,obj1、obj2、obj3是普通对象,那么如何区分呢?很简单,newFunction()创建的对象都是函数对象,其他都是普通对象。fun1和fun2归根结底是newFunction()创建的,所以也是函数对象。普通对象首先我们来说说普通对象。下面我们用一张图来看看普通对象在创建时做了些什么。1varfoo={2x:10,2y:203}4console.log(foo.__proto===Object.prototype)//true在上面的代码中我们创建了一个普通对象foo并初始化了两个属性(selfattributes)x,y和属性__proto__自动在对象内部创建。这个__proto__属性其实是一个指向构造foo的构造函数原型的指针。这里,foo对象其实是通过newObject创建的,所以第四行代码的结果为true。这里说的Object.prototype涉及到函数对象,因为只有函数对象才有prototype属性,所以接下来说说函数对象。函数对象用类似于上面的代码解释:1functionfoo(){2this.x=103}4foo.prototype.y=20;5console.log(foo.__proto__);6console.log(foo.prototype);我们在创建foo函数的时候,初始化了一个自身属性x=10,同时在函数对象中自动创建了一个原型属性和__proto__属性,同时也为foo创建了一个原型对象foo.prototype。其中__proto__属性在上面已经提到过,prototype属性指向新创建的foo的prototype原型对象。在此原型对象中自动创建一个构造函数属性,指向构造函数foo。(注:原型对象prototype也是普通对象,所以会自动创建__proto__属性,为避免文章晦涩难懂,这里省略,后面会深入讲解。)执行第四行代码创建aprototype为新创建的原型对象添加一个原型属性y=20。执行第5行和第6行,我们可以看到控制台打印的结果如下:结果证实了我们上面说的:1.__proto__指向foo的构造函数2.prototype指向foo的原型对象prototype3.Prototype对象中的constructor指向构造函数foo。下一节:javaScript原型与原型链详解(二)
