我如何搞懂Javascript系列之原型和原型链 - Go语言中文社区

我如何搞懂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 关系图

原型链

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

举个例子:

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 就停止查找了。

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_44002432/article/details/106109532
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢