我如何搞懂Javascript系列之原型和原型链

理解原型

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链。

构造函数创建对象

JavaScript 中使用 new 操作符,通过构造函数初始化新对象。我们先使用构造函数创建一个对象。

function Ninja() { 
    this.swung = true;
}

const ninja = new Ninja()
console.log(ninja.swung) // true

在上面例子中,简单的通过 Ninja 构造器实例一个对象。接下来我们通过这个例子详细展开。

prototype

在 JavaScript 中,函数可以有属性。每个函数都有一个特殊的属性叫作原型(prototype)。例如:

function Ninja() { 
  
}

Ninja.prototype.swung = true
const ninja = new Ninja()
console.log(ninja.swung) // true

上面例子中 Ninja 函数的 prototype 属性指向的是一个对象,被构建的实例对象 ninja 的原型也指向这个对象。关于 ninja 原型则在下面详细展开:

__ proto__

在 JavaScript 中,实例对象的原型属性是内置属性(使用标记 [[prototype]])。ES6之前 ECMAScript 标准没有提供接口访问这个属性的,但是许多浏览器都实现了 JavaScript 非标准的内置属性proto来访问对象属性。

function Ninja() { 
    this.swung = true;
}

const ninja = new Ninja()
console.log(ninja.__proto__ === Ninja.prototype) // true

每一个JavaScript对象(除了null)都具有proto属性,这个属性会指向该对象的原型。

接着在看下面这个例子:

function Ninja() { 
    this.swung = true;
}

const ninja = new Ninja()
console.log(Object.getPrototypeOf(ninja) === Ninja.prototype) // true

ES6开始,ECMAScript 标准提供了 Object.getPrototypeOf() 和 Object.setPrototypeOf() 访问器来访问和设置原型。proto它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6,所以建议不要使用。

上面例子中构造函数原型和实例对象原型是相同的,它们的原型中还包含一个特殊的属性 constructor 用于指向构造函数。

constructor

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

function Ninja() { 
  
}

console.log(Ninja.prototype.constructor === Ninja) // true

构造函数、实例对象和 constructor 关系图

image

原型链

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Ninja() { 
  
}

Ninja.prototype.swung = true
const ninja = new Ninja()
ninja.swung = false
console.log(ninja.swung) // false

delete ninja.swung
console.log(ninja.swung) // true

原型链的最顶层即原型链的终点Object.prototype为null,我们可以打印:

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

null 表示“没有对象”,即该处不应该有值。

所以 Object.prototype.__ proto__ 的值为 null 跟 Object.prototype 没有原型,其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就停止查找了。

你可能感兴趣的:(我如何搞懂Javascript系列之原型和原型链)