文章目录
改变this指向
一、call()方法
1.可以调用函数
2.改变this指向
fun.call()
示例：
var obj ={
name:'张飞'
}
function fun() {
console.log(this)
}
fun.call(obj);
//{ name: '张飞' }
应用：
借用父构造函数继承属性
function Father(pname,age) {
this.pname = pname;
this.age = age;
}
function Son(pname,age) {
//调用父构造函数，改变this的指向
Father.call(this,pname,age)
}
var p1 = new Son('李四',20);
console.log(p1); // Son { pname: '李四', age: 20 }
二、apply()方法
fun.apply(thisArg,[args])
参数含义：
（1）返回值就是函数的返回值，
（2）第一个参数是要指向的对象
（3）其余的参数是一个数组（伪数组）
示例：
var obj ={
name:'张飞'
}
function fun() {
console.log(this)
}
fun.apply(obj);
//{ name: '张飞' }
应用：
// 1.求数组中的最大最小值
var arr = [1,23,90,10];
var res1 = Math.max.apply(Math,arr);
console.log(res1); // 90
// 2.将数组各项添加到另一个数组
var arr1 = ['a', 'b'];
var arr2 = [0, 1, 2];
arr1.push.apply(arr1, arr2);
console.log(arr1); // ["a", "b", 0, 1, 2]
三、bind()方法
bind()方法不会调用函数，但是可以改变函数内部this的指向
fun.bind(thisArg,arg1,...)
bind()方法返回的是改造后的原函数的拷贝
示例：
var obj ={
name:'张飞'
}
function fun() {
console.log(this)
}
var f = fun.bind(obj);
f();
//{ name: '张飞' }
应用：按钮短暂禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bind的使用</title>
</head>
<body>
<button>点击一下</button>
<script>
var btn = document.querySelector('button');
btn.onclick = function () {
this.disabled = true;
setTimeout(function () {
this.disabled = false
}.bind(this),3000)
}
</script>
</body>
</html>
四、总结比较
相同点：都可以改变函数内部this的指向
区别：
1call和apply会调用函数
2.call和apply传递的参数不一样，call传递的参数以逗号形式分隔，apply传递的是数组形式
3.bind不会调用函数
主要应用场景：
1.call经常用于继承
2.apply经常用于数组的操作
3.bind不调用函数，可以用于改变定时器内部的this