如何优雅的改变 this 指向
前言
Javascript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题,常用的有bind()
call()
apply()
this 指向
this 的指向,是我们调用函数的之后确定的。调用方式的不同决定了 this 的指向不同,一般指向我们的调用者。
改变 this 的三个函数
call()
call()
方法使用一个指定的 this
值和单独给出的一个或多个参数来调用一个函数。
语法
thisArg:在 fun 函数运行时指定的 this 值
args1, arg2, ... :传递的其它参数
返回值就是函数的返回值,因为它就是调用函数
作用
call 第一个可以调用函数 第二个可以改变函数内的 this 指向
call 的主要作用是可以实现继承
Father.call(this, uname, age, sex); 在调用父构造函数的同时,将父构造函数中的 this 指向子构造函数中的 this,这样子构造函数就可以使用父构造函数中的 uname,age,sex 了
apply()
apply() 方法调用一个具有给定this
值的函数,以及以一个数组(或类数组对象)的形式提供的参数。
语法
thisArg:在 fun 函数运行时指定的 this 值
argsArray:传递的值,必须包含在
数组
里面返回值就是函数的返回值,因为它就是调用函数
作用
也是调用函数 第二个可以改变函数内部的 this 指向
但是它的参数必须是数组(伪数组)
apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求最大值 Math.max()
bind()
bind()
方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
语法
thisArg:在 fun 函数运行时指定的 this 值
args1, arg2, ... :传递的其它参数
bind 方法不会调用函数,但是能改变函数内部的 this 指向
返回值是 fun 改造完的原函数拷贝(产生了新的函数)
作用
不会调用原来的函数
可以改变函数内部的 this 指向
返回的是原函数改变 this 之后产生的新函数
如果有的函数我们不需要立即调用,但是又想改变这个函数内部的 this 指向,这个时候用 bind
定时器
有一个按钮,当我们点击了之后,就禁用这个按钮,3 秒之后开启这个按钮
我们之前会通过 var that = this; 保留 this 的指向,在学完 bind 方法后,可以用 bind 来保留 this 指向
总结
call
apply
bind
总结
相同点
都可以改变函数内部的 this 指向
不同点
call 和 apply 会带哦用函数,并且改变函数内部 this 指向
call 和 apply 传递的参数不一样 call:arg1, arg2, ...apply:[arg] 数组形式
bind 不会调用函数,可以改变函数内部 this 指向
主要应用场景
call 经常做继承
apply 经常跟数组有关系,比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是还想改变 this 指向,比如改变定时器内部的 this 指向
最后
肝!肝!肝!我们一起加油~~~
版权声明: 本文为 InfoQ 作者【bo】的原创文章。
原文链接:【http://xie.infoq.cn/article/4d2754de8e2551b7dcfbfd76d】。文章转载请联系作者。
评论