javascript 原型与原型链浅析

时间：2019-05-09 17:55:47 阅读：113 评论：0 收藏：0 [点我收藏+]

原型和原型链

什么是原型链

简单理解就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样可以一直通过__proto__想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

原型与原型链的几个要点

每一个函数都有一个prototype属性和一个 __proto__属性。
每一个对象都有一个__proto__属性。
（除null）所有的对象都是由构造函数创建的。
对象的__proto__ === 该对象的构造函数的prototype （ [].__proto__ === Array.prototype）
对象的__proto__ 也是一个对象，所以对象的__proto__的__proto__ === Object.prototype
null位于原型链最顶层
Function.__proto__ === Function.prototype。这是一个先有蛋还是先有鸡的问题
null 没有__proto__ 和 prototype
所有原型链属性传递方向（某个属性在本对象中找不到时候，会到原型链上去找）：先找对象本身属性 =》构造函数的prototype中属性 =》Object.prototype中的属性=》null （结束）

例子：

function Person(){
    this.name = name;
    this.age = age;
}
Person.prototype.talk = function(){
    console.log("hello");
}
let ming = new Person("ming",24);//ming === {name:"ming",age:24}
ming.talk(); // ming中没有talk这个属性，就会通过__proto__到到原型链中去找，ming.__proto__ ===  Person.prototype。
//由于ming.__proto__也就是 Person.prototype 也是一个对象，所以  ming.__proto__.__proto__ ===  Object.prototype。（如果ming.__proto__中没有找到talk属性会继续向上找ming.__proto__.__proto__ ，直到找到最顶层null）

原型链的应用

通过一个构造函数创建出来的多个实例，如果都要添加一个方法，给每个实例去添加并不是一个明智的选择。这时就该用上原型了。

在实例的原型上添加一个方法，这个原型的所有实例便都有了这个方法。
例子：给所有的function 添加一个 before属性和 after属性

Function.prototype.before = function(beforeFn){
    let functionObj = this;
    return function (){
        beforeFn.apply(this,arguments);
        functionObj.apply(this,arguments);
    }
}
Function.prototype.after = function(afterFn){
    let functionObj = this;
    return function (){
        functionObj.apply(this,arguments);
        afterFn();
    }
}
function test(){
    console.log('this is a test function!');
}
let test1 = test.before(function(){
    console.log(arguments);
    console.log('before');
}).after(()=>{
    console.log('after');
});
test1();