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

  • Post author:
  • Post category:其他




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,因为回调函数的调用次数是不确定的,会反复使用。



版权声明:本文为Amazing_rabbit原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。