小议JS原型链、继承

继承是前端面试必问，说到继承，就必须谈一谈原型链，本文适合有一定基础的且对原型链有一定了解的前端朋友。

原型链

我面试的时候都会这么回答原型链：js万物皆对象，用var a={} 或 var a = new Object();或者用构造函数的形式：var a = new A();创建一个对象时，该对象不仅可以访问它自身的属性，还会根据__proto__属性找到它原型链上的属性，直到找到Object上面的null。如有不贴切，忘评论不足之处哈。更详细的参考mdn： developer.mozilla.org/zh-CN/docs/…

对于下面的例子：

var A = function(){
    this.name="xiaoming";
}
A.prototype.age=9;
var a = new A();
console.log(a.age); //9
复制代码

我参考以前学习java时对实例和Class的图画了一个原型链的图，不太好，但是画图不易，小女子求您一个赞哈。

言归正传，图中长方形代表实例对象a，圆形代表原型，三角形代表构造函数。由图可知：

a.__proto__ === A.prototype; //true
A.prototype.constructor===A; //true
A.prototype.__proto__===Object.prototype; //true
Object.prototype.__proto__===null; //true
复制代码

上方示例可以在看完我的解释之后再回顾一遍。实例和原型之间是通过__proto__属性连接，且是单向的，从实例指向原型；原型和构造函数之间连接是双向的，通过constroctor和prototype连接，具体见图；其实Function和Object比较特殊，他们既是对象又是函数，两者内部同时含有proto和prototype属性，可看下面代码：

Object.__proto__ === Function.prototype //true
Object.__proto__ === Function.__proto__//true
Object.prototype === Function.prototype.__proto__ // true
Function instanceof Object //true
Object instanceof Function //true
复制代码

至此，原型链的知识差不多可以理解了，后面介绍继承的几种方式。

小议JS原型链、继承

原型链

原型链继承

构造继承

组合继承

猜你喜欢