原型链

作者: 饥人谷_廖珍 | 来源:发表于2016-11-14 21:05 被阅读33次

原型以及原型链等相关概念总是离不开构造函数。下面我们先从一个构造函数来看。

一、构造函数创建对象

function Person(name,sex) {
     this.name=name;
     this.sex=sex;
}
var p1=new Person('小明','男');
console.log(p1.name);//小明
console.log(p1.sex);//男

通过new 构造函数,创建了一个Person对象。
思考:在new的过程中,整个执行过程是怎么样的?

  • 当new一个函数的时候,整个函数会作为构造函数创建一个对象。
  • 函数里面的this代表创建的这个对象。给this添加属性就是给构造函数创建的对象添加属性。
  • 上述代码的执行过程:
    (1)创建一个空对象p1。
    (2)执行构造函数,给p1添加属性。所以p1是一个对象(Person(name:'小明','男'))

二、原型

在以上构造函数上,加一方法

  function Person(name,sex) {
      this.name=name;
      this.sex=sex;
  }
  Person.prototype.sayName=function() {
     console.log(this.name);
  }
  var p1=new Person('小明','男');
  p1.sayName();//小明。

在上面的例子中,出现了prototype这个东西,这个东西就和我们所说的原型有关。下面对原型来谈谈原型。

  • 任何函数在声明之后有一个prototype这个属性。其值是一个对象。
Paste_Image.png
  • 对象里面有个proto隐藏属性,指向构造函数的原型对象。(p1.proto===Person.prototype)
  • 当访问对象的属性时先从对象本身里找,找不到再从原型对象里找。
    下面我们画出上面代码的原型图,以便更好的理解。
Paste_Image.png

在上面的代码中我们p1中没有sayName这个方法,在原型对象里找到了sayName这个方法。

三、 constructor

还是上面的例子,上面我们说了Person.prototype里面有个一个constructor属性,那这个属性是什么勒?

  • constructor指向对象的创造者。即Person.prototype.constructor===Person。
    因为Person.prototype===p1.proto
    因此有p1.proto.constructor===Person。

四、 原型链,有了上面的知识,下面我们可以开始来看看原型链了

  function Person(name,sex) {
      this.name=name;
      this.sex=sex;
  }
  Person.prototype.sayName=function() {
      console.log(this.name)
  }
  var p1=new Person('小明','男')
   p1.sayName();
   p1.toString();

通过上面的原型分析,我们知道了p1的sayName方法来自其原型对象。那toString来自哪里勒?我们上面并没有在其原型对象上绑定toString方法。
对象是由函数new出来的,那Person.prototype这个对象是由什么函数创建而来的?

  • 我们来看一下原型链的取值图
Paste_Image.png

可以发现Person.prototype这个对象是由object创建的

  • 通过原型链取值图画出原型链图
Paste_Image.png

通过这个图,我们就知道toSring是由哪来的。
以上就是我对原型知识的一些理解。

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 原型链&查找规则&作用域链

    原型链(隐式原型链) 属性的查找规则(原型链的查找规则) 作用域链

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 原型链实现继承

    原型链 原型链示意图 使用原型链实现继承 这是怎么回事呢? 原型链在哪? 听我细细道来~ 首先 Teacher 实...

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

网友评论

    本文标题:原型链

    本文链接:https://www.haomeiwen.com/subject/bdmhpttx.html