前端知識(shí)點(diǎn)—構(gòu)造函數(shù)(Javascript)

在我的文章 “對(duì)象” 里我提到了構(gòu)造函數(shù) , 前端知識(shí)點(diǎn)—Javascript的對(duì)象(Javascript)
因?yàn)閐ay14講到了"函數(shù)" , 所以另起一篇文章. 來(lái)講構(gòu)造函數(shù) , 這個(gè)是屬于比較重要的部分

構(gòu)造函數(shù)是一種用于創(chuàng)建和初始化對(duì)象的特殊函數(shù)。一般與new關(guān)鍵字一起使用，來(lái)創(chuàng)建具有相同結(jié)構(gòu)和行為的多個(gè)對(duì)象。是屬于復(fù)雜數(shù)據(jù)類(lèi)型 , 前面的string , number這些屬于簡(jiǎn)單數(shù)據(jù)類(lèi)型 , 注意把基礎(chǔ)知識(shí)捋順 , 面試會(huì)考的 .

1. 定義構(gòu)造函數(shù)

1 構(gòu)造函數(shù)作用是初始化對(duì)象。定義對(duì)象的方法。
2 構(gòu)造函數(shù)的名字通常以大寫(xiě)字母開(kāi)頭，以便與普通函數(shù)區(qū)分。普通函數(shù)是小駝峰命名法 .
3 默認(rèn)返回新創(chuàng)建的對(duì)象（除非顯式返回另一個(gè)對(duì)象）

function Person(name, age) {this.name = name;  // 為實(shí)例添加屬性this.age = age;this.sayHello = function() {console.log(`My name is ${this.name} , I'm ${this.age} years old now'.`);};
}

里面的this是什么東西呢? 看我另一篇文章 , 我把成塊的知識(shí)點(diǎn)寫(xiě)成專(zhuān)欄方便你們查看前端知識(shí)點(diǎn)—this幾種用法

2. 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象

要使用構(gòu)造函數(shù)創(chuàng)建對(duì)象，需要使用new關(guān)鍵字：

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);person1.sayHello();  // 輸出: Hello, my name is Alice.
person2.sayHello();  // 輸出: Hello, my name is Bob.

例子

function Person(name, age) {this.name = name; // 為新對(duì)象添加 name 屬性this.age = age;   // 為新對(duì)象添加 age 屬性this.greet = function() { // 定義一個(gè)方法console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);};
}// 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);person1.greet(); // Hi, my name is Alice and I'm 25 years old.
person2.greet(); // Hi, my name is Bob and I'm 30 years old.

3. 工作原理

創(chuàng)建新對(duì)象：new關(guān)鍵字創(chuàng)建一個(gè)空對(duì)象。
綁定this：新對(duì)象的上下文被綁定到構(gòu)造函數(shù)中的this。
設(shè)置原型：新對(duì)象的原型被設(shè)置為構(gòu)造函數(shù)的prototype屬性。
返回對(duì)象：構(gòu)造函數(shù)返回這個(gè)新對(duì)象（如果沒(méi)有顯式返回其他對(duì)象）。

4. 構(gòu)造函數(shù)與原型

為了節(jié)省內(nèi)存，可以將方法添加到構(gòu)造函數(shù)的prototype上，而不是每次創(chuàng)建對(duì)象時(shí)都重新定義方法。

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}.`);
};const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);console.log(person1.sayHello === person2.sayHello); // true

5. 類(lèi)的語(yǔ)法糖

從ES6開(kāi)始，JavaScript引入了class語(yǔ)法，它本質(zhì)上是對(duì)構(gòu)造函數(shù)和原型的封裝，提供了更清晰的語(yǔ)法。

class Person {constructor(name, age) {this.name = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${this.name}.`);}
}const person1 = new Person("Alice", 25);
person1.sayHello();  // 輸出: Hello, my name is Alice.

6. 注意事項(xiàng)

如果構(gòu)造函數(shù)中顯式返回一個(gè)對(duì)象，new將返回該對(duì)象，而不是this。
如果返回的是一個(gè)非對(duì)象值，new仍會(huì)返回this。

function Person(name) {this.name = name;return { greeting: "Hi" };  // 返回這個(gè)對(duì)象
}const person = new Person("Alice");
console.log(person);  // 輸出: { greeting: "Hi" }

總結(jié)
構(gòu)造函數(shù)是JavaScript中創(chuàng)建和初始化對(duì)象的一種重要方式。隨著ES6的引入，class語(yǔ)法讓創(chuàng)建對(duì)象和定義方法變得更加直觀，但構(gòu)造函數(shù)的底層原理仍然是JavaScript對(duì)象創(chuàng)建的核心。