JavaScript 原型及原型链简易理解

2023年3月28日 309次阅读 来源: sylvia_yue

1.1 原型。

prototype： 每个函数对象都有自己的prototype属性，这个属性是一个指针，指向对象的原型对象，包含所有实例共享的属性和方法。

通过给原型添加属性和方法来可以给对象添加属性或方法：

function Person() {}
Person.prototype.name = 'Tony';
Person.prototype.age  = 18;
Person.prototype.sayName= function() {
  alert(this.name);
}
  
var person = new Person();
person.sayName(); // 'Tony'

1.2 原型链

_ proto_ : 原型链，实例对象通过原型链去构造函数中查找对应属性

JavaScript 中的对象有一个内置属性 _ proto_，是对其他对象的引用。几乎所有对象在创建时 _ proto_ 属性都会被赋予一个非空的值。

var obj = { a: 1 };
obj.a;        //1

当你试图引用对象的属性时，如上 obj.a，会触发 [[Get]] 操作，对于默认的 [[Get]] 操作，第一步是检查对象本身是否有这个属性，有的话就使用它，若 a 不在 obj 中，就会继续访问对象的 _ proto_ 链，如下：

var obj = { a: 2 };

//创建一个关联到 obj 的对象
var newObj = Object.create(obj);

newObj.a;    //2

newObj 本身不存在 a 属性，因此会继续访问 newObj 的 _ proto_ 链，在 obj 中找到了 a 属性对应的值 2。若 obj 中也找不到 a 且 _ proto_ 链不为空，则会继续查找下去，直到找到属性或查找完整条原型链。

所有普通对象的原型链最终都会指向内置的 Object.prototype，它包含 JavaScript 中许多通用的功能：.toString()、.valueOf()、.hasOwnProperty() 等。

1.3 原型和原型链

实例对象._ proto_ = 构造函数.prototype
构造函数.prototype 包含 constructor 和 _ proto_ 两个属性，constructor 即为构造函数本身， _ proto_ 为原型链，是每个对象在创建时初始化的一个属性，当我们访问一个属性时，如果这个对象内不存在这个属性，就会去他的 _ proto_ 里面找这个属性，这样一层一层的找下去。
构造函数.prototype.constructor = 构造函数

    原文作者：sylvia_yue
    原文地址: https://www.jianshu.com/p/01f7a2befb41
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞