Js中this的指向,ES5替换函数中的this的方法:call、apply、bind的使用场景

Js中this的指向,es5替换函数中的this的方法

1. 什么是this

this是自动指向当前调用函数的 . 前对象的关键词。

2.什么时候使用this

对象自己的方法,要使用对象的另一个属性名或者另一个方法时,都必须使用"this . 属性名"访问。
如果不加"this .,前面不带 . 的普通变量,默认只能在函数作用域和全局作用域window中查找,无法擅闯某个对象内部,获取对象中的属性值。

3.this的原理

(1). 当调用函数时,在临时创建的函数作用域对象中,临时创建this关键词,临时指向正在调用函数的 . 前的对象。
(2). 在函数内直接使用this,等效于直接使用调用函数时 . 前的对象。
(3). 如果将来调用函数时,. 前的主语对象发生了变化,this可自动跟着 . 前的对象一起变化,而不用修改原代码。
this的原理
(4). 划重点啦! 要判断this的指向,一定不要看定义在哪,只看在哪里被谁调用
this的指向

4. this的指向

调用函数的情况 this的指向
obj.fun() obj
new Fun() 新子对象
fun() window
构造函数 . prototype . fun=function(){this…} 当前调用该方法的子对象

5. 替换函数中的this

5.1 在本次调用函数时,临时替换一次this为指定的对象

(1). call:
i. 语法:要调用的函数 . call(替换tihs的对象,其他实参列表)
ii. call做了三件事:
a. call是调用函数的意思,所以会调用函数执行一次;
b. call会自动将函数内的this临时替换为call的第一个参数;
c. 将实参列表传给函数的形参变量。

(2). 传入函数的实参列表放在一个数组中整体传入,使用apply代替call
i. 语法:要调用的函数 . apply(替换tihs的对象,保存实参值的数组)
ii. apply做了三件事:
a.apply也是调用函数的意思,所以会调用函数执行一次;
b. apply也会自动将函数内的this临时替换为apply的第一个参数;
c. apply可以先将数组打散为单个值,再顺序传入函数中,交给对应的形参变量。

5.2 基于原函数创建一个一模一样的新函数副本,并永久替换函数中的this为指定对象

i. 语法:var 新函数=原函数 . bind(替换this的对象,部分实参值)
ii. bind做了三件事:
a. 创建一个和原函数一模一样的函数副本;
b. 永久替换函数副本中的this为指定的对象;
c. 同时还替换函数副本中的部分形参为固定的值。
d.结果:
①从此使用函数副本,不用再反复call(),反复传替换this的对象;
② 被bind绑定的this,即使再用call也无法替换。

5.3 总结

(1). 如果临时只替换一次this,call或apply
i. 如果需要传入多个参数值,而给的参数也是多个,没有出现不一致,则首选call。
ii. 如果需要传入多个参数值,但是给的参数却是放在一个数组中,出现不一致,则使用apply可打散数组后再传参。
(2). 如果用永久替换一个函数中的this,反复适应时,采用bind
注意:更换回调函数中的this,一定使用bind,因为回调函数的调用次数是不确定的,会反复使用。

猜你喜欢

转载自blog.csdn.net/Amazing_rabbit/article/details/108466877