js this的幾種常看法決方案

js this做用域筆記

預備知識

this(也稱作上下文）在絕大多數狀況下，函數的調用方式決定了this的值。this不能在執行期間被賦值，而且在每次函數被調用時this的值也可能會不一樣. 能夠經過下面的例子來進行理解。

function foo() {
    console.log(this);
}
//普通的函數調用
foo();//這裏this綁定在window對象當中
//作爲對象方法
var obj={bar:foo}
obj.bar();//這裏的this綁定在obj對象當中
//構造函數
new foo();//this綁定在prototype繼承的對象當中。

如何使用this

不使用this

咱們在執行回調的時候會自動將this綁定到回調的函數當中，若是你想繼續引用原有的this，你能夠建立一個self將其指定this，在回調的函數當中經過self來訪問原有的this對象。

function MyConstructor(data,transport){
    this.data=data;
    var self=this;
    transport.on('data',function(){
    console.log(self.data);
    });
}

**self是一個正常的變量，可以正確的支持詞法的範圍規則。經過這種方式的好處是僅能夠訪問外部的this對象，也能夠正常訪問回調函數的做用域。

顯示設置回調函數的this

this看似是程序自動進行綁定的，其實在js當中提供了兩個方法call()和bind()來顯示的綁定this的做用域.

function MyConstructor(data,transport){
    this.data=data;
    var boundFunction=(function(){
        alert(this.data);
    }).bind(this);
    transportion('data',boundFunction);
}

經過上面的代碼咱們將this綁定在MyConstructor的做用域下，經過alert可以正常的打印data的數據。

經過es6的箭頭函數

一個箭頭函數表達式的語法比一個函數表達式更短，而且不綁定本身的 this，arguments，super或 new.target。

function MyConstructor(data,transport){
    this.data=data;
    transport.on('data',()=>alert(this.data));
}

高階函數的this綁定

let array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])

上面的arr.map的函數說明，其中thisArg可選的。執行 callback 函數時 使用的this 值。

var arr=[1,2,3];
var obj={multiplier:42};
var new_arr = arr.map(function(v){
    return v*this.multiplier;
},obj);

上面的代碼塊咱們將arr.map的this綁定到obj的對象當中，在map的回調函數能夠經過this直接訪問到obj的對象。