JS温习--原型链小结

2019年8月24日 109次阅读 来源: fanfana

一段简朴代码引入

function Foo() {}；

var f1 = new Foo();

《JS温习--原型链小结》

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

《JS温习--原型链小结》

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

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

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

《JS温习--原型链小结》

《JS温习--原型链小结》

再往上引伸 假如Object.prototype作为实例对象的话，其原型对象是什么，结果是null
附加一篇简约易懂的原型链明白的文章 http://www.cnblogs.com/shuiyi…

    原文作者：fanfana
    原文地址: https://segmentfault.com/a/1190000013441810
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞