标签：function fun 指向 bind 改变 call var apply
文章目录
改变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
标签：function,fun,指向,bind,改变,call,var,apply 来源： https://blog.csdn.net/qq_45868411/article/details/119409212
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。