call、apply、bind详细讲解
call、apply、bind详细讲解,从小白的思维出发，更加好理解！
·
目录
call函数
概念
call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
调用函数
- 调用函数：fn.call（'形参1','形参2'，...）
<script>
function fn(a, b) {
return a + b;
}
fn.call(1, 2);
</script>
改变指向
- 改变指向：fn.call(this,'形参1','形参2'，...)
var obj = {
uname: "张三",
age: 18,
sayhi: function () {
console.log("我叫张三，我今年18岁！ ");
console.log(this);//指向张三
obj1.sayhi.call(obj);
}
}
var obj1 = {
uname: "李四",
age: 20,
sayhi: function () {
console.log("我叫李四，我今年20岁！ ");
console.log(this);//指向张三
}
}
obj.sayhi();
应用场景: 实现继承
function farther(uname, uage) {
this.uname = uname;
this.uage = uage;
}
function son(uname, uage) {
farther.call(this, uname, uage);
}
//son函数继承了farther函数的方法和属性
var obj = new son("易烊千玺", "20");
console.log(obj);
apply函数
概念
apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。传递参数的时候，程序会自动转换为相应的类型，数字转换为数字型，字符串转换为字符串类型。
调用函数
- 调用函数：fn.apply（[形参以伪数组形式]）
<script>
function fn(a, b) {
return a + b;
}
fn.apply([1, 2]);
</script>改变指向
- 调用函数：fn.apply（this，[形参伪数组形式]）
var obj = {
uname: "张三",
age: 18,
sayhi: function () {
console.log("我叫张三，我今年18岁！ ");
console.log(this);//指向张三
obj1.sayhi.apply(obj);
}
}
var obj1 = {
uname: "李四",
age: 20,
sayhi: function () {
console.log("我叫李四，我今年20岁！ ");
console.log(this);//指向张三
}
}
应用场景: 经常跟数组有关系
var arr1 = [1, 2, 3, 5, 8, 99, 110];
var max = Math.max.apply(Math, arr1);
var min = Math.min.apply(Math, arr1);
console.log(max, min);//110,1bind函数
概念
bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数。如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind。
不可调用函数
改变指向
- 改变指向：fn.bind(this,'形参1','形参2'，...)
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数 this指向的是对象o 参数使用逗号隔开应用场景:不调用函数,但是还想改变this指向
<body>
<button>点击</button>
<script>
var but = document.querySelector("button");
//点击按钮之后三秒以后才可再次点击
but.addEventListener("click", function () {
this.disabled = true;
//此时函数不是立即执行，需要三秒使用bind让函数不立即执行
setTimeout(function () {
this.disabled = false;
}.bind(this), 3000)
})
</script>
</body>call、apply、bind对比总结
相同点：
- 都可以改变函数内部的this指向
不同点
- call和apply会调用函数并且改变函数内部this指向
- call 和apply传递的参数不一样, call传递参数aru1, aru2..形式apply必须数组形式[arg]
- bind 不会调用函数可以改变函数内部this指向
主要应用场景
- call 经常做继承
- apply 经常跟数组有关系.比如借助于数学对象实现数组最大值最小值
- bind 不调用函数但是还想改变this指向比如改变定时器内部的this指向
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
11
0- 0
已为社区贡献2条内容
所有评论(0)