一文搞懂JavaScript原型及原型链(附代码)

2023-08-23 0 605

原副标题:该文比如说JavaScript蓝本及蓝本链(附标识符)

JavaScript 是一类如前所述蓝本的程序词汇词汇。尽管你时常会看见classURL,但它的下层其本质却是用于蓝本。

在责任编辑中,他们将介绍 JavaScript 的蓝本物理性质,和第一类中的蓝本链。

具体来说检查和下列标识符:

const animals = {

name: “animal”,

type: “object”,

}

animals.hasOwnProperty(“name”)// true

但他们并没给animals卵蛤属hasOwnProperty,可它为何能初始化该方式?在责任编辑完结时,他们将介绍其组织工作基本原理和更多文本。

一、蓝本的基本概念

依照翻查获得的字面上原意的说明是:

指两个词汇或两个类别象征意义的大部份众所周知数学模型或原形像,是两个类别的众所周知特点,他们能用右图中的工程车实例较好地说明这一点儿。

一文搞懂JavaScript原型及原型链(附代码)

蓝本“A”是建立其它版(如“B”和“C”)的第两个版。“A”包涵工程车应具有的最基本要素,而“B”和“C”将包涵更多的机能。

这意味著,“B”和“C”是“A”的改良版,但仍包涵“A”的特点。“A”有五个车胎,“B”也有五个车胎,但能飞,“C”反之亦然有五个车胎,但能在陆上高速行驶。

JavaScript 在蓝本的基础上组织工作。在每个函数的声明中,JavaScript 引擎将prototype属性添加到该函数,这使该函数成为能建立其它版的蓝本。他们能通过打印其属性确认:

function hello() {

console.log(“hello”)

}

console.dir(hello)

结果:

一文搞懂JavaScript原型及原型链(附代码)

如上图所示,显示了函数的属性,hello函数中包括了prototype属性, 和另两个名为__proto__的属性。责任编辑稍后会详细介绍。

该prototype第一类有两个属性:两个名为constructor和另两个反之亦然名为__proto__的属性。前者指向hello函数,后者指向Object。

二、蓝本的好处

说蓝本的好处之前他们先说一下构造函数,这是建立第一类的一类方式,如下所示:

function Hello() {

console.log(“hello”)

}

const anotherVersion = new Hello()

anotherVersion.type = “new”

console.log(anotherVersion)

Hello首字母大写是一类约定,表示该函数能用于构造第一类,这个函数也被称为构造函数。

结果:

一文搞懂JavaScript原型及原型链(附代码)

结果现在向他们展示了这个anotherVersion第一类是两个从Hello函数通过newURL而变化来的。你能通过这种方式去建立类似具有相同机能的第一类,例如:

function Obj(name) {

this.name = name;

this.printName = function () {

console.log(this.name)

}

}

const javascript = new Obj(“javascript”)

const java = new Obj(“java”)

console.log(javascript)// Obj {name: javascript, printName: f}

console.log(java)// Obj {name: java, printName: f}

构造函数中的this变量指向构造函数new出来的实例化第一类(在上面的标识符中是javascript和java)。

他们能看见,尽管javascript和java具有不同的名称值,但它们具有相同的机能标识符。

使用蓝本的好处就是,你能通过两个构造函数去建立很多具有相同机能的第一类,并且这些第一类都具有不同的名字。

还记得上面hello函数有两个属性:prototype和__proto__。prototype还有两个属性:constructor和__proto__。使用构造函数建立第一类时,使用了prototype属性的constructor属性,让他们用下面的标识符检查和一下:

function Obj(name) {

this.name = name

this.printName = function () {

console.log(this.name)

}

}

const javascript = new Obj(“javascript”)

console.log(javascript)

结果:

一文搞懂JavaScript原型及原型链(附代码)

从上图中,你会看见__proto__属性连接到他们的构造函数Obj。

三、与蓝本共享机能

现在他们知道函数的prototype属性使该函数成为可用于建立其它第一类的原型。

如果该prototype属性有其它属性呢?他们知道,JavaScript 第一类能在任何时候添加新的属性,让他们来看看:

function Obj(name) {

this.name = name

this.printName = function () {

console.log(this.name)

}

}

const javascript = new Obj(“javascript”)

Obj.prototype.printType = function () {

console.log(this.type)

}

console.log(javascript)

结果:

一文搞懂JavaScript原型及原型链(附代码)

如上图所示,__proto__属性现在有两个printType方式,但第一类javascript本身没printType方式。由上面所述结果他们能知道,__proto__属性连接他们的构造函数,由于javascript在默认情况下能访问__proto__属性中的构造函数,因此它也能访问printType。因此,下列操作将正常组织工作:

javascript.printType()// undefined

javascript.type = “language”

javascript.printType()// language

JavaScript 是如何做到这一点儿的呢?具体来说它检查和第一类是否存在该方式,如果不存在,它检查和__proto__属性。

四、蓝本链

他们看最后一张图片,你会注意到工程车B和C也有自己的蓝本,这意味著Obj用于蓝本的第一类也继承了另两个蓝本的一些特性,这称为蓝本链。

一文搞懂JavaScript原型及原型链(附代码)

这说明,两个第一类能是蓝本的新版,同时也是另两个第一类的原型。因此,当你尝试访问第一类上的属性时,JavaScript引擎开始从第一类自身中查找该属性,如果没,它会继续检查和__proto__,一直到没__proto__或者找到该属性。如果找到最后,此属性不存在时,返回undefined

五、总 结

回到第两个标识符块:

const animals = {

name: “animal”,

type: “object”,

}

animals.hasOwnProperty(“name”)// true

到现在你应该清楚了,对吧?

当你的animals在控制台打印的时候,您会注意到它有两个__proto__指向Object的蓝本。并且,Object的蓝本具有hasOwnProperty属性。animals继承了该属性,这使得它能使用该属性。

Object在 JavaScript 中有两个大部份第一类都能继承的蓝本。Function、String等构造函数也从Object继承了属性。

这也就是为何string.toLowerCase()也能直接使用的原因。构造函数的蓝本第一类String具有大部份这些属性,因此字符串能使用它们。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务