call() bind() apply() 一看就懂

朱雀 2024-04-18 09:33 63阅读 0赞

看似懵懂，其实简单的一比  
废话少说直接扯代码

代码段一：

var name = '哪吒', age = 13;
    var obj = {
      name: '松岛老师',
      objAge: this.age,
      fun: function () {
        console.log('name:', this.name + ',Age:' + this.age);
      }
    }
    obj.fun() // name: 松岛老师,Age:undefined

代码段二：

var name = '太乙真人'
    function show () {
      console.log(this.name);
    }
    // show()  // 太乙真人

扯一下两段代码的区别

1.  第一个`this`指向方法的调用者，也就是obj这个对象
2.  第二个`this`因为你的函数是全局声明，所以执行函数时，`this指向window`

该扯主角了

## call() apply() bind() ##

1.  先注意一点：这仨api都是用来"`重新定义this`" 关键词`重新`

还是之前这段代码

var name = '哪吒', age = 13;
    var obj = {
      name: '松岛老师',
      objAge: this.age,
      fun: function () {
        console.log('name:', this.name + ',Age:' + this.age);
      }
    }

新添加一个对象

var cxk = {
      name: '鸡你太美',
      age: 18
    }

## 结果： ##

obj.fun.call(cxk) // name: 鸡你太美,Age:18
    obj.fun.apply(cxk) // name: 鸡你太美,Age:18
    obj.fun.bind(cxk)() // name: 鸡你太美,Age:18

1.  至此你会发现这仨功能除了bind带了一个括号，其他好像都是一样都是改变了this的指向，将this重新指向了一个新的对象
2.  至此通过观察代码你可以得出结论：
    
    1.  call() apply() 都是使用后，方法直接执行
    2.  bind() 返回一个方法,需要我们手动调用执行

=========华丽分割线

## 关于call,apply,bing 参数问题 ##

对原来的代码进行一点点修改：让fun方法带参数

var name = 'itcast', age = 13;
    var obj = {
      name: '松岛老师',
      objAge: this.age,
      fun: function (from, to) { // 注意此时这个方法需要传参
        console.log('name:', this.name + ',Age:' + this.age, '来自:', from, '去:', to, '参加演出');
      }
    }
    
    
    var cxk = {
      name: '鸡你太美',
      age: 18
    }
    
    obj.fun.call(cxk, '日本', '泰国')   // 鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
    obj.fun.apply(cxk, ['日本', '泰国']) //鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
    obj.fun.bind(cxk, '日本', '泰国')() //鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出

此时观察代码：

1.  参数：
    
    1.  第一个参数：this指向的对象
    2.  第二个参数：call和bind都是将方法参数直接放进去，中间以逗号隔开即可，唯独apply，方法的参数必须放进一个数组才行

## 最后总结： ##

1、call,apply,bind都是改变this的指向  
2、call,apply都是直接调用方法  
3、bind在改变this指向之后返回方法，需要我们手动调用  
4、方法传参时，call,bind都是直接将参数直接写入，中间用逗号分开即可，bind必须用数组

# 欢迎加微信一起学习：13671593005 #