this调用场景

5大调用场景:

普通函数、 对象方法、 call apply【而破烂】 bind【拜的】 class 箭头函数

1、普通函数中的this

window调用了fn,所以this指向window【文斗】

2、对象方法中出现this

pox【破克斯】调用的run,所以run方法中的this指向pox

3、call() /apply() /bind() 都可以改变this指向

相同点:call() /apply() /bind() 都可以改变this指向,指向第一个参数 不同点:bind()需要手动执行 不同点:call第二个参数为单个数值,apply()第二个参数为数组

4、class中的this指向new 后的实例对象

class中的this指向new 【妞】后的实例对象

5、class中的this指向new 后的实例对象

class中的 this时刻指向父级的上下文对象。并且不可以被 call()/apply()/bind()修改。

6、特殊情况

对象方法中的this,指向当前对象(因为当前对象执行了方法)。

setTimeout函数中的this,相当于普通函数中的this,因为setTimeout触发的函数执行,并不是外部对象执行的。

setTimeout中函数是箭头函数,this为当前对象。因为箭头函数中的this始终是父级上下文中的this.

注意:

this取什么值,是在执行时确认的,定义时无法确认

this总结 (重要)

普通函数中调用,this指向window 对象方法中调用,this指向当前对象 call apply bind中调用, this指向被传入的对象 class中的方法中调用, this指向实例对象 箭头函数,this就是父级上下文中的this

1.在浏览器里,在全局范围内this 指向window对象; 2.在函数中,this永远指向最后调用他的那个对象; 3.构造函数中,this指向new出来的那个新的对象; 4.call、apply、bind中的this被强绑定在指定的那个对象上; 5.箭头函数中this比较特殊,箭头函数this为父作用域的this,不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来; 6.apply、call、bind都是js给函数内置的一些API,调用他们可以为函数指定this的执行,同时也可以传参。

this的初衷

this设计的初衷是在函数内部使用,用来指代当前的运行环境。为什么这么说呢? JavaScript中的对象的赋值行为是将地址赋给一个变量,引擎在读取变量的时候其实就是要了个地址然后再从原始地址中读取对象。而JavaScript 允许函数体内部引用当前环境的其他变量,而这个变量是由运行环境提供的。由于函数又可以在不同的运行环境执行(如全局作用域内执行,对象内执行…),所以需要一个机制来表明代码到底在哪里执行!于是this出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

全局中的this

在浏览器里,在全局范围内:

1.this等价于window对象; 2.用var声明一个变量和给this或者window添加属性是等价的; 3.如果你在声明一个变量的时候没有使用var或者let、const(es6),你就是在给全局的this添加或者改变属性值。

函数中的 this

对于函数中的this的指向问题,有一句话很好用:运行时this永远指向最后调用它的那个对象。

我们看最后调用 sayName的地方 sayName();,前面没有调用的对象那么就是全局对象 window,这就相当于是 window.sayName()。

需要注意的是,对于严格模式来说,默认绑定全局对象是不合法的,this被置为undefined【安迪的饭的】。会报错 Uncaught TypeError: Cannot read property 'name' of undefined。

构造函数中的this

所谓构造函数,就是通过这个函数生成一个新对象(object)。当一个函数作为构造器使用时(通过 new 关键字), 它的 this 值绑定到新创建的那个对象。如果没使用 new 关键字, 那么他就只是一个普通的函数, this 将指向 window 对象。

1) 创建新对象 obj; 2) 给新对象的内部属性赋值,构造原型链(将新对象的隐式原型指向其构造函数的显示原型); 3) 执行函数 Foo,执行过程中内部 this 指向新创建的对象 obj(这里使用了call改变this指向); 4) 如果 Foo 内部显式返回对象类型数据,则返回该数据,执行结束;否则返回新创建的对象 obj。

很显然,谁被new了,this就指向谁。

class中的this

在es6中,类,是 JavaScript 应用程序中非常重要的一个部分。类通常包含一个 constructor , this可以指向任何新创建的对象。 不过在作为方法时,如果该方法作为普通函数被调用, this也可以指向任何其他值。与方法一样,类也可能失去对接收器的跟踪。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值