js的原型和原型链

原创已于 2024-07-01 17:12:19 修改 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #原型模式 #开发语言

于 2020-03-03 16:22:12 首次发布

JS 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨JavaScript中构造函数、实例与原型之间的关系，解释了如何通过构造函数实例化对象，以及对象如何继承原型的属性。同时，文章详细阐述了原型链的概念，即对象通过proto属性连接到其原型，直至Object.prototype，最终指向null。

1.首先先搞清楚原型

Person是一个构造函数，我们new了一个实例person

function Person() {

}
var person = new Person();
person.name = '大柱';
console.log(person.name) // 大柱

prototype（每个函数都有一个 prototype 属性）

//对象person1,person2 name属性并未赋值,都从原型(Person.prototype)"继承"属性

Person.prototype.name = '大柱';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // 大柱
console.log(person2.name) // 大柱

proto(每一个对象(除了 null )都具有的一个proto属性，指向该对象的原型)

var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

所以我们可以理解为通过Person构造函数实例化的对象的原型指向就是该构造函数的原型

constructor（每个原型都有一个 constructor 属性指向关联的构造函数）

console.log(Person === Person.prototype.constructor); // true

实例与原型的关系

Person.prototype.name = '大柱';
var person = new Person();
person.name = '建国';
console.log(person.name) // 建国

delete person.name;
console.log(person.name) // 大柱

给实例 person 添加 name 属性，打印 person.name 的时候，结果自然为建国。

删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型（person.proto/Person.prototype）中查找，结果便是我们一开始给person原型的name属性赋值的“大柱”。

原型与原型

原型的原型指向（proto）Object.prototype

2.什么是原型链

console.log(Object.prototype.__proto__ === null) // true

我们把这个有proto串起来的直到Object.prototype.proto为null的链叫做原型链。原型链的形成是真正是靠proto 而非prototype