JS基础：一篇文章搞懂原型与原型链

原型

1、定义构造函数

function Person() {}
var Person1 = function() {};
class Person2 {
    constructor() {}
}

2、构造函数的prototype属性指向一个对象

console.log(Person.prototype); // {}

3、构造函数构造实例对象

const person1 = new Person();

4、获取实例对象的原型：

获取实例：getPrototypeOf方法或__proto__属性；
实例的原型 === 构造函数的prototype属性。

// 实例的原型
Object.getPrototypeOf(person1) === person1.__proto__
// true

// 实例的原型就是构造函数的prototype属性
Object.getPrototypeOf(person1) === Person.prototype;
// true
__proto__ === Person.prototype;
// true

5、构造函数的prototype属性的constructor属性指回构造函数

Person.prototype.constructor === Person; // true

结论

什么是原型

构造函数的prototype属性指向一个对象，这个对象就是通过构造函数构造出来的实例的原型。

如何获取原型

除了null之外的对象，可以通过__proto__属性或者getPrototypeOf方法获取到它的原型。

构造函数、原型与实例的关系

1、构造函数的prototype属性指向一个对象；
2、这个对象就是通过构造函数构造出来的实例的原型；
3、原型的constructor属性指回构造函数。

原型链

示例

// Person 构造函数
function Person(name){this.name=name};
Person.prototype = {a:1};

// Student 构造函数
function Student(age){this.age=age};
const person1 = new Person('Marry')
Student.prototype = person1;

// Student 构造实例对象
const stu = new Student(12);
console.log(stu) ; // Student{age: 12}
console.log(stu.__proto__) ; // Person{name: 'Marry'}
console.log(stu.__proto__.__proto__) ; // Person{a: 1}

结论

每一个对象，都有一个原型对象；
原型对象作为对象也有自己的原型对象；
这样层层递进直到原型为 null 结束；
就形成了一个链条，这个链条就是原型链。

特性

在实例上找属性找不到，在原型上找，原型上没找到，继续找原型的原型

console.log(stu.age) ; // 12
console.log(stu.name) ; // 'Marry'
console.log(stu.a) ; // 1