JS內this指向使用實例詳解

這次帶給大家JS內this指向使用實例詳解，JS內this指向使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

在具體的實際應用中，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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue-element做出音樂播放器功能（附程式碼）

如何使用VueJs元件父子通訊（附程式碼）
#

以上是JS內this指向使用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！