原型与原型链作为JavaScript的一个核心知识点,很重要!!!!!!!!
原型
通常,我们写一个构造函数都是这样:
function Person () { //... }
我们不在这个构造函数里写任何代码,当我们在浏览器控制台通过console.dir
打印出这个构造函数时,可以看到它被添加了一个属性prototype
。
构造函数Person
通过prototype
属性就能访问到它的原型对象,Person.prototype
就是原型对象
当我们需要通过Person
构造函数创建一个实例时,通常是这么写:
function Person () { //... } const person = new Person() // 通过new操作符创建一个实例 console.log(person instanceof Person) // true
那么person
实例可以访问Person
构造函数的原型对象吗? 显然是可以的。
通过new创建的实例上有一个__proto__
属性(注意⚠前后是两个下划线)可以直接访问原型对象Person.prototype
。通常,我们将__proto__
属性称为隐式原型属性。
如下图所示
在原型上定义的属性和方法,在实例上能够继承这些属性和方法。
function Person () { //... } Person.prototype.sayHi = 'Hi' const person = new Person() // 通过new操作符创建一个实例 console.log(person.sayHi) // Hi console.log(person.__proto__ === Person.prototype) // true 复制代码
此外,如果原型对象Person.prototype
需要访问它原来的构造函数可以通过constructor
属性,如下图所示
function Person () { //... } Person.prototype.sayHi = 'Hi' const person = new Person() // 通过new操作符创建一个实例 console.log(person.sayHi) // Hi console.log(person.__proto__ === Person.prototype) // true console.log(Person.prototype.constructor === Person) // true 复制代码
原型链
当我们需要读取实例上的属性时,JS会先在当前实例上查找是否有该属性,如果没有则通过__proto__
访问原型去查找是否有该属性,如果有的话就可以直接使用,没有的话,就会再通过__proto__
去访问原型的原型,因为原型也是一个对象嘛。
Person.prototype
可以看做是Object
的实例,这样的话Person.prototype
通过__proto__
访问的是Object
的原型Object.prototype
,Object.prototype
也有一个__proto__
属性,只不过这次不套娃了,它指向的是null
。
总结一下:当我们访问一个实例(例如person)的属性或方法时,会先在当前实例
上查找,若查找不到,会到原型
上查找,若原型上查找不到,就到原型的原型
上查找,若还是查找不到就指向null
。
如下图所示:
上面提到的:Person.prototype
可以看做是Object
的实例。
其实我们在JS中创建的对象都是Object
的实例,他们都会继承Object
原型对象上的属性和方法,并且 创建的对象.__proto__ === Object.prototype
const obj = {} console.log(obj.__proto__ === Object.prototype) // true console.log(obj.toString) // ƒ toString() { [native code] },toString是继承Object.prototype上的方法 const obj2 = new Object() console.log(obj2.__proto__ === Object.prototype) // true console.log(obj2.toString) // ƒ toString() { [native code] } 复制代码
既然Person.prototype
可以看做是Object的实例。那么就可以在Object处引出一个箭头指向Person.prototype
,表示通过new创建一个实例对象。
最后,再把节点和连线调整一下,最终得到的图如下所示