JS中this的指向以及call、apply的作用

這篇文章跟大家分享了JS基礎內容this指向以及call、apply的相關知識點內容，有興趣的朋友可以學習參考下。

在具體的實際應用中，this 的指向無法在函數定義時確定，而是在函數執行的時候才確定的，根據執行時的環境大致可以分為以下3種：

1、當函數作為普通函數呼叫時，this 指向全域物件

2、當函數作為物件的方法呼叫時，this 指向該物件

3、當函數作為建構器呼叫時，this 指向新建立的物件

#範例一：

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

#範例二：

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

範例三：

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

對於範例三，還有一種特殊情況，就是當建構子透過"return" 傳回的是一個物件的時候，這次運算的最終結果返回的就是這個對象，而不是新創建的對象，因此this 在這種情況下並沒有什麼用。

範例四：

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

範例五：

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

call 和apply的作用

apply 接受兩個參數，第一個參數指定了函數體內this 的指向，第二個參數是一個數組或類別數組，用來傳遞被呼叫函數的參數列表。

範例一：

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

call 傳入參數的數量是不固定的，跟apply 相同的是，第一個參數也是用來指定函數體內this 的指向，從第二個參數開始往後，每個參數依序傳入被呼叫函數。

範例二：

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

此外，大部分進階瀏覽器也實作了bind 方法，它與call 和apply 的差別在於bind 只是改變函數內部this 的指向，但不會立即執行，你需要顯示呼叫它。

範例三：模擬瀏覽器的bind 方法

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

遺失的this

在某些情況下會失去this 的指向，此時，我們就需要藉助call、apply 和bind 來改變this 的指向問題。

範例一：當"getName" 方法作為"boy" 物件的屬性呼叫時，this 指向"boy" 對象，當另一個變數引用"getName" 方法時，因為它是作為普通函數調用，所以this 指向全域物件window

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

範例二：即使在函數內部定義的函數，如果它作為普通物件調用，this 同樣指向window 物件

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

以上就是本章的全部內容，更多相關教學請訪問JavaScript影片教學！

以上是JS中this的指向以及call、apply的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！