阅读 30439

写给自己复习的js系列(1)-- 原型链

这是最基本的一段通过构造函数新建对象的代码

function Person() {}
Person.prototype.name = 'feizai'

var person = new Person()
person.name // feizai
复制代码

image.png

核心知识点

1.函数既是对象又是函数
2.每个函数都有一个prototype指向它的原型对象
3.每个对象都有自身的属性__proto__指向它的构造函数的原型对象
4.每个prototype初始的时候都有一个constructor属性指向它对象的构造函数,但是Person.prototype = {}
  这种直接赋值就会令constructor丢失,要手动绑定
5.访问对象属性从自身中找不到,就会根据__proto__一直往原型链找
复制代码

上面的代码中,Person函数有一个原型对象prototype,就是Person.prototype,person对象是new Person() 得到的,所以person.__proto__ === Person.prototype

进阶一

上面说到了,函数既是对象又是函数,作为函数它拥有prototype属性,而作为对象,它拥有__proto__属性,函数既拥有__proto__也拥有prototype

打印一下Person.__proto__

image.png

这个是什么呢?person.__proto__就是它构造函数的prototype,同理Person.__proto__就是Person的构造函数的prototype,而这个构造函数就是Function

先看看Function的庐山真面目

image.png

可以看出Function也是一个函数,所以它也有__proto__和prototype,先看看Function.prototype

image.png

可以看出Person.__proto__ === Function.prototype,也就是说Person = new Function()

image.png

现在来看看Function.__proto__

image.png

这输出不是跟Function.prototype一模一样么

image.png

重要结论:Function.__proto__ === Function.prototype

进阶二

Person.__proto__我们知道了,Person.prototype是一个对象,所以Person.prototype拥有__proto__属性

我们来看看Person.prototype.__proto__

image.png

根据上面说的,__proto__指向的是构造函数的prototype,这里其实这就是我们的Obejct.prototype

image.png

image.png

image.png

从这里可以看出其实一起对象的__proto__最后会指向到Object.prototype最后到null

进阶结论

1.一切的对象的__proto__都是Object.prototype,Object.prototype的__proto__为null
2.Function的__proto__和prototype等价
复制代码

最后附上一张自己整理的图

image.png

文章分类
前端
文章标签