bind、apply、call是什么?
bind、apply、call是Function原型的方法,而在js中所有的函数都是Function的实例,所以,有所有函数都可以使用这三个方法。
bind、apply、call有什么作用?
改变this指向 ,这是它们的共同作用,如下所示:
function fn() {console.log(this, 111)
}
let obj = {name: '谭梦寻'
}
fn() // 输出的是window全局对象
fn.call(obj) // 输出:{ name: '谭梦寻' } 111
bind、apply、call三者的区别
bind的特点:
- 不会调用原来的函数 可以改变原来函数内部的this 指向
- 返回的是原函数改变this之后产生的新函数
- 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
bind的场景理解 :牛客网专项真题:二次封装函数_牛客题霸_牛客网
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>/* 填写样式 */</style>
</head><body><!-- 填写标签 --><script type="text/javascript">// 填写JavaScriptfunction partialUsingArguments(fn) {//null就是this,默认就是windowreturn result = fn.bind(null, ...[...arguments].slice(1))}</script>
</body></html>
这里为什么用bind呢?因为bind的作用是只改变函数的指向,而不调用该函数,很多小伙伴可能会直接使用 return result = fn(参数);这样的话,就会调用了这个函数,达不到题目要求的效果。
call的特点:
- call()方法接受的语法和作用与apply()方法类似,只有一个区别就是call()接受的是一个参数列表,而apply()方法接受的是一个包含多个参数的数组或伪数组。
- call()、apply()和bind的区别就是它们会调用函数
-
call 的主要作用可以实现继承
call的场景:
只改变this并调用函数和继承:
var o = {name: 'andy'
}function fn(a, b) {console.log(this);console.log(a + b);};
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承
function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;
}function Son(uname, age, sex) {Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);//Son { uname: '刘德华', age: 18, sex: '男' }
apply的特点:
- 使用 apply, 我们可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。
- apply 与 call() 非常相似,不同之处在于提供参数的方式。apply 使用参数数组或者伪数组,而不是一组参数列表。
- apply 可以使用数组字面量(array literal),如 fun.apply(this, [‘eat’, ‘bananas’]),或数组对象, 如 fun.apply(this, new Array(‘eat’, ‘bananas’))。
apply的主要应用场景:
利用 apply 借助于数学内置对象求数组最大值 :
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
拓展:
函数上下文:函数的this指向。
// 将函数 fn 的执行上下文改为 obj 对象
//函数上下文指的是this指向 即将fn函数this指向obj对象
function speak(fn, obj) {return fn.apply(obj)
}
/*
下面两个也都可以实现function speak(fn, obj) {return fn.call(obj)
}
function speak(fn, obj) {return fn.bind(obj)()
}
*/