改变this指向 call、apply、bind

最新推荐文章于 2024-07-08 18:06:28 发布

原创最新推荐文章于 2024-07-08 18:06:28 发布 · 400 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了JavaScript中this的指向问题，对比了ES5和ES6的不同。在ES5中，this指向调用函数的对象，而在ES6中，this指向函数调用的位置。通过call、apply和bind可以改变this的指向，但ES6函数不支持此特性。call和apply主要区别在于参数传递方式，call接受多个参数，apply接收一个参数数组。bind则会创建一个新的函数，其this已被预设。文章还提供了各种函数使用示例。

this指向

首先说一下this指向问题，在es5和es6中有所不同

es5中this指向调用this所在函数的对象
es6中this指向es6函数调用位置所在的上下文
在js中我们借助call,apply,bind三个函数可以改变this的指向，需要注意：

es6函数不能使用call,apply,bind来改变this指向
call，apply，bind只能由函数调用
在运行call，apply，bind的时候，调用他们的函数也会运行

call基本使用

var person = {
    name : "edward"
}
var obj = {
    print : function(age){
        console.log(this.name , age)
    }
}
obj.print.call(person , 30);//edward 30

每一个函数都有call属性用来改变一个函数的this指向，上述代码中调用print函数的call属性，将print函数的this从obj变为person。同时call函数可以接收参数，每个参数用逗号隔开，call中传递的参数，能够在print函数中接收到。

apply基本使用

var person = {
    name : "edward"
}
var obj = {
    print : function(age){
        console.log(this.name , age)
    }
}
obj.print.apply(person , [30]);//edward 30

apply函数跟call原理一样，区别在于apply函数接收的参数用数组表示，数组中每一个参数用逗号隔开。

bind基本使用

一个函数也可以调用bind属性来改变这个函数的this指向。代码如下：

var person = {
    name : "edward"
}
var obj = {
    print : function(age){
        console.log(this.name , age)
    }
}
obj.print.bind(person , 30)();//edward 30

bind函数接收参数的方式跟call一样，bind函数运行之后会返回一个函数，所以上述代码中需要在bind运行之后再写一对括号。

区别

apply和call基本相似，区别只是传入的参数不同，call可以传入多个参数，apply只能传入一个数组，要传入的参数写在数组中
bind方法会创建一个新的函数，当被调用的时候，将其this关键字设置为提供的值，必须手动调用
注意：es6函数不能使用call,apply,bind来改变this指向