JS高级(call、apply、bind)作用

下用两个对象来讲述call、apply、bind 的别。

声明steven，becky两个对象；

const steven = {
	 name: 'Steven',
	 phoneBattery: 70,
     charge: function(level) {
		  this.phoneBattery = level;
		}
	}
			

const becky = {
    name: 'Becky',
    phoneBattery: 20,
 }

steven 对象里面比 backy 多了一个charge函数，这个函数用来改变phoneBattery属性值，下面打印steven

// 改变前输出
console.log(steven)
// 改变phonebattery属性值为 100
steven.charge(100)
// 改变后输出
console.log(steven)

调用Steven.charge(100)，phoneBattery从原先的70变成了100, 如下图。

一、 call 的使用

如果 becky 想给自己的手机充电，但是他没有充电宝怎么办？这就可以利用 call 的方法临时借用 steven 里面的 charge 方法改变 。

becky 利用 call 方法临时调用 steven 的charge 改变 phoneBattery 值

// 改变前输出
console.log(becky)
// becky 利用 call 方法临时调用 steven 的charge 改变 phoneBattery 值
steven.charge.call(becky,99)
// 改变后输出
console.log(becky)

从becky对象里面的phoneBattery从20遍成了99

二、 apply 的使用

apply 和 call 用法相同，唯一不同的是 apply 参的参数是数组形式，

为了更好展示，下列传入两个参数，apply 和 call 的用法

const steven = {
	name: 'Steven',
	phoneBattery: 70,
	charge: function(level,level2) {
		  this.phoneBattery = level + level2;
		}
	}
			
const becky = {
	name: 'Becky',
	phoneBattery: 20,
 }

// 改变前输出
console.log(becky)
// steven.charge.call(becky,99,1)
// apply 的用法,唯一不同的是apply 传参的是以数组形式
steven.charge.apply(becky, [99,1])
// 改变后输出
console.log(becky)

三、 bind 的使用

bind 的方法会返回一个方法，不会立即调用，需要手动执行。

const steven = {
	name: 'Steven',
	phoneBattery: 70,
	charge: function(level,level2) {
		  this.phoneBattery = level + level2;
		}
	}
			
const becky = {
     name: 'Becky',
	 phoneBattery: 20,
  }

// 修改前
console.log(becky)
// bind 方法
const beckyCharge = steven.charge.bind(becky)
 // 执行方法
beckyCharge(99,1)
// 修改后 99 + 1 
console.log(becky)