十分钟理解javascript中的this对象

最近在参加的几场面试中都涉及到了对于js中this对象的理解，那么怎样去理解this呢？这里针对不同的场景通过代码来帮助我们理解好this。

this到底指向什么？

this指向什么呢？一言以蔽之：

this最终指向的是那个调用它的对象

下面通过代码来分析this的指向问题。

默认绑定全局变量window

var a = 'hello';function foo() {console.log( this.a );
}foo(); // hello

这里调用foo()就相当于window.foo()。因此this引用的是window。也就是下面这句话：

如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window

隐式绑定

function foo() {console.log( this.a );
}var obj = {a: 'hello',foo: foo
};obj.foo(); // hello

这里调用foo的是obj，因此this指向的是obj对象。

再来看一个例子：

function foo() {console.log( this.a );
}
var obj2 = {a: 'hello',foo: foo
};
var obj1 = {a: 'world',obj2: obj2
};
obj1.obj2.foo(); // hello

这个例子可能看起来比较晕，那么this指向的是obj1还是obj2呢？其实关于this的引用还有一句话要记住：

如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

理解了上面两个例子之后再看一种情况：

function foo() {console.log( this.a );
}var obj = {a: 'hello',foo: foo
};var bar = obj.foo; // 函数引用传递
var a = "Global";
bar(); // "Global"

这里this指向的是window对象，想要理解这点还需要记住一句话：

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的

上面的例子中虽然函数foo是被对象obj所引用，但是在将foo赋值给变量bar的时候并没有执行，最终foo是由bar来执行的，而bar指向的是window对象。

显示绑定

通过bind()，apply()，call()函数可以显示的绑定this作用域，它接收的第一个参数即是上下文对象并将其赋给this。

function foo() {console.log( this.a );
}var obj = {a: 'hello'
};foo.call(obj); // hello

如果我们传递第一个值为简单值，那么后台会自动转换为对应的封装对象。如果传递为null，那么结果就是在绑定默认全局变量。看下面的例子：

function foo() {console.log( this.a );
}var obj = {a: 2
};var a = 'hello';
foo.call( null); // hello

new新对象绑定

如果是一个构造函数，那么用new来调用，那么绑定的将是新创建的对象。如：

function foo(a) {this.a = a;
}var bar = new foo('hello');
console.log(bar.a);// hello

this在闭包里的简单应用

如果已经理解了上面this的基本用法，那么我们来看一个this在闭包的指向问题：

var flag = "window";
var object = {flag : "local",sayFlag: function(){//返回一个匿名函数return function(){console.log(this.flag);}}
}
object.sayFlag()(); //window

这里的this是在一个匿名函数里面调用的，object.sayFlag()函数返回的是一个匿名函数，也就是说this应该指向的是匿名函数的执行环境，那么匿名函数的执行环境到底应该是什么呢？

匿名函数的执行环境具有全局性，this通常指向window

那么如何访问“local呢”？

var flag = "window";
var object = {flag : "local",sayFlag: function(){var that = this; //此处的this是object的引用//返回一个匿名函数return function(){alert(that.flag);}}
}
object.sayFlag()(); //local

this在es6 Class中的指向

在类的方法中this默认指向的是类的实例，但是如果单独使用这个方法，就会报错，比如：

class Printer{printName(name = 'there') {this.print(`Hello ${name}`);}print(text) {console.log(text);}
}const printer= new Printer();
const { printName } = printer;
printName(); // 报错

单独执行printName的时候，this指向的是该方法运行时的上下文环境，解决这个问题的方法有如下几个：

使用箭头函数

class Printer{printName(name = 'there') {this.print = ()=>{this.print(`Hello ${name}`);}}print(text) {console.log(text);}
}
const printer= new Printer();
const { printName } = printer;
printName(); // 报错

使用bind方法

class Printer{constructor() {this.printName = this.printName.bind(this);}printName(name = 'there') {this.print(`Hello ${name}`);}print(text) {console.log(text);}
}const printer= new Printer();
const { printName } = printer;
printName(); // 报错

将this传给一个变量

class Printer{printName(name = 'there') {const self = this;self.print(`Hello ${name}`);}print(text) {console.log(text);}
}const printer= new Printer();
const { printName } = printer;
printName();

参考链接：
https://www.cnblogs.com/pssp/p/5216085.html

下面的是我的公众号二维码图片，欢迎关注。