JavaScript中的this,刚接触javascript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心;随着自己对javascript一步步深入了解,突然恍然大悟,原来它真的很重要!所以,自己花费了大约2周的时间去查贴、翻阅之前读的书籍,将this的全貌展示如下。
一、this是什么–基于调用位置的上下文;调用位置不同,this值不同。
大家都javascript中this存在两个误解:
(1)this指向函数自身
(2)this指向函数的作用域
作用域无法通过javascript代码访问,它存在于javascript引擎内部。每当把this和词法作用域的查找混合使用时,一定要提醒自己,这是无法实现的!
this是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用位置(也就是函数的调用方式)!
示例:
var foo = "golbal foo";
var myObj = {foo : 'myObj foo'};
var say = function(){
console.log(this.foo);
}
myObj.say = say;
myObj.say(); //结果:myObj foo
say(); //结果:golbal foo
二、为什么使用this
var me = {
name: "fenfei"
};
//不使用this,调用
function speak(name){
console.log("Hello, I'm "+ name);
}
speak(me.name); //Hello, I'm fenfei
//使用this,调用
function speak(){
console.log("Hello, I'm "+ this.name);
}
speak.call(me); //Hello, I'm fenfei
this提供了一种更优雅的方式来隐式“传递”对象引用,因此可以将API设计得更加简洁并易于复用。
三. this的四大绑定规则
1. 默认绑定–函数调用类型:独立函数调用,this指向全局对象。
var a = "foo";
function foo(){
console.log(this.a);
}
foo(); // "foo"
在严格模式下,全局对象将无法使用默认绑定,因此this会绑定到undefined。
var a = "foo";
function foo(){
"use strict";
console.log(this.a);
}
foo(); // TypeError:this is undefined
2 隐式绑定–调用位置是否有上下文对象,或者说被某个对象拥有或者包含
function foo(){
console.log(this.a);
}
var obj1 = {
a : 2,
foo : foo
}
var obj2 = {
a : 1,
obj1 : obj1
}
obj2.obj1.foo(); //结果:2
当foo()被调用时,它的落脚点指向obj1对象,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
对象属性引用链中只有最顶层或者说最后一次层会影响调用位置。
注意:隐式丢失
常见的this绑定问题就是“隐式绑定”的函数会丢失绑定对象,也就是“默认绑定”,从而把this绑定到全局对象(严格模式下为undefined)。
var a = "foo";
function foo(){
console.log(this.a);
}
var obj = {
a : 2,
foo : foo
}
var bar = obj.foo;
bar(); //"foo"
虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是不带任何修饰的函数调用,因此应用了默认绑定。
var a = "foo";
function foo(){
console.log(this.a);
}
function doFoo(fn){ //var fn = obj.foo
fn();
}
var obj = {
a : 2,
foo : foo
}
doFoo(obj.foo); //"foo"
setTimeout(obj.foo, 100); //"foo"
参数传递其实就是一种隐式赋值,因此传入函数式会被隐式赋值(LHS)
3 显示绑定
(1)call、apply
(2)硬绑定
function foo(){
console.log(this.a);
}
var obj = { a:2 };
var bar = function(){
foo.call(obj);
};
bar(); //2
setTimeout( bar, 1000); //2
bar.call( window ); //2
创建了函数bar(),在其内部手动调用了foo.call(obj),因此强制把foo的this绑定到了obj上。无论之后如何调用函数bar,总会手动在obj上调用foo。这种显示的强制绑定,称为“硬绑定”。
4 new绑定
new调用函数会自动执行下面操作:
(1)创建(或者说构造)一个全新的对象;
(2)这个新对象会被执行[[原型]]连接;
(3)这个新对象会绑定到函数调用的this;
(4)如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
四、优先级
了解了函数调用中this绑定的四条规则,需要做的就是找到函数的调用位置并判断对应哪条规则。
1. 函数是否是new绑定?如果是,this绑定的是新创建的对象。
var bar = new Foo();
2.函数是否通过call、apply显示绑定或硬绑定?如果是,this绑定的是指定的对象。
var bar = foo.call(obj);
3.函数是否在某个上下文对象中隐式调用?如果是,this绑定的是那个上下文对象。
var bar = obj.foo();
4.上述全不是,则使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到全局window对象。
var bar = foo();
五、绑定this注意点
1. 忽略this
把null或undefined作为this的绑定对象传入call、apply、bind,调用时会被忽略,实际应用的是默认绑定规则!
function foo(){
console.log(this.a);
}
var a = 1;
foo.call(null, 2); //1
foo.apply(undefined, [3]); //1
2. 间接引用
function foo(){
console.log(this.a);
}
var a = 2;
var o = { a : 3,foo : foo};
var p = { a : 4};
o.foo(); //3
(p.foo = o.foo)(); //2 间接引用
var pfoo = o.foo;
pfoo(); //2 隐式丢失
注意:同上述“隐式丢失”结果一样,但是过程不太一样,区分!!
3. ES6箭头函数
箭头函数不使用this的四种标准规则,而是根据外层(函数或者全局)作用域来决定this。
箭头函数的绑定无法被修改。常用于回调函数中,如事件处理器或定时器。和ES6之前代码中的this = self机制一样。
function foo(){
setTimeout(()=>{
console.log(this.a);
},100);
}
var obj = { a : 2};
foo.call(obj);
等价于:
function foo(){
var self = this;
setTimeout(function(){
console.log(self.a);
},100);
}
var obj = { a : 2};
foo.call(obj);


