JS原型和原型链深度解析

说完闭包，我想原型和原型链是js中的难点也是重点，明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效，并且原型和原型链会是面试中必不可少的话题

什么是原型：

任何对象都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype。

new操作符具体干了什么呢?

其实很简单，就干了三件事情：

1 var obj = {}; 2 obj.__proto__ = Base.prototype; 3 Base.call(obj);

第一行，我们创建了一个空对象obj

第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象

第三行，我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法。

在谈原型链之前，我们首先要了解自定义函数与 Function 之间是什么关系，而构造函数、原型和实例之间又存在什么千丝万缕的关系呢？

其实，所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype，该属性也是一个对象；那么在原型对象上有一个constructor 属性，该属性指向的就是构造函数；而实例对象上有一个 proto 属性，该属性也指向原型对象，并且该属性不是标准属性，不可以用在编程中，该属性用于浏览器内部使用。

// _proto_ 在函数里有一个属性prototype 由该函数创建的对象默认会连接到该属性上 //prototype 与 _proto_ 的关系 _proto_是站在对象角度来说的 function Person() { } var p = new Person(); //方法才有prototype,普通对象没有prototype console.log(Person.prototype); // Object{} console.log(p.prototype); // undifined //任何对象都是有构造函数的,Person这种方法的构造函数是Function。 //constructor很容易被改变，一般不用它，此处打印的是下列对象的构造函数是什么。 console.log(p.constructor); //function Person(){} console.log(Person.constructor); //function Function(){} console.log({}.constructor); // function Object(){} console.log(Object.constructor); // function Function() {} console.log([].constructor); //function Array(){}

那什么是构造函数呢？

用function声明的都是函数，而如果直接调用的话，那么Person()就是一个普通函数，只有用函数new产生对象时，这个函数才是new出来对象的构造函数。

//创建构造函数 function Word(words){ this.words = words; } Word.prototype = { alert(){ alert(this.words); } } //创建实例 var w = new Word("hello world"); w.print = function(){ console.log(this.words); console.log(this); //Person对象 } w.print(); //hello world w.alert(); //hello world

print()方法是w实例本身具有的方法，所以w.print()打印hello world；alert()不属于w实例的方法，属于构造函数的方法，w.alert()也会打印hello world，因为实例继承构造函数的方法。

实例w的隐式原型指向它构造函数的显式原型，指向的意思是恒等于

w.__proto__ === Word.prototype

当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype中调用查找。

所以很好理解实例继承构造函数的方法和属性： w本身没有alert()方法，所以会去Word()的显式原型中调用alert()，即实例继承构造函数的方法。

什么是原型链？

原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。

如何分析原型链?

因为_proto_实质找的是prototype，所以我们只要找这个链条上的构造函数的prototype。其中Object.prototype是没有_proto_属性的，它==null。

最简单的原型链分析

function Person(name){ this.name = name; } var p = new Person(); //p ---> Person.prototype --->Object.prototype---->null

属性搜索原则：

当访问一个对象的成员的时候，会现在自身找有没有,如果找到直接使用。如果没有找到，则去 原型链指向的对象的构造函数的prototype中找，找到直接使用，没找到就返回undifined或报错。

原型继承

//原型继承的基本案例 function Person(name, age) { this.name = name; this.age = age; } //1.直接替换原型对象 var parent = { sayHello : function() { console.log("替换"); } } Person.prototype = parent; var p = new Person("张三", 50); p.sayHello(); //2.混入式原型继承 console.log("混入式原型继承"); function Student(name, age) { this.name = name; this.age = age; } var parent2 = { sayHello : function() { console.log("原型继承之混入式"); } } for ( var k in parent2) { Student.prototype[k] = parent2[k]; } var p = new Student("张三", 50); p.sayHello();

总结：

查找属性，如果本身没有，则会去__proto__中查找，也就是构造函数的显式原型中查找，如果构造函数中也没有该属性，因为构造函数也是对象，也有__proto__，那么会去它的显式原型中查找，一直到null，如果没有则返回undefinedp.proto.constructor == function Person(){}p._proto.proto== Object.prototypep._proto.proto.proto== Object.prototype.proto == null通过__proto__形成原型链而非protrotype