【JS】this机制

this指向什么?this是在函数被执行时,指向调用它的对象。
用代码来理解这句话:

var a = 2
function fn() {
  console.log(this.a);
}

fn()			// 2

这种情况下,函数fn是直接加在全局对象上,this指向全局对象(这里是window),变量a也是window的属性,因此打印出来是2



var a = 2

var o = {
  a: 4,
  fn: function() {
    console.log(this.a);
  }
}

o.fn()			// 4

这一次函数的调用是发生在对象o上面的,存在上下文对象的情况,因此,this指向的对象o里的变量a,打印结果是4。


var a = 2

var o = {
  a: 4,
  fn: function() {
    console.log(this.a);
  }
}

var f = o.fn;
f()			// 2

这里f保存了o对象的fn函数,调用还是在全局环境中,因此打印结果是2。


如果我们想改变调用函数的那个对象,该怎么改变?我们可以使用call或者apply方法。

var a = 2

function fn() {
  console.log(this.a);
}

var o = {
  a: 4
}

fn.call(o);				// 4

这一次我们在全局环境中调用fn函数,我们显示的改变了调用他的对象,因此打印结果是对象o里的变量a的值。


在箭头函数中的this又有点不同,this 的值取决于该函数外部非箭头函数的 this 的值

var fn = () => {
  console.log(this.a);
}

var a = 2;

var o = {
  a: 4,
  fn: fn
}

o.fn()				// 2
fn.call(o);			// 2

上述代码显示:改变调用对象对箭头函数并不生效,fn外层为全局对象,因此打印出来是全局对象的a的值。
再来一段代码

function fn() {
  return () => {
    console.log(this.a);
  }
}

var a = 2;

var o = {
  a: 4,
  fn: fn
}

var f = o.fn()
f()					// 4

这里箭头函数的外层环境为fn函数,fn函数又在o对象里,this指向o对象,打印结果为4。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值