this到底是什么
我们在学习js的过程中,相信都会在很多场景遇到this以及使用this,那么this它到底是什么呢?下面给出它的定义。
当一个函数被调用时,会创建一个活动记录(执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性,会在函数执行的过程中用到。
调用位置和调用栈
在理解 this 的绑定过程之前,首先要理解调用位置:调用位置就是函数在代码中被调用的 位置,而不是声明的位置。而调用栈就是:为了到达当前执行位置所调用的所有函数。下面让我们来在代码中体会一下调用位置和调用栈。
function baz() {
// 当前调用栈是:baz
// 因此,当前调用位置是全局作用域
console.log( "baz" );
bar(); // bar 的调用位置
}
function bar() {
// 当前调用栈是 baz -> bar
// 因此,当前调用位置在 baz 中
console.log( "bar" );
foo(); // foo的调用位置
}
function foo() {
// 当前调用栈是 baz -> bar -> foo
// 因此,当前调用位置在 bar 中
console.log( "foo" );
}
baz(); //baz 的调用位置
this的四大绑定的规则
这里只考虑非严格模式
默认绑定
即默认情况下,this是绑定到全局作用域的,
观察如下代码:
function foo() {
console.log(this.a);
}
var a = 2;
foo();
上面代码输出2,因为函数foo调用时应用了 this的默认绑定,this指向全局对象,this.a就是全局作用域中定义的a。
隐式绑定
当函数作为对象的方法调用时,函数(方法)中的this会绑定到当前对象。
观察如下代码:
var obj = {
a: 2,
foo: function() {
console.log(this.a);
}
};
obj.foo();
上述代码输出值依然为2,因为此时this绑定到了对象obj上。
隐式绑定会出现这么一个问题:隐式丢失 ,即隐式绑定的函数会丢失绑定对象,也就是它会应用默认绑定,从而把 this 绑定到全局对象。
观察如下代码:
var obj = {
a: 2,
foo: function() {
console.log(this.a);
}
};
var bar = obj.foo; // 函数别名!
var a = "global"; // a 是全局对象的属性
bar();
上述代码的输出值是global而不是2。虽然 bar 是 obj.foo 的一个引用,但是实际上,它引用的是 foo 函数本身,因此此时的 bar() 其实是一个不带任何修饰的函数调用,因此应用了默认绑定。
显式绑定
显示绑定就是使用函数的 call) 或者 apply() 来指定this绑定的对象。
观察如下代码:
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj );
上述的代码输出值为2,因为通过foo.call(obj),我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。那么此时上述代码就相当于隐式绑定例子中的第一段代码。
new 绑定
观察如下代码:
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a );
使用 new 来调用 foo 时,我们会构造一个新对象bar并把它绑定到 foo调用中的 this ,那么bar.a就是this.a,所以上述代码的输出值为2.
this绑定的优先级
现在我们已经了解了函数调用中 this 绑定的四条规则,我们需要做的就是找到函数的调用位置并判断应当应用哪条规则。但是,如果某个调用位置可以应用多条规则该怎么办?这时候就要考虑哪条规则的优先级最高了。
首先给出结论,优先级从高到低依次为:new绑定>显式绑定>隐式绑定>默认绑定。显然,默认绑定是优先级最低的,这是毋庸置疑的,下面我们通过代码来分析一下其它三个规则的优先级。
显式绑定和隐式绑定的优先级,观察如下代码:
var obj1 = {
a: 2,
foo: function() {
console.log( this.a );
}
};
var obj2 = {
a: 3,
foo: function() {
console.log( this.a );
}
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2
由上述结果可以看出显式绑定优先级更高,也就是说在判断时应当先考虑是否可以应用显式绑定。
接下来分析new绑定和隐式绑定的优先级,观察如下代码:
function foo(something) {
this.a = something;
}
var obj1 = {
foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3
var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2
console.log( bar.a ); // 4
观察最后两行代码的输出可以知道 new 绑定比隐式绑定优先级高。
最后再来分析下new 绑定和显式绑定的优先级
function foo(something) {
this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2
console.log( baz.a ); // 3
观察上述代码,bar 被bind函数绑定到 obj1 上,但是 new bar(3) 并没有像我们预计的那样把 obj1.a 修改为 3。这里this绑定的是新建的对象baz,也就是说,当使用new时,this的指向总会被修改为新建的对象,所以new绑定的优先级比显式绑定的优先级更高。