JavaScript 中的this用法

JavaScript中的this

面试的时候面试官让我解释一下javascript中的this，我直接蒙逼了，现在我得好好整理一下关于javascript中得this

全局环境中的this

在浏览器中 console.log(this) 输出结果为window
而在node环境下console.log(this) 输出结果为global

总结：在全局环境下，this指的是全局对象

函数中执行的this

（1）作为函数调用（this指向全局对象）

先来看第一个Demo

var x = 1;

function test(){
alert(this.x);
}
test();

因为test()被作为全局函数调用，所以this指的是全局对象，this.x = 1 ,即输出结果为1

再来看另一个Demo

var x = 1;

function test(){
this.x = 2;
}
alert(this.x);
test();
alert(this.x);

因为在调用test()函数之前，this指的是全局对象，所以输出了1，当调用test（）的时候，this也指向全局对象，用this.x将全局的x值改为2，所以再一次alert（）时输出2

(2)作为对象调用（this指向该对象）

看Demo

var x = 2；

function test (){
alert(this.x);
}

var object = {};

object.x = 1;
object.m = test;
object.m();

因为test（）函数是作为object的一个对象的属性值调用的，所以this指向的是该对象，所以结果是1

(3)作为构造函数调用

看Demo

var x = 2;

function test(){
this.x = 1;
}
var object = new test();

alert(object.x);
alert(this.x);

因为通过构造函数会新生成一个实例，所以this就指向的是这个实例，所以第一次输出的是1，因为第二次alert的时候this指向的是全局的this，所以输出的是2

(4)作为apply 或者 call 的参数调用

apply和call能够强制改变函数执行时的当前对象，让this指向其他对象。因为apply和call较为类似，所以我们以apply为例：

var name = “window”;

var someone = {
name: “Bob”,
showName: function(){
alert(this.name);
}
};

var other = {
name: “Tom”
};

someone.showName.apply(); //window
someone.showName.apply(other); //Tom

因为apply（）方法用于改变函数执行时的当前对象，当括号内无参数时，表明新的对象为全局对象，所以输出为window，当括号里面有参数时，this指向第一个参数所指的对象，所以this指向了other这个对象，所以输出结果为Tom

(5)严格模式下使用this

看Demo

function test(){
‘use strict’;
alert(this);
}
test();

如果按照第一种作为函数调用的话应该输出的是window，可是结果却是undefined，因为在严格模式下，需要消除js的一些不严谨的行为，所以会输出undefined。

(6)箭头函数中的this

箭头函数中的this指的是他父级作用域中的this

(7)setTimeout中的this一直指向window全局变量