JS apply、call、bind

call、apply、bind

定义

• apply：调用一个对象的一个方法并继承该对象的属性；例如：B.apply(A, arr);即A对象应用B对象的方法
• call：   调用一个对象的一个方法并继承该对象的属性；例如：B.call(A, a1, a2 , a3, a…);即A对象调用B对象的方法
• bind： 复刻一个对象的一个方法并继承该对象的属性；创建一个新的函数,在bind()被调用时，这个新函数的this被指定 bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用；例如：B.bind(A, a1, a2 , a3, a…);

call 与 apply 的相同点：

• • 方法的含义是一样的，即方法功能是一样的
  • 第一个参数的作用是一样的

call 与 apply 的不同点：两者传入的列表形式不一样

• • call可以传入多个参数
  • apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

call 与 bind 的相同点：

• • 两个方法的传参是一样的

bind 与 call、apply 的不同点：

• • call、apply 会立即执行，bind返回一个新的函数不会立即执行
  • 其实bind可以看做是call的补充，传参都一样只是call会立即执行得到结果，而bind不会立即执行得到的是一个新的函数

实例

不传参数、传一个参数

var name = '红叶',
    age = 20;
var obj = {
  name: '迦南',
  age: 19,
  method: function () {
    let str = this.name + '年龄:' + this.age;
    console.log(str);
  }
}
var shenmiao = {
  name: '沈妙',
  age: 18
}

obj.method()                // 迦南年龄:19 >>> this指向obj
obj.method.call()           // 红叶年龄:20 >>> this指向window
obj.method.call(shenmiao)   // 沈妙年龄:18 >>> this指向shenmiao
obj.method.apply(shenmiao)  // 沈妙年龄:18 >>> this指向shenmiao
obj.method.bind(shenmiao)() // 沈妙年龄:18 >>> this指向shenmiao （bind()会返回一个新的函数必须调用才能执行）

 传入多个参数

var obj = {
  name: '迦南',
  age: 19,
  method: function (A, B) {
    let str = this.name + '年龄:' + this.age + '喜欢吃:' + A + '和' + B;
    console.log(str);
  } 
}
var shenmiao = {
  name: '沈妙',
  age: 18
}

// 下面的结果都是 沈妙年龄:18喜欢吃:西瓜和芒果 >>> this指向shenmiao 
obj.method.call(shenmiao, '西瓜', '芒果')     
obj.method.apply(shenmiao, ['西瓜', '芒果'])  
// 立即调用
obj.method.bind(shenmiao, '西瓜', '芒果')()
// 普通方式调用
var newMethod = obj.method.bind(shenmiao, '西瓜', '芒果')
newMethod() 

 

拓展

1、Math.max()、Math.min()

max()返回给定的一组数据中的最大值，min()返回给定的一组数据中的最小值，使用方法是一样的，但是不接收数组作为参数（是不是很无语！）;

常见的场景都是获取一个数组中的最大或者是最小，那么我们可以使用apply快速获取想要的结果

//参数不是数组
let max1 = Math.max(1,2,3)
console.log(max1); // 3

//参数是数组
//apply()方法的第一个参数是函数内部的this，而max()不用依赖上下文，所以第一个参数可以为null，也可以传当前调用这个方法的环境也就是window（this），第二个参数为array
let max2 = Math.max.apply(null,[1,2,3])
// 这样写也是可以的
// let max2 = Math.max.apply(window,[1,2,3]) 
// let max2 = Math.max.apply(this,[1,2,3])
console.log(max2); // 3