this关键字
this关键字是什么
this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被定义在所有函数的作用域中。但是即使是非常有经验的JavaScript开发者也很难说清它到底指向什么。
1.this被定义在所有函数的作用域中
2.this指向哪个对象不取决于this被定义在哪里,而是取决于调用的位置
//定义一个全局变量
var v = 10;
//this经常被定义在函数的作用域中
function fn(){
//this 总是要返回一个对象
console .log(this . v);
}
fn();
绑定规则
默认绑定
在一个函数体中使用this,当该函数被独立调用。可以把这条规则看作是无法应用其他规则时的默认规则。
function foo(){
console .log(this .a);
}
var a=2;
foo();//2
隐式绑定
隐式绑定的规则需要考虑的是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。
function foo(){
console .log(this.a);
}
var obj = {
a:2,
foo:foo
};
obj.foo();//2
隐式绑定丢失
隐式绑定丢失是最常见的this绑定问题,指的就是被隐式绑定的函数会丢失绑定对象,也就是说它会应用默认绑定,从而把this绑定到全局对象。
// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn(){
console.log(this.v);
}
// 定义一个对象
var obj = {
v : 200,
f : fn // 对象的f()方法指向fn()函数
}
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun();
显示绑定
显示绑定就是明确在调用时,this所绑定的对象。JavaScript中提供了apply()方法和call()方法实现,这两个方法的第一个参数接收是一个对象,会把这个对象绑定到this,接着在调用函数时指定这个this
// 定义一个全局变量
var v = 100;
// 定义一个函数
function fn(){
console.log(this.v);
}
// 定义一个对象
var obj = {
v : 200,
f : fn // 对象的f()方法指向fn()函数
}
// 定义一个全局变量,并被赋值为对象obj的f()方法
var fun = obj.f;
// 将fun作为一个函数进行调用
fun.apply(obj);
new绑定
1.创建(或者说构造)一个全新的对象
2.这个新对象会绑定到函数调用的this
3.如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
function Hero(name){
this.name = name;
}
// this取决于函数调用的位置
var hero1 = new Hero('hhh');
var hero2 = new Hero('xxx');
注意事项
1.避免多层this
2.避免数组方法中的this
3.避免回调函数中的this