javaScript原型及原型链详解（二）

widuu 发布于2019-08-20 16:37 / 1926人阅读

摘要：当然这还没完，因为我们还有重要的一步没完成，没错就是上面的第行代码，如果没有这行代码实例中的指针是指向构造函数的，这样显然是不对的，因为正常情况下应该指向它的构造函数，因此我们需要手动更改使重新指向对象。

第一节内容：javaScript原型及原型链详解（二）

第一节中我们介绍了javascript中的原型和原型链，这一节我们来讲利用原型和原型链我们可以做些什么。

普通对象的继承

  var a = {
    x: 10,
    caculate: function(z) {
      console.log(this.x + this.y + z)
    }
  };

  var b = {
    y: 20,
    __proto__: a
  };

  var c = {
    y: 30,
    __proto__: a
  };

  b.caculate(30)    // 60
  c.caculate(40)    // 80

这样我们就通过的原型链实现了普通对象的继承，下面我们还是通过一张原型图来讲解一下继承的过程。

上面代码中我们创建了三个普通对象a、b、c，其中a有一个x属性，和caculate方法；b和c都有一个y属性，同时让b和c的默认属性__proto__属性指向a对象，如图所示。
这是时候我们调用了b.caculate(30), c.caculate(40),显然b和c的自身方法中是没有caculate方法的，那么这个时候就会沿着b的原型链向上查找，然后找到了a中有caculate方法，则返回caculate方法，
如果a中也没有这个方法，那么会沿着原型链继续向上查找，找到则返回，找不到则返回undefined

函数对象的继承

比如我们有一个名为"Animal"的构造函数，还有一个叫做"Cat"的构造函数：

function Animal() {};
Animal.prototype.species = "动物";

function Cat(name, color) {
    this.name = name;
    this.color = color;
}

其中Animal对象中有一个原型属性species = "动物"，Cat对象有两个自身对象name和color，这个时候我们如果需要让Cat对象拥有Animal对象中的属性应该怎么办呢？很简单我们只需要让Cat继承Animal对象就行了，下面我们看如何让Cat继承Animal：

1    Cat.prototype= new Animal();
2    Cat.prototype.constructor = Cat;

3    var cat1 = new Cat("大白", "白色")
4    console.log(cat1.species)    // 动物

上面的方法是通过直接继承prototype的方法实现的继承，如上图所示：我们一开始创建Cat对象时，Cat.prototype默认指向Cat的原型(如步骤1所示)。然后我们更改Cat的原型链，让Cat.prototype指向Animal 的实例(实例中具有构造函数的所有属性和方法)，如步骤2所示，这样就成功更改了Cat的原型链，当我们调用Cat.species属性时，沿着原型链就查找到Animal实例中的species属性了，这样就实现了函数对象的继承。
当然这还没完，因为我们还有重要的一步没完成，没错！就是上面的第2行代码，如果没有这行代码Animal实例中的constructor指针是指向Animal构造函数的，这样显然是不对的，因为constructor正常情况下应该指向它的构造函数，因此我们需要手动更改:Cat.prototype.constructor = Cat; 使constructor重新指向Cat对象。

我们这里讲的继承的方法只是常见的一种，另外还有多种方法实现继承，这里推荐阮一峰的一篇文章：构造函数的继承，里面讲了常见的实现继承的方法。这篇文章也是参考了里面的方法。

如果看了这两篇文章，你还是没搞清楚原型和原型链，给你推荐我学习的时候看的几篇文章，反复的看反复的阅读，总会弄明白的，毕竟我是花了三天时间才搞懂了。
最详尽的 JS 原型与原型链终极详解
深入理解JavaScript系列（10）：JavaScript核心（晋级高手必读篇）
前端开发必须知道的JS（一）原型和继承

GPU云服务器云服务器原型原型链原型链 javascript原型原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83051.html

javaScript原型及原型链详解（一）

摘要：执行行代码，我们可以看到控制台打印出来的结果如下结果印证了我们上面讲的内容指向的构造函数指向的原型对象原型对象中指向构造函数。在javascript中原型和原型链机制是最难懂的部分（没有之一），同时也是最重要的部分，在学习的过程中你可能认认真真的看了一遍但还是完全不懂书上说的什么，的确是这样的，我在学习的时候可是反复看了4、5遍才初步理解了。下面我把我的理解总结了一下希望对你们有...

springDevBird 2019-08-20 16:37 评论0 收藏0
javascript中new关键字详解

摘要：本文给大家详细介绍了下中关键字的使用方法，以及使用关键字的区别，有需要的小伙伴可以参考下。第行通过关键字创建了一个新对象行对象尝试访问和属性，并调用方法。一般情况下，函数对象在产生时会内置属性并将函数名作为赋值仅函数对象。本文给大家详细介绍了下javascript中new关键字的使用方法，以及javascript 使用new关键字的区别，有需要的小伙伴可以参考下。 function ...

alaege 2019-08-21 16:45 评论0 收藏0
【前端基础进阶】JS原型、原型链、对象详解

摘要：二构造函数我们先复习一下构造函数的知识上面的例子中和都是的实例。这两个实例都有一个构造函数属性，该属性是一个指针指向。原型链其中是对象的实例。一. 普通对象与函数对象 JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0