一 構造函數(shù)

在 JavaScript 中，構造函數(shù)（Constructor）是用于批量生成對象。雖然 ES6 引入了 class 關鍵字，但其底層邏輯依然是基于構造函數(shù)和原型鏈的。

1 什么是構造函數(shù)？

在 JS 中，構造函數(shù)本質上就是一個普通的函數(shù)，但為了區(qū)分，通常遵循以下約定：

• 首字母大寫（如 function Person() {…}）。

• 使用 new 關鍵字調用。

2 new 關鍵字背后的核心邏輯

當你使用 new 調用函數(shù)時，JS 引擎在后臺完成了四件事：

1. 創(chuàng)建一個新的空對象。

2. 將這個新對象的原型__proto__指向構造函數(shù)的 prototype 屬性。

3. 將構造函數(shù)內部的 this 綁定到這個新對象上。

4. 如果函數(shù)沒有返回其他對象，則自動返回這個新對象。

function User(name, age) {
  // 1. 這里的 this 指向新創(chuàng)建的對象
  this.name = name;
  this.age = age;
  
	//這個 sayHi 函數(shù)，是每個對象獨有的，每個對象都會在堆中創(chuàng)建一個
  this.sayHi = function() {
    console.log(`你好，我是 ${this.name}`); 
  };
  // 4. 隱式返回 this
}

// 實例化對象
const user1 = new User("張三", 25);
const user2 = new User("李四", 30);

user1.sayHi(); // 輸出: 你好，我是 張三

2.1原型方法優(yōu)化（性能關鍵）

在上面的例子中，sayHi 方法直接寫在構造函數(shù)里。這意味著每創(chuàng)建一個實例，都會在內存中復制一份該函數(shù)。
改進方法：將方法寫在 prototype上，所有實例共享同一個函數(shù)。

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

// 所有 Dog 的實例都共享這一個方法，節(jié)省內存
Dog.prototype.bark = function() {
  console.log(`${this.name} 在汪汪叫`);
};

const d1 = new Dog("大黃");
const d2 = new Dog("小白");
console.log(d1.bark === d2.bark); // true

2.2 構造函數(shù)的返回值

如果構造函數(shù)返回的是原始類型（數(shù)字、字符串等），會被忽略，依然返回 this 對象。

如果構造函數(shù)返回的是一個對象，則 new 的結果會變成那個返回的對象。

2.3 強制檢查 new 調用

如果忘記寫 new，this 會指向全局對象（瀏覽器中是 window），這會導致 Bug。 可以使用 new.target 來檢查。

new 本身并不是一個對象，它是一個運算符（Operator）（類似于 +, -, instanceof, typeof）。 運算符不是對象，因此它沒有屬性。

你可能看到的 new.target 是 JavaScript 語法中唯一的元屬性。這里的“點”號并不代表對象訪問屬性，而是一個特殊的語法結構，用來從運算符環(huán)境中提取信息。

補充：為什么叫“元屬性”？

元屬性（Meta Property）是指那些非對象屬性。除了 new.target，在較新的 JS 規(guī)范中幾乎沒有類似的結構。它存在的唯一目的就是讓函數(shù)內部能夠感知到“外部調用者”是通過什么方式來觸發(fā)我的。

function Person(name) {
  if (!new.target) {
    throw new Error("必須使用 new 關鍵字調用構造函數(shù)");
  }
  this.name = name;
}

2.3.1 new.target 返回的是什么？

new.target 是一個元屬性（Meta Property）。它不是一個普通的變量，而是專門用來檢測函數(shù)是否是通過 new 運算符調用的。

• 如果是通過 new 調用：new.target 返回該構造函數(shù)本身。

• 如果是普通函數(shù)調用（如 Person()）：new.target 返回 undefined。

它的核心作用：

1. 強制初始化：確保構造函數(shù)不會被當作普通函數(shù)誤用。

2. 在繼承中識別子類：在父類構造函數(shù)中，new.target 指向的是真正被實例化的那個類。

class Parent {
  constructor() {
    console.log("當前創(chuàng)建實例的類是:", new.target.name);
  }
}

class Child extends Parent {}

new Parent(); // 輸出: "當前創(chuàng)建實例的類是: Parent"
new Child();  // 輸出: "當前創(chuàng)建實例的類是: Child" (即便是在父類構造函數(shù)里打印)

3 ES6 Class 寫法（現(xiàn)代推薦）

ES6 的 class 只是構造函數(shù)的“語法糖”，結構更清晰：

class Animal {
  // 相當于以前的構造函數(shù)體
  constructor(species) {
    this.species = species;
  }

  // 相當于在 Animal.prototype 上定義方法
  eat() {
    console.log(`${this.species} 正在吃東西`);
  }
}

const cat = new Animal("貓");
cat.eat();

二 原型對象prototype 與 對象原型__proto__

1 什么是原型對象與對象原型？

• 所有函數(shù)都有個屬性叫 原型（prototype） ，它是一個對象，稱之為 原型對象。
• 原型對象 中有個屬性（constructor），它指回函數(shù)本身

    function Pig(name, age) {
      this.name = name
      this.age = age
    }
    
    console.log(Pig.prototype.constructor === Pig); // true

?? 關系公式：構造函數(shù).prototype.constructor === 構造函數(shù)

• 所有對象 都有個屬性（__proto__）,它也是一個對象，并且指向的就是它構造函數(shù)的 原型對象

    function Pig(name, age) {
      this.name = name
      this.age = age
    }

    const peiqi = new Pig("peiqi", 18)
    console.log(peiqi.__proto === peiqi.prototype); // true

?? 關系公式： 實例.__proto__ === 構造函數(shù).prototype

2 為什么設計原型？有什么好處？

JavaScript 最初被設計為一種輕量級的腳本語言，沒有傳統(tǒng)類的概念。

• 節(jié)省內存：如果沒有原型，每個實例都要在內存中存儲一份相同的方法（如 sayHello）。有了原型，方法只需在原型對象上存一份，所有實例共用。

• 數(shù)據(jù)共享與繼承：方便實現(xiàn)屬性和方法的繼承，修改原型對象，所有實例會立即同步更新。

3 什么是原型鏈？

原型對象本身也是一個對象，它也有自己的對象原型（構造函數(shù).prototype.__proto__）

當你訪問一個對象的屬性時，如果對象本身沒有這個屬性，JS 引擎就會去它的 __proto__（原型對象）里找。

如果原型對象也沒有，就去原型的原型里找，直到找到 Object.prototype 為止。

這種由 __proto__ 層層鏈接形成的鏈式結構，就是原型鏈。原型鏈的終點是 null。

4 調用屬性或方法的流程

流程遵循“就近原則”：

1. 搜索自身：檢查對象實例本身是否有該屬性/方法。

2. 搜索原型：若無，順著 __proto__ 找到原型對象。

3. 搜索原型鏈：若原型對象也沒有，繼續(xù)向上查找，直到 Object.prototype。

4. 返回結果：找到則返回，直到終點還沒找到則返回 undefined（方法調用則報錯 is not a function）。

5 實例可以覆蓋原型中的屬性嗎？

可以，但這不是真正的“覆蓋”，而是“屏蔽（Shadowing）”。

如果你給實例添加了一個與原型同名的屬性，查找流程會在第一步（搜索自身）就找到并返回，從而不再去原型上找。原型的屬性依然存在，只是被“擋住”了。刪除實例上的該屬性后，原型上的屬性會重新“露出來”。

總結

到此這篇關于JavaScript構造函數(shù)與原型、原型鏈的文章就介紹到這了,更多相關JS構造函數(shù)與原型、原型鏈內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論