js this的几种常见解决方案

2019独角兽企业重金招聘Python工程师标准>>>

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的对象。

转载于:https://my.oschina.net/u/215677/blog/1506248