阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

prototype VS __proto__ VS prototype chain

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0909/111927.html

这篇文章讲解prototype,__proto__和prototype chain三者到底是什么以及三者之间的关系
我们先来看一段代码:

function Dog() {}Dog.prototype.legsCount = 4;Dog.prototype.bark = function () {    console.log('wang, wang, wang');};let dog = new Dog();console.log(dog.bark()); //'wang, wang, wang'console.dir(Dog);console.dir(dog);

最后两行代码的打印结果为:


当实例化一个对象的时候,__proto__用来指向一个作为prototype的对象
也就是说__proto__指向的对象就是构造函数的prototype属性

这也是为什么我们调用dog.bark()可以成功的原因
因为当我们调用dog.bark()的时候,会先在this上去寻找bark()方法,但是我们的构造函数Dog()内部并没有定义bark()方法
这时候,正是因为dog对象有__proto__属性,所以沿着__proto__找到Dog.prototype,从而最终找到了bark()方法

prototype chain
我们知道JavaScript的继承是基于原型的继承
而每一个对象都有一个__proto__属性,它指向其构造函数的prototype属性,而prototype本身也是一个对象,它也有自己的__proto__属性,而这个__proto__属性又指向



,所以这样层曾上源,就形成了一个类似链表的关系,这个关系就是我们的prototype chain也就是原型链

所有对象原型链的终点都是Object.prototype, 最终指向null

原型链的特点有哪些?

1: 实例化对象之后再修改构造函数的prototype属性
function Dog() {}Dog.prototype.legsCount = 4;Dog.prototype.bark = function () {    console.log('wang, wang, wang');};let dog = new Dog();console.log(dog.legsCount); //4//修改prototypeDog.prototype = {    legsCount: 3};console.log(dog.legsCount); //4

以一个新对象的方式重写prototype之后,已经实例化的对象的__proto__并不会改变,因为它不会再重新指向一个新的对象

以一个新对象的方式重写prototype这种方式也还是危险的
因为prototype作为每个函数的默认属性,它本身还有一个constructor属性prototype.constructor
以一个新对象的方式重写prototype,会抹去prototype.constructor属性

2: 当原型链上的属性为对象类型时,会造成数据污染
function Dog() {}Dog.prototype.color = ['black', 'white'];Dog.prototype.bark = function () {    console.log('wang, wang, wang');};let dog1 = new Dog();let dog2 = new Dog();console.log(dog1.color);// ["black", "white"]console.log(dog2.color);// ["black", "white"]dog1.color.push('red');console.log(dog1.color);// ["black", "white", "red"]console.log(dog2.color);// ["black", "white", "red"]

在这种情况下,当我们改变其中一个对象的属性,其他所有的实例对象都会受影响

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!