JS中this指向函數的調用方法有哪些

JS中this指向函數的調用方法有哪些？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

初學javascript總會對this指向感到疑惑，想要深入學習javascript，必須先理清楚和this相關的幾個概念。javascript中this總是指向一個對象，但具體指向誰是在運行時根據函數執行環境動態綁定的，而并非函數被聲明時的環境。除去不常用的with和eval的情況，具體到實際應用中，this指向大致可以分為以下4種。

作為對象的方法調用

當函數作為對象的方法被調用時，this指向該對象：

var person = {
  name: 'twy',
  getName: function() {
    console.info(this === person);  // 輸出true
    console.info(this.name);     // 輸出twy
  }
}
person.getName();

作為普通函數調用

當函數作為普通的函數被調用時，非嚴格模式下this指向全局對象：

function getName(){
  // 非嚴格模式
  console.info(this === window); // 瀏覽器環境下輸出true
}
getName();

嚴格模式下this為undefined：

function getName(){
  // 嚴格模式
  "use strict"
  console.info(this === window); // 輸出false
}
getName();

構造器調用

當new一個對象時，構造器里的this指向new出來的這個對象：

function person(){
  // 構造函數
  this.color = 'white';
}
var boy = new person();
console.info(boy.color);  // 輸出white

call或apply調用

用 Function.prototype.apply 或 Function.prototype.call 可以動態改變傳入函數的this指向：

// 聲明一個父親對象，getName方法返回父親的名字
var father = {
  name: 'twy',
  getName: function(){
    return this.name;
  }
}
// 生命一個兒子對象，但是沒有返回名字的功能
var child = {
  name: 'chy'
}
console.info(father.getName()); // 輸出twy

// 使用call或apply將father.getName函數里this指向child
console.info(father.getName.call(child)); // 輸出chy
console.info(father.getName.apply(child)); // 輸出chy

感謝各位的閱讀！看完上述內容，你們對JS中this指向函數的調用方法有哪些大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。