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