JavaScript 的原型详解

jopen 12年前

简单描述js原型

        原型提供了一群同类对象共享属性和方法的机制，对象继承原型的所有属性和方法（函数)。说白了js是使用原型来实现类继承的。

充分理解prototype / __proto__

        初学者确实在这两个属性上是不容易分辨清楚地。所以，一个搞前端的朋友说，这两个属性完全搞明白了，那js原型也就差不多理解透彻了。那我尝试阐述一下这两个属性（内容总结自他人的结晶和js文档）。

JavaScript 的原型详解

        prototype：prototype是函数的属性，它应用的场合是函数被用作构造函数时，如果你想让子类拥有某型特性，那我们可以直接操作父类（总是感觉父函数贴切）的这个prototype。所以在js的继承中prototype是父类构造函数的一个属性，这个属性指向被构造函数创建的对象（一定要注意prototype是函数的属性，而不是对象的）

        __proto__：在创建对象的过程中__proto__属性会指向构建这个对象的函数的prototype属性。Eg：var a = new Function(); a.__proto__ === Function.prototype。__proto__是所有的对象都拥有的属性，但是这个属性被废弃不提倡使用了。

        实例一：

var A = function () {       this .name = "a" ;  }  var B = {}  console.log(A.prototype);  console.log(B.prototype); //prototype是函数的属性，所以这里打印undefined，大家也就不会奇怪了吧。  console.log(B.constructor.prototype);  console.log(A.__proto__);  console.log(B.__proto__);


        结果如下：

JavaScript 的原型详解

原型链

        在js执行过程如果当前活动对象没有这个属性，那js执行引擎会按照该对象的__proto__属性一直向上级查找，直到Object.__proto__，如果还是没有发现则会返回undefined。上一张图看看到底是如何寻找的。

JavaScript 的原型详解

Javascript创建对象的步骤

        Javascript创建对象的步骤：(1)、创建新对象；(2)、将该对象的原型指向构造函数prototype所指向的那个原型对象；(3)、将该对象作为this参数调用构造函数。如下：

function Obj() {  }  var o = {};  Obj.call(o)