????? 個(gè)人主頁：《愛蹦跶的大A阿》

??當(dāng)前正在更新專欄：《VUE》?、《JavaScript保姆級教程》、《krpano》

??

目錄

? 前言

? 正文

第一節(jié):構(gòu)造函數(shù)

第二節(jié):new操作符

第三節(jié):實(shí)例與原型

? 結(jié)語

?

? 前言

????????JavaScript中的構(gòu)造函數(shù)是一種特殊的函數(shù),用于生成對象。它們通常以大寫字母開頭,可以通過new操作符來調(diào)用。

????????new操作符在調(diào)用構(gòu)造函數(shù)時(shí)會進(jìn)行以下操作:

1. 創(chuàng)建一個(gè)空的JavaScript對象
2. 將這個(gè)空對象的__proto__屬性鏈接到構(gòu)造函數(shù)的prototype屬性,從而使這個(gè)空對象繼承構(gòu)造函數(shù)的prototype屬性中的方法和屬性
3. 將構(gòu)造函數(shù)內(nèi)部的this綁定到這個(gè)空對象
4. 如果構(gòu)造函數(shù)沒有返回對象,則將這個(gè)空對象作為new表達(dá)式的結(jié)果返回

舉個(gè)例子:

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

const person = new Person("John");

person.sayName(); // 輸出 "John"

????????這里調(diào)用new Person("John")時(shí):

1. 創(chuàng)建了一個(gè)空對象person
2. person.proto?鏈接到了 Person.prototype
3. this在Person函數(shù)內(nèi)部指向了person
4. 最后返回了person對象

????????所以person對象就可以調(diào)用繼承的sayName方法。

????????需要注意的是,如果構(gòu)造函數(shù)返回了一個(gè)對象,那么new表達(dá)式會直接返回這個(gè)對象,而不是創(chuàng)建的空對象:

function Person(name) {
  this.name = name;
  
  return { 
    name: name
  };
}

const person = new Person("John");

console.log(person.name); // 輸出 "John"

?這里構(gòu)造函數(shù)返回了一個(gè)對象,new表達(dá)式直接將這個(gè)對象返回了,而不是內(nèi)部創(chuàng)建的空對象。

?

? 正文

第一節(jié):構(gòu)造函數(shù)

1. 構(gòu)造函數(shù)是一種特殊的函數(shù),主要用途是初始化新創(chuàng)建的對象。
2. 構(gòu)造函數(shù)名的第一個(gè)字母要大寫,以區(qū)別于普通函數(shù)。
3. 構(gòu)造函數(shù)可以接受參數(shù),用于向新對象傳遞初始化值。
4. 構(gòu)造函數(shù)內(nèi)部使用this關(guān)鍵字來引用新創(chuàng)建的對象。
5. 構(gòu)造函數(shù)不需要return來返回值,通常會省略return語句。
6. 如果return一個(gè)對象,則該對象會覆蓋內(nèi)部創(chuàng)建的新對象,作為構(gòu)造函數(shù)的返回值。
7. 構(gòu)造函數(shù)可以在原型對象上定義方法,由所有實(shí)例共享使用。

// 構(gòu)造函數(shù)定義
function Person(name, age) {
  this.name = name; 
  this.age = age;
}

// 調(diào)用構(gòu)造函數(shù)
const person = new Person('Jack', 18);

第二節(jié):new操作符

• new是一個(gè)操作符,用來在調(diào)用函數(shù)時(shí)生成一個(gè)新對象。
• 調(diào)用new時(shí)會進(jìn)行以下操作:

1. 創(chuàng)建一個(gè)空對象,對象原型鏈接到構(gòu)造函數(shù)的原型
2. 綁定this到新對象,執(zhí)行構(gòu)造函數(shù)代碼
3. 如果構(gòu)造函數(shù)沒有返回對象,則返回新對象

• new調(diào)用的主要作用:

1. 創(chuàng)建新對象
2. 鏈接原型,屬性繼承
3. this綁定
4. 返回新對象

• 如果構(gòu)造函數(shù)返回了一個(gè)對象,new會直接返回該對象而不是內(nèi)部創(chuàng)建的對象。

function Person(name) {
  this.name = name;
  
  return {
    name: name
  }; 
}

const person = new Person('Jack');
console.log(person.name); // Jack

????????這么一比對,可以看出當(dāng)構(gòu)造函數(shù)返回對象時(shí),new會將那個(gè)對象返回,而不是新建的this對象。

第三節(jié):實(shí)例與原型

1. 每個(gè)實(shí)例都會從構(gòu)造函數(shù)的原型上繼承屬性和方法。
2. 原型對象可以通過Object.getPrototypeOf(obj)查看。
3. instanceof運(yùn)算符可以檢查實(shí)例與構(gòu)造函數(shù)的關(guān)系。
4. 構(gòu)造函數(shù)的原型prototype屬性指向原型對象。
5. 實(shí)例的__proto__屬性指向構(gòu)造函數(shù)的prototype。
6. 原型鏈會通過__proto__逐級查找屬性和方法。

function Person() {}

var person = new Person();

person.[[Prototype]] -> Person.prototype -> Object.prototype -> null

????????這樣可以更直觀地呈現(xiàn)原型鏈的層級關(guān)系。

????????另外,在講解構(gòu)造函數(shù)和原型關(guān)系時(shí),可以添加更明確的說明:

????????構(gòu)造函數(shù)的prototype屬性指向原型對象,原型對象包含實(shí)例共享的屬性和方法。實(shí)例通過__proto__隱式原型屬性關(guān)聯(lián)到原型對象,從而可以通過原型鏈查找屬性和方法。

? 結(jié)語

? ? ? ??通過這三個(gè)部分的講解,我們?nèi)嬖敿?xì)地剖析了JavaScript中構(gòu)造函數(shù)和new的工作原理、特性以及如何共同應(yīng)用它們實(shí)現(xiàn)面向?qū)ο缶幊?。這篇博客內(nèi)容偏理論和概念性,如果需要的話可以補(bǔ)充更多具體代碼案例進(jìn)行輔助說明。請檢查是否需要修改或補(bǔ)充解釋某些部分。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-808656.html

到了這里，關(guān)于深入解析JavaScript中構(gòu)造函數(shù)和new操作符的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！