js中的原型和原型链-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1038 天，文章内容可能已经过时。

什么是原型？
- __proto__和prototype
- constructor构造函数
什么是原型链？
总结

什么是原型？

原型又分为显式原型和隐式原型

显示原型
在js中每一个对象都有一个原型————prototyoe，它包含所有实例对象共享的属性和方法
隐式原型

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	say() {
		console.log(`姓名：${this.name}，年龄：${this.age}`);
	}
}
const person = new Person("小明", 24);

console.log(person.name, person.age); // 小明 24

person.say(); // 姓名：小明，年龄：24

console.log(person);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以看到，在打印name和age以及调用say方法都能成功打印出正确的值，但是在打印实例对象的时候，会发现只有name和age属性，没有say方法，这个say方法其实是在__proto__上，当我们在类中添加方法的时候，会被添加到这个类的原型上，而当我们调用say方法的时候，会在自身的属性或方法中查找这个方法，如果没有，则会在自身的__proto__上来查找这个方法，而这个__proto__也叫做隐式原型。

proto和prototype

console.log(person.__proto__);

console.log(Person.prototype);

console.log(person.__proto__ === Person.prototype);

1
2
3
4
5

可以看到打印结果是一样的，并且它们两个是完全相等的。则可以说明：

每一个构造函数都有一个prototype指向它的原型对象
实例对象可以通过__proto__指向它的原型对象

constructor构造函数

可以看到在原型对象上还有一个constructor属性

constructor构造函数

console.log(person.constructor);

constructor构造函数

可以看到constructor的值就是person的类，也就是构造函数，所以constructor的作用就是用来保存自己的构造函数引用

什么是原型链？

原型链就是：对象 => 对象的原型 => 原型的原型 => 原型的原型的原型 => null，当要查找对象上的属性或者方法时，如果在自身上没有找到，就会在隐式原型对象下查找，直到找到，或者到达尽头null

总结

每一个构造函数都有一个prototype指向它的原型对象，prototype的作用是让所有实例对象有共享的属性和方法
实例对象可以通过__proto__指向它的原型对象，__proto__的作用是作为桥梁提供一种成员访问机制，不停的通过__proto__去查找上一级
原型对象有constructor指向它的构造函数

js中的原型和原型链

什么是原型？

__proto__和prototype

constructor构造函数

什么是原型链？

总结

proto和prototype