JavaScript中this关键字的几点说明:
****1.JavaScript中的this关键字绑定的内容跟函数无关,跟函数执行的环境有关****
****2.函数的this绑定的内容可以通过bind,apply和call函数来动态进行修改****
****3.闭包可以消除不必要的this动态绑定来提高代码的可读性****
1.this绑定内容与函数无关,与执行环境有关
一个函数在调用时会创建一个活动对象,活动对象还包含一个this变量。
var name = "javascript";
var func = function(){
console.log(this.name);
}
func();
当调用func函数时,js引擎会创建一个执行上下文,同时还会创建一个作用域链,此作用域链为:
[[scope chain]] = [
{
Active Object{
arguments:...
this:[global Object],
...
},
global Object:{
name:'javascript'
...
}
}
]
所以在执行console.log(this.name)的时候this绑定的是全局对象,而之前定义的name就是属于全局变量。
再看下面的例子:
var name = "jack";
var sex = "man"
var func = function(name){
this.name = name;
}
func.prototype.print = function(){
console.log(this.name);
console.log(this.sex);
console.log(sex);
}
var obj = new func("hello");
obj.print();//结果是hello undefined man
当执行obj对象的print函数的时候,执行上下文的作用域链是这样的:
[[scope chain]] = [
{
Active Object{
arguments:...
this:obj,
...
},
global Object{
name:'jack',
sex:'man',
...
}
}
]
从这个作用域链可以很清楚地看出上面代码输出的结果。
2.this绑定的内容可以被动态修改
把上面的例子稍作修改,如下:
var name = "jack";
var sex = "man";
var func = function(name){
this.name = name;
}
func.prototype.print = function(){
console.log(this.name);
console.log(this.sex);
console.log(sex);
}.bind(this);
var obj = new func("hello");
obj.print();//结果是jack man man
通过给func.prototype.print函数添加了bind的调用,输出的结果就不一样,此时的this绑定的是global对象了。
再把上面的代码修改,如下:
var name = "jack";
var sex = "man";
var func = function(name){
this.name = name;
}
func.prototype.print = function(){
console.log(this.name);
console.log(this.sex);
console.log(sex);
}
var obj = new func("hello");
func.prototype.print.call(obj,"hello");//结果是hello undefined man
这个输出结果跟直接调用obj.print是一样的。但是如果改成:
var obj = new func("hello");
func.prototype.print.call(this,"hello");
//下面的window和this是等价的
//func.prototype.print.call(window,"hello");
那么输出的结果是jack man man
使用bind可以显式指定函数使用时的this绑定,而使用call可以指定this对象的指向,另外还可以使用apply来修改this的绑定。call和apply的区别就是call后面传参使用的是逗号分隔的参数,而apply传递的是一个参数数组。
3.闭包消除this动态绑定提高代码可读性
假设要把一个外部环境的this变量传递到一个内部函数去使用,一般会这么做:
var a = 10;
var obj = {
a:1;
b:2;
sum:function(){
var addA = function(a){
return this.a+a;
}.bind(this);
return addA(this.b);
}
}
console.log(obj.sum());//结果是3
在声明addA的时候使用了bind(this),那么addA函数内部的this.a指向的是obj对象的a变量。如果不用bind,this默认指向的是window对象,那么输出的结果就是12了。一般情况下(考虑到sum函数里面的3个this)通常会添加一个self或者that局部变量来增加代码的可读性,同时也不用手动去调用bind函数。
var a = 10;
var obj = {
a:1,
b:2,
sum:function(){
var self = this;
var addA = function(a){
return self.a + a;
};
return addA(this.b);
}
}
console.log(obj.sum());//结果是3
这里面的self变量利用了闭包的特性,同时让代码更加具有可读性,也消除了不必要的bind(this)调用。