浅谈JavaScript原型链

xumenger 发布于2019-08-23 14:31 / 2721人阅读

摘要：在这其中我们就逃不开要讨论继承原型对象构造函数实例了。想要获得某一类型的构造函数可以用来获得，也可以对该属性进行赋值操作。三上面就提到一点是指构造函数的原型对象，它是一个对象，它是构造函数的属性。

原型链这一个话题，需要和很多概念一起讲，才能串成一个比较系统的知识点。在这其中我们就逃不开要讨论继承、原型对象、构造函数、实例了。

一、构造函数

构造函数是一类特殊的函数，它的作用是用来生成实例对象。想要获得某一类型的构造函数可以用 class.prototype.constructor来获得，也可以对该属性进行赋值操作。
利用构造函数创建实例要用到new关键字，这个过程会有以下几步：
a.创建一个对象
b.将构造函数中的this指向该对象的引用
c.执行构造函数中的代码
d.返回该对象

二、原型对象（prototype）

在原型链中，原型对象是一个很关键的点。定义一个函数对象的时候，会包含一个预定义的原型对象，即Object的实例，所以原型对象是针对函数对象来讲的。

三、prototype vs _proto_

上面就提到一点prototype是指构造函数的原型对象，它是一个对象，它是构造函数的属性。
而_proto_是一个实例对象的内部属性，用来指向创建该实例的函数对象的原型对象。
我们将在第五小节用代码更加直观得明白二者的关系

四、继承

在JavaScript中，我们可以用改变构造函数的原型对象来实现继承。

五、原型链

什么时候会出现原型链：当一个构造函数的原型对象（prototype）指向另一个引用类型的实例，该实例的构造函数的原型对象又包含一个指向另一个原型的指针。层层递进，就构成了实例与原型的链条。这也就是形成原型链的基本思路。
说个通俗的例子：

//父亲类构造函数
  function Father(){
    this.FProp = "father";
  }
  Father.prototype.FCall = function(){
    console.log(JSON.stringify(this)+" is calling father"s function");
  }

  //儿子类构造函数
  function Son(){
    this.SProp = "son";
  }

  Son.prototype.SCall = function(){
    console.log("I"m a son");
  }

  //通过原型继承
  //注意上面的SCall()会失效，因为用了继承，prototype中的方法和constructor被重写
  Son.prototype = new Father();
  Son.prototype.constructor =  Son;

  //生成实例对象
  var newInstance = function(){
    var tom = new Son();
    tom.FCall();
    console.log(tom.FProp);
    //tom.SCall(); 控制台会报undefined错误
    console.log(tom.SProp);

    console.log(Son.prototype.constructor);
  }

代码结果：
可以看出子类继承了父类之后，可以获取父类的属性和方法。

  var getDifference = function(){
    var tom = new Son();
    console.log(Son.prototype); 
    console.log(tom.__proto__);
    console.log(tom.prototype);   
  }

代码结果：
对象实例获取prototype的结果是undefined

私有云专线服务浅谈javascript 原型原型链原型链 javascript原型

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

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

浅谈JavaScript原型与原型链

摘要：在讲原型之前，先简单介绍一下几个概念构造函数例如上述代码创建的函数就被称为构造函数。同一个构造函数实例化得到的多个对象具有相同的原型对象，所以经常使用原型对象来实现继承。实例对象通过操作构造函数所创建的对象是实例对象。对于很多前端开发者而言，JavaScript的原型实在是很让人头疼，所以我这边就整理了一下自己对应原型的一点理解，分享给大家，供交流使用原型说起原型，那就不得不说p...

Zoom 2019-08-20 19:06 评论0 收藏0
浅谈JavaScript原型与原型链

摘要：在讲原型之前，先简单介绍一下几个概念构造函数例如上述代码创建的函数就被称为构造函数。同一个构造函数实例化得到的多个对象具有相同的原型对象，所以经常使用原型对象来实现继承。实例对象通过操作构造函数所创建的对象是实例对象。对于很多前端开发者而言，JavaScript的原型实在是很让人头疼，所以我这边就整理了一下自己对应原型的一点理解，分享给大家，供交流使用原型说起原型，那就不得不说p...

Yang_River 2019-08-01 17:31 评论0 收藏0
浅谈JavaScript原型与原型链

摘要：在讲原型之前，先简单介绍一下几个概念构造函数例如上述代码创建的函数就被称为构造函数。同一个构造函数实例化得到的多个对象具有相同的原型对象，所以经常使用原型对象来实现继承。实例对象通过操作构造函数所创建的对象是实例对象。对于很多前端开发者而言，JavaScript的原型实在是很让人头疼，所以我这边就整理了一下自己对应原型的一点理解，分享给大家，供交流使用原型说起原型，那就不得不说p...

fox_soyoung 2019-08-05 11:59 评论0 收藏0
浅谈 JavaScript 原型链

摘要：数组的构造函数是原型链的指向与其他除以外的构造函数相同，的也指向顶级原型对象，每一个数组都是的实例，都指向。实例对象查找构造函数原型对象的方法一般会把对象共有的属性和方法都放在构造函数的原型对象上。 showImg(https://segmentfault.com/img/remote/1460000018998704?w=900&h=506); 阅读原文概述在 JavaScr...

explorer_ddf 2019-08-23 12:18 评论0 收藏0
浅谈javascript的原型及原型链

摘要：在中，主要有两种创建对象的方法分别是对象字面量以及调用构造函数对象字面量调用构造函数其实上述两种创建对象的方法，本质上是一样的，都是引擎调用对象的构造函数来新建出一个对象。原型与原型链是javascript里面最最核心的内容，如果不能理解它们之间的存在关系的话，那么我们是不能理解这门语言的。在JS中，主要有两种创建对象的方法, 分别是对象字面量以及调用构造函数 //对象字面量 va...

includecmath 2019-08-20 14:17 评论0 收藏0