最近在網上看了諸多js原型鏈的解析,說得雲裡霧裡,不明所以。徹底了解後,決定出個博客記錄一下,一是方便後來人學習,二是方便日後複習。

首先,我們來看一下構造函數、原型、實例之間的關係圖:

所以,我們通常所說的原型鏈,其實指的就是  prototype 的鏈路,因為構造函數和實例是沒有任何指向父節點的成員的。

我們先來看一下 Array 的原型鏈:

三個節點分別是:

Array.prototype --> 有 concat, fill, find 等成員。

Object.prototype -->

null   -> 結束。

好了,那麼我們來實現一下自己的原型鏈。

 var People = function () {
};
People.prototype.ff = function () {
console.log('People.prototype.f');
}; const Man = function () {
} Man.prototype = Object.create(People.prototype); // -------------->關聯起來, 注意是從People.prototype創建的
Man.prototype.constructor = Man; // 構造函數,上圖上已經明確constructor要指向自己的構造函數。但是我們是從People.prototype創建的,
                      // 而Object.create並不會創建constructor, 需要我們去賦值。
const m = new Man(); m.ff();

第10行進行關聯,使用 Man 創建 m 實例,可以找到 ff 函數。

如果沒有第10行進行關聯,則會找不到 ff 函數。

需要注意的是,我們使用 Object.create 進行創建,這個稍候再討論。

雖然我們實現了原型鏈,但是成員變量property我們並沒有作處理,比如上面的代碼,如果在People中添加一個成員,在Man中是找不到的。

如下代碼:

 var People = function () {
this.p1 = 2;
};
People.prototype.ff = function () {
console.log('People.prototype.f');
}; const Man = function () {
this.m1 = 2;
} Man.prototype = Object.create(People.prototype);
Man.prototype.constructor = Man;
const m = new Man(); m.ff(); console.log(m);

打印出來的結果:

m 只包含自己的m1成員。

這個時候,我們需要從People繼承它的property. 具體實現就是在Man的構造函數中,使用People.call(this)。代碼如下:

 var People = function () {
this.p1 = 2;
};
People.prototype.ff = function () {
console.log('People.prototype.f');
}; const Man = function () {
People.call(this);
this.m1 = 2;
} Man.prototype = Object.create(People.prototype);
Man.prototype.constructor = Man;
const m = new Man(); m.ff(); console.log(m);

打印出來的結果:

我們發現p1、m1都包含了。

這也說明了,成員函數的繼承,其實是包含的關係,它並不像原型鏈一樣各自含有各自的東東。

People.call(this)這句代碼,已經明確說明執行People的構造函數,而People使用的this就變成Man的this了。

講到這裡,那麼繼承的實現也就很清晰了:

1、繼承基類的成員變量。

2、將原型鏈連起來。

補充說明:

Object.create. Javascript | MDN 的解釋:

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

則相當於:

 function create(obj) {
function F(){};
F.__proto__ = obj; //以传入参数为原型构造对象
return new F();
}

注意我們創建的代碼:

Man.prototype = Object.create(People.prototype);
Man.prototype.constructor = Man;

相當於 Man.prototype.__proto__ = People.prototype;  ---> 指向父節點。

所以這條鏈路就連起來了。

const m = new Man()

這個相當於:

 var o = new Object();
o.__proto__ = Man.prototype;
Man.call(o);

了解原理後,我們就了解爲什麼有些人寫:

Man.prototype = new People(); 可以通過。

依據篇首圖形,我們知道實例(new出來的對象)含有 __proto__ 與 成員變量,正好與 prototype 一致,只不過缺少了 constructor,這個是有隱患的。

hasOwnProperty

用於判斷成員變量的,是不是prototype中的函數。

因為成員變量繼承了過來,已經變成自己的成員,所以hasOwnProperty是可以判斷基類的成員的。

如果 !hasOwnProperty,就會延著prototype鏈路檢索,直到null.

isPrototypeOf
用於判斷實例對象是否在原型鏈上。
如:
People.prototype.isPrototypeOf(m)
instanceof
判斷實例對象是否爲某個構建函數創建的。如:
console.log(m instanceof Man) // true
console.log(m instanceof aaa) // false

js原型鏈與js繼承解析的更多相关文章

  1. js原型继承四步曲及原型继承图

    一:js原型继承四步曲 //js模拟类的创建以及继承 //动物(Animal),有头这个属性,eat方法 //名字这个属性 //猫有名字属性,继承Animal,抓老鼠方法 //第一步:创建父类 fun ...

  2. js原型解析

    我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...

  3. js原型及原型链解析

    js原型.原型链 这几天闲了看了下js的原型,以下内容为个人理解,如有错误,尽请指正. 首先,明确一点:js中的对象分为普通对象和函数对象,一般我们自定义的可以被new的函数称作函数对象,另外js内置 ...

  4. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  5. 对js原型简单的理解和图解

    对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...

  6. 【学习笔记】深入理解js原型和闭包(2)——函数和对象的关系

    上文(深入理解jS原型和闭包(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; console.log ...

  7. 谈谈我认识的js原型

    众所周知,JavaScript中是没有传统类的概念的,js通过原型链的方式实现继承.原型是js学习中的一大重点知识,在ES6出来之前,因为js不像php.java一样拥有类的写法,所以继承方式也就不像 ...

  8. JS原型链

    JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...

  9. 深入分析JS原型链以及为什么不能在原型链上使用对象

    在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...

随机推荐

  1. Scala进阶之路-高级数据类型之集合的使用

    Scala进阶之路-高级数据类型之集合的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Scala 的集合有三大类:序列 Seq.集 Set.映射 Map,所有的集合都扩展自 ...

  2. c#:无法将 NULL 转换成“System.DateTime”,因为它是一种值类型

    摘自:http://www.blogjava.net/parable-myth/archive/2010/09/30/333454.html 在C# 2.0里面的数据类型中,分为值类型和引用类型,引用 ...

  3. 【整理】Git相关资料

    http://book.51cto.com/art/201107/278731.htm http://book.51cto.com/art/201107/278828.htm  

  4. mysql先排序在分组

    – 表的结构 `test`– CREATE TABLE IF NOT EXISTS `test` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varcha ...

  5. 关于cookie和session

    在设置cookie的时候,它会保留在本地,无论你有没有退出浏览器都是.但是session只能在登录状态有效.退出浏览器过后就会消除掉.同时设置也是有问题的. @app.route('/login',m ...

  6. bzoj 1432 数学(找规律)

    我们可以发现所有的情况(除n=1时),都可以找到两个交叉的直线,就是第一层的那 两个线段所在的直线如图中左 那么我们以这个为准,两边对称着加直线,会得到右图,每一层是折线,且每 加一对儿就多两条线段, ...

  7. JAVA不可变类与可变类、值传递与引用传递深入理解

    一个由try...catch...finally引出的思考,在前面已经初步了解过不可变与可变.值传递与引用传递,在这里再次深入理解. 1.先看下面一个try..catch..finally的例子: P ...

  8. pytorch函数之torch.normal()

    Returns a Tensor of random numbers drawn from separate normal distributions who’s mean and standard ...

  9. MVC常用特性使用

    简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将继续介绍一些在开发中非常 ...

  10. 基于FPGA(DDS)的正弦波发生器

    记录背景:昨晚快下班时,与同事rk聊起怎么用FPGA实现正弦波的输出.我第一反应是利用高频的PWM波去滤波,但感觉这样的波形精度肯定很差:后来想起之前由看过怎么用FPGA产生正弦波的技术,但怎么都想不 ...