×
广告

JavaScript 原型及原型链简易理解

96
sylvia_yue
2018.05.18 22:13 字数 505

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 = 构造函数

每日一解
Web note ad 1