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

感謝各位的閱讀！關于“JS中this指向以及call、apply有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！