JS裡的this

GJ504b發表於2024-11-01
JS

用來訪問物件的this

不可靠的外部變數名訪問

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // "user" 外部變數名
  }

};
user.sayHi();  // TypeError: Cannot read property 'name' of null

如果我們決定將 user 複製給另一個變數，例如 admin = user，並賦另外的值給 user，那麼它將訪問到錯誤的物件。

不受限制的this

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // "this" 指的是“當前的物件”
    alert(this.name);
  }

};

user.sayHi(); // John

在 JavaScript 中，this 關鍵字與其他大多數程式語言中的不同。JavaScript 中的 this 可以用於任何函式，即使它不是物件的方法。
this 的值是在程式碼執行時計算出來的，它取決於程式碼上下文。

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}
user.f = sayHi;// 在兩個物件中使用相同的函式
admin.f = sayHi;// 在兩個物件中使用相同的函式
user.f(); // John（this == user）
admin.f(); // Admin（this == admin）

admin['f'](); // Admin（使用點符號或方括號語法來訪問這個方法，都沒有關係。)

在沒有物件的情況下呼叫：this == undefined
我們甚至可以在沒有物件的情況下呼叫函式：

function sayHi() {
  alert(this);
}

sayHi(); // undefined

在 JavaScript 中，this 是“自由”的，它的值是在呼叫時計算出來的，它的值並不取決於方法宣告的位置，而是取決於在“點符號前”的是什麼物件。

特別的箭頭函式 = () =>

箭頭函式有些特別：它們沒有自己的 this。如果我們在這樣的函式中引用 this，this 值取決於外部“正常的”函式。
舉個例子，這裡的 arrow() 使用的 this 來自於外部的 user.sayHi() 方法：

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya

補充

  • this是被作為函式呼叫的，而不是透過點符號被作為方法呼叫。
  • 設定 this 的規則不考慮物件定義。只有呼叫那一刻才重要。
let calculator = {
    read(){
        this.a = +prompt('a?');//必須使用this
        this.b = +prompt('b?');//輸入
    },
    sum(){
        return this.a + this.b;
    },
    mul(){
        return this.a * this.b;
    },
  };
  
  calculator.read();
  alert( calculator.sum() );
  alert( calculator.mul() );
  • 鏈式呼叫[return this;]
let ladder = {
    step: 0,
    up() {
      this.step++;
      return this;//每次呼叫後返回這個物件本身。
    },
    down() {
      this.step--;
      return this;

    },
    showStep: function() { // 顯示當前的 step
      alert( this.step );
      return this;

    }
  };
  ladder
    .up()//1
    .up()//2
    .down()//1
    .showStep()//1
    .down()//0
    .showStep();//0

是下面的簡化

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // 顯示當前的 step
    alert( this.step );
  }
};
ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1
ladder.down();
ladder.showStep(); // 0

var log = console.log.bind(console)

建立一個全域性變數 log，它是一個函式，指向 console.log 方法，並且繫結了 console 物件作為它的 this 值。

在JavaScript中，bind 方法是一個函式原型方法，它用於建立一個新的函式，這個新函式的 this 關鍵字被繫結到 bind 方法呼叫時傳入的第一個引數。在這個例子中，bind 方法被用來繫結 console.log 函式的 this 值到 console 物件。

這樣，無論你在哪裡呼叫 log 函式，它都會像 console.log 一樣工作，而不需要擔心 this 的值。這意味著你可以直接使用 log 來列印資訊，而不需要每次都寫 console.log。

相關文章