JavaScript中this关键字的隐性绑定与解决方案

JavaScript this关键字隐性绑定解析

JavaScript是目前最流行的跨平台编程语言之一。在长期进行前端开发的过程中，笔者意识到自己对这门语言的基础掌握尚不牢固，存在舍本逐末的情况。因此，趁着空闲时间，决定系统性地补充这些遗漏的基础知识。

this的隐性绑定

起初，这一概念令人困惑，初次接触时难以理解。然而，在相似的场景下，却能通过类似的方法解决相同的问题。为了便于日后查阅，笔者尝试梳理其中的知识脉络。

这被视为JavaScript语言设计上的一个特性（或称为错误），且似乎不可避免，因为函数、数组等本质上都是对象。以下引用《JavaScript: The Good Parts》中的示例进行说明。

function add (a,b) {return a+b}
var sum = add (3,4);
console.log(sum); //sum = 7

此时sum的结果为7。

> typeof add
> 'number'

在此处可以看到，add的类型被判定为数值。

以此模式调用函数时，this会被绑定到全局变量。也就是说，在当前环境下，我们可以这样调用this

this.add(3,4)

这就是this的隐性绑定，而this会以不同的方式被绑定。

var hello = function (){
return "Hello, " + this.name;
};
name = 'this';
console.log(hello());

这时我们就会得到Hello,this。而当

var hello = function (){
return "Hello, " + this.name;
};
var user = {
hello : hello,
name : 'phodal'，
};
console.log(user.hello());

这时user中的hello便指向了hello函数，而这在我们的理解中，这怎么可能，所以是个Bug。

如果我们在这个方法中定义一个变量并给它赋值this,那么内部函数就可以通过那个变量访问到this。

var that = this

于是当情况稍微复杂一点的时候我们就需要用到:

vat that = this;

tips:

1.this变量的作用域总是由其最近的封闭函数所确定。 2.使用一个局部变量(如me,self,that)让this绑定对于内部是可用的。

通过局部变量解决this指向问题

一个简单的例子:

var M = function(){
this.name = "M";
};
var MM = function(){
 z = new M();
 this.name = "MM";
z.printName = function(){
 console.log(this.name);
 };
 return z.printName();
};
var mm = new MM;

这时的this指向的是M函数，而由MM自身。如果我们将M中的this去掉，那么返回的就是一个undefined。 于是我们就创建一个当前this作用域的别名，如that或者self等等:

var MM = function(){
z = new M();
this.name = "MM";
var self = this;
z.printName = function(){
console.log(self.name);
    };
return z.printName();
};

ES5 bind方法的应用

这样就能返回一个MM了。除此之外，在ES5中可以用回调函数的bind方法。

var MM = function(){
z = new M();
this.name = "MM";
z.printName = function(){
console.log(this.name);
}.bind(this);
return z.printName();
};

bind可以将方法绑定到接收者。

其他

又一个hello,world

在一次偶然的机会中遇到print('Hello')('World'),然后输出了'Hello, World'。

所谓的高阶函数，看上去似乎很有用，有兴趣可以看看下一篇。