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全局变量

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值