饥人谷技术博客JavaScript学习笔记

原型链

2016-11-14  本文已影响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的过程中,整个执行过程是怎么样的?

二、原型

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

  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这个东西,这个东西就和我们所说的原型有关。下面对原型来谈谈原型。

Paste_Image.png Paste_Image.png

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

三、 constructor

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

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

  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是由哪来的。
以上就是我对原型知识的一些理解。

上一篇 下一篇

猜你喜欢

热点阅读