千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > this的指向和改变方向

this的指向和改变方向

来源:千锋教育
发布人:syq
时间: 2022-07-28 15:06:44 1658992004

  1.普通函数调用this的指向window

this的指向和改变方向22

this的指向和改变方向23

  这里this指向的是window

  2.构造函数调用, 此时 this 指向 实例对象

this的指向和改变方向68

this的指向和改变方向69

  这里的this 指向的就是let的 两个实例对象p1和p2

  3.对象方法调用, 此时 this 指向 该方法所属的对象

this的指向和改变方向131

this的指向和改变方向132

  4.箭头函数中this没有明确指向,会向上一级(宿主对象)寻找

this的指向和改变方向166

  5.通过事件绑定的方法, 此时 this 指向 绑定事件的对象

this的指向和改变方向200

this的指向和改变方向201

  6.定时器中this指向的也是window

this的指向和改变方向225

this的指向和改变方向226

  当this碰到return时 又产生什么呢?

  再看一个

this的指向和改变方向251

  再来

this的指向和改变方向258

this的指向和改变方向263

  什么意思呢?

  如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

  还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

this的指向和改变方向264

  知识点补充:**

  1.在严格版中的默认的this不再是window,而是undefined。

  二、更改this指向的三个方法

  1.call() 方法

this的指向和改变方向461

this的指向和改变方向462

  没错,就像上面说的,普通函数的this指向window,现在让我们更改this指向

this的指向和改变方向506

this的指向和改变方向507

  2. apply()

this的指向和改变方向520

  apply方法和call方法有些相似,它也可以改变this的指向,也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下:

this的指向和改变方向588

  **

  //注意如果call和apply的第一个参数写的是null,那么this指向的是window对象

this的指向和改变方向642

  3.bind()**

  bind方法和call、apply方法有些不同,如下

this的指向和改变方向682

  我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。

this的指向和改变方向746

  函数c看看,能不能打印出对象a里面的user

this的指向和改变方向771

  同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。

this的指向和改变方向827

  总结: call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别。

  更多关于“前端培训”的问题,欢迎咨询千锋教育在线名师。千锋教育多年办学,课程大纲紧跟企业需求,更科学更严谨,每年培养泛IT人才近2万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。

  注:本文部分文字和图片来源于网络,如有侵权,请联系删除。版权归原作者所有!

 

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT