1

一段简单代码引入

function Foo() {};

var f1 = new Foo();

图片描述

1.概念简单理解

  • Foo()是构造函数,构造函数有一个prototype属性
  • Foo.prototype 是f1的原型对象,有一个constructor属性,指向该原型对象对应的构造函数,即
Foo.prototype.constructor

console.log(Foo.prototype.constructor === Foo);//true

console.log(f1._proto_=== Foo.prototype);//true

console.log(f1._proto_.constructor=== Foo);//true
  • f1是Foo的实例对象,自身没有constructor属性,但可以继承原型对象的属性,即
console.log(f1.constructor === Foo);//true

console.log(f1.hasOwnProperty('constructor'));//false


2.结合demo

原型链是对于构造函数而言的,首先定义一个构造函数,再实例化生成一个实例对象,可能在实例对象中没有定义某个属性,但是在构造函数中有,那么它就会往上(向构造函数中)查找,这个查找的过程就叫做原型链。

function Foo(){};

Foo.prototype.name = "ziziyaya";

var foo=new Foo();

console.log(foo.name); //ziziyaya

3.为什么需要原型链

为了实现继承,具有相同特性的代码不需要重复编写,放在构造函数里面,实例化的对象都会拥有里面的属性了,也就是可以共享属性和方法。


function Dog() {

    this.eat = 'food';

    this.smell = 'smart';

}

let dog1 = new Dog();

let dog2 = new Dog();

dog1.name = 'huang';

dog2.name = 'hei';

console.log(dog1.name+','+dog1.eat+','+dog1.smell);//huang,food,smart

console.log(dog2.name+','+dog2.eat+','+dog2.smell);//hei,food,smart

推荐文章:http://www.ruanyifeng.com/blo...

4.继续往上引申--Foo.prototype的构造函数是Object(),原型对象是Object.prototype

图片描述

console.log(Foo.prototype.__proto__ === Object.prototype);//true

实例对象Foo.prototype本身具有constructor属性,所以它会覆盖继承自原型对象Object.prototype的constructor属性

下面是自身没有constructor属性,继承自原型对象的f1和 自身有constructor属性覆盖了原型对象的Foo.prototype 截图对比

图片描述

图片描述

再往上引申 如果Object.prototype作为实例对象的话,其原型对象是什么,结果是null
附加一篇简洁易懂的原型链理解的文章 http://www.cnblogs.com/shuiyi...


fanfana
29 声望1 粉丝