小议JS原型链、继承

综合技术 2018-12-09 阅读原文

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

原型链

我面试的时候都会这么回答原型链: 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
复制代码

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

稀土掘金

责编内容by:稀土掘金阅读原文】。感谢您的支持!

您可能感兴趣的

change auto image slider to link click slider i want change this image slider, as a onclick slider. this slider is auto slide. i need to slide each image by click a l...
使用Chrome Devtools调试JavaScript V8引擎 最近开发小程序JavaScript的运行时,通过在客户端嵌入JavaScript V8引擎来实现。前端同学需要调试JavaScript代码,正好Chrome浏览器的Devtools是与V8的Inspector调试协议一脉相承的,理论上...
Create awesome samples from configuration samples-viewer-generator A CLI utility to generate an web app structure as samples viewer quickly for presen...
JS常见的排序算法 大家好,我是IT修真院北京分院第20期的学员王野,一枚正直纯洁善良的程序员 今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点——JS常见的排序算法 一、背景介绍 算法(Algorithm)是指解题方案的准确...
同步、异步、回调执行顺序之经典闭包setTimeout分析... 撰写于 2017-12-06 修改于 2017-12-07 分类web开发 /JS 标签运行机制 /JS /event queue /stack 聊聊同步、异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,...