JavaScript 構造函數中綁定方法：this.method = method 模式原理解析與現代替代方案

代碼場景還原

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

function changeName(newName) {
    this.name = newName;
}

// 關鍵行：將全局函數 changeName 綁定到實例方法
Person.prototype.changeName = changeName; 

// 或構造函數內綁定 (題主截圖模式)
function Person2(name) {
    this.name = name;
    this.changeName = changeName; // 每個實例都擁有獨立的函數引用
}

var myMother = new Person2("Bill Gates");
myMother.changeName("Ballmer"); // 正常調用
console.log(myMother.name); // "Ballmer"

為什麼要寫 `this.changeName = changeName`？

1. 訪問實例上下文 (`this`)：函數 `changeName` 內部使用 `this.name`。只有當它作為**對象方法**調用時 (`obj.changeName()`)，`this` 才指向該對象。若直接調用 `changeName()`，`this` 指向全局對象 (或 strict 模式下 undefined)，無法修改實例屬性。
2. 實現「實例方法」語義：將獨立函數「掛載」到實例上，使其擁有操作實例數據的能力。這是 JavaScript **原型繼承** 模擬「類方法」的核心機制之一。
3. 構造函數內綁定 vs 原型綁定：
   • 構造函數內 (`this.method = fn`)：每個實例擁有**獨立副本**，佔用更多內存，但可訪問構造函數閉包內的私有變量。
   • 原型上綁定 (`Person.prototype.method = fn`)：所有實例**共享同一函數引用**，節省內存，是標準做法。

內存模型圖解

構造函數內綁定 (this.changeName = changeName)：
Person2 實例 1  --> changeName (函數對象 A)
Person2 實例 2  --> changeName (函數對象 B)  // A === B 為 true (引用同一函數)，但各自擁有屬性槽

原型綁定 (Person.prototype.changeName = changeName)：
Person.prototype --> changeName (函數對象)
Person2 實例 1  --> __proto__ --> changeName
Person2 實例 2  --> __proto__ --> changeName  // 完全共享

現代 JavaScript 最佳實踐 (ES6+)

1. 類語法 (推薦)

class Person {
    constructor(name) {
        this.name = name;
    }
    // 定義在類體中，自動添加到原型
    changeName(newName) {
        this.name = newName;
    }
}
const p = new Person("Bill");
p.changeName("Ballmer");

2. 箭頭函數綁定 this (構造函數內實現私有/實例方法)

function Person(name) {
    this.name = name;
    // 箭頭函數捕獲構造函數調用時的 this (即新實例)
    this.changeName = (newName) => {
        this.name = newName;
    };
}
// 優點：this 永遠綁定實例，即使作為回調傳遞也不會丟失
// 缺點：每個實例創建新函數對象，無法通過原型復用

3. Object.assign / 擴展運算符混入

const personMethods = {
    changeName(newName) { this.name = newName; }
};
function Person(name) {
    this.name = name;
    Object.assign(this, personMethods); // 或 {...personMethods} 但需注意 this 綁定
}

總結

`this.changeName = changeName` 的本質是**將獨立函數作為屬性賦值給實例**，使其調用時 `this` 指向該實例，從而能讀寫實例屬性。現代開發首選 **ES6 Class** 語法，自動處理原型掛載與 `this` 綁定，代碼更清晰、性能更優。