ES6 改变this指向 call、apply、bind

1、call()的使用
使用方法:要改变this指向的函数.call(this的新指向,参数1,参数2……)
事例:

function fun(x, y) {
   console.log(x + y);
   console.log(this);
}
fun(1, 2); // 输出 3 window 调用fun()函数的是window 故this指向window
var obj = {
    name: "张三"
}
fun.call(obj, 1, 2); // 输出 3 和 obj {name: "张三"} 这个对象 用call改变了this的指向

2、apply()的使用
使用方法:要改变this指向的函数.call(this的新指向,数组),参数以数组形式传入
事例:

function fun(x, y) {
   console.log(x + y);
   console.log(this);
}
fun(3, 4); // 输出 7 window 调用fun()函数的是window 故this指向window
var obj = {
    name: "李四"
}
fun.apply(obj, [3, 4]); // 输出 7 和 obj {name: "李四"} 这个对象 用apply改变了this的指向

3、bind()的使用
使用方法:要改变this指向的函数.call(this的新指向,参数1,参数2……)
bind()使用时不会调用函数,而是返回一个原函数的拷贝和指定的this值,可以定义一个变量去接收返回的原函数拷贝
事例:

var obj = {
    name: "王五"
}
function fun(x, y) {
    console.log(x + y);
    console.log(this);
}
fun.bind(obj, 5, 6); //没有输出,因为 bind() 不调用函数 只是返回原函数拷贝和this指向
var new_fun = fun.bind(obj, 5, 6); //使用一个变量去接收 bind() 的返回内容
new_fun(); //输出11 和 obj {name: "王五"} 这个对象

call、apply、bind区别:
相同点:都可以改变 this 的指向
不同点:
(1)call和apply使用时会调用函数,而bind不会,bind会返回的是原函数拷贝
(2)apply传递参数形式必须是数组
(3)call主要用于继承,apply可用于数组的相关操作,bind由于其不会调用函数的特点,故可用于改变定时器的this指向等。

扩展
改变this指向的其他途径:
1、可利用中间变量,如:在内外层的两个作用域,在外层生声明 that=this,然后在内层用that来代替this
2、箭头函数,箭头函数本身不绑定this,箭头函数中的this指向的是箭头函数被定义位置中的this。

猜你喜欢

转载自blog.csdn.net/weixin_45959504/article/details/105904843