call
1. 小猫想吃鱼
一条鱼一块钱，正值商店所有物品打八折，小猫非常想买，奈何看看兜里只有三毛，于是将坏主意打在了同学吉娃娃身上。
var xiaomao = {
money: 0.3,
buy: function(){
const totalMoney = xiaomao.money + this.money
return totalMoney >= 1 ? '一条鱼' : '同学你钱不够啊'
}
}
var jiwawa = {
money: 0.5
}
2. 小猫如何向吉娃娃借钱呢？
小猫使用 call 打电话给吉娃娃， 吉娃娃一听借五毛还一块，便爽快地答应了。
var goods = xiaomao.buy.call(jiwawa); // goods: 同学你钱不够啊
call 方法将主体变成了括号内的对象，就可以借用这个元素里面的属性了。
呀呀，这时候结账的时候发现系统没有计算折扣价格，这可把小猫急坏了。
3. 钱倒是凑齐了，怎么使用折扣呢？
这时老板说了一句不要慌，三下五除二将购买规则添加上折扣的参数
var xiaomao = {
money: 0.3,
buy: function(discount){
const totalMoney = xiaomao.money + this.money
return totalMoney >= 1 * discount ? '一条鱼' : '同学你钱不够啊'
}
}
这时，在结算的时候使用了折扣
var goods = xiaomao.buy.call(jiwawa, 0.8); // goods 一条鱼
小猫成功地吃上了鱼，全剧完。
4. Call 语法
function.call(thisArg, arg1, arg2, ...)
参数解析
- thisArg： function 函数运行时使用的 this 值
- arg1, arg2, ...： function 函数运行时的参数
描述
- call() 允许为不同的对象分配和调用属于一个对象的函数/方法。
- call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。
apply
apply和call的方法类型作用也一样，只是接收的参数不同
- call() 方法分别接受参数,即参数列表
call(fn, arg1, arg2)
- apply() 方法接受数组类型参数，即参数数组
apply(fn, [arg1, arg2])
接收参数的方式是一样的
fn(arg1, arg2){
}
call , apply 异同点
- 同：都是临时改变 this 指向
- 同：当第一个参数为null、undefined的时候，默认指向window(在浏览器中)
- 异： 参数接收格式不同， call 是列表 ，apply是数组
bind
- bind会创建一个新的函数
- 新函数的 this 被指定为 bind() 的第一个参数
- 其余参数将作为新函数的参数，供调用时使用。
小猫买鱼
var xiaomao = {
money: 0.3,
buy: function(){
const totalMoney = xiaomao.money + this.money
return totalMoney >= 1 ? '一条鱼' : '同学你钱不够啊'
}
}
var jiwawa = {
money: 0.5
}
const buy = xiaomao.buy;
const xiaomaoBuy = buy.bind(jiwawa, 0.8)
var goods = xiaomaoBuy(); // goods 一条鱼
xiaomaoBuy 是创建的新函数, 它的 this 是 jiwawa, 0.8 将作为新函数的参数，供调用时使用
call 和 bind 异同
- bind可以改变 this 指向
- bind参数是列表
- bind会创建一个新的函数，并且将创建时传入的参数缓存起来，供下次调用时使用
- bind时不会立即触发，而是返回一个新的函数，下次时直接调用这个函数
