改变函数内this指向方法——callapplybind

登山则情满于山,观海则意溢于海。这篇文章主要讲述改变函数内this指向方法——callapplybind相关的知识,希望能为你提供帮助。
javascript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题,常用的有bind( )、call( )、apply( )三种方法。
相同点:【改变函数内this指向方法——callapplybind】都可以改变函数内部的this指向。
区别点:1、call和apply传递的参数不一样,call传递参数aru1, aru2... 形式,apply必须数组形式[arg]
2、bind不会调用函数,可以改变函数内部this指向
主要应用场景:1、call经常做继承。
2、apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。
3、bind不会调用函数,可以改变函数内部this指向。
call方法
call( )方法,调用一个对象。简单理解为调用函数的方法,但是它可以改变函数的this指向。
应用场景:经常做继承。

var o = { name: ‘andy‘ } function fn(a, b) { 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() { Father.call(this, uname, age, sex); } var son = new Son(‘刘德华‘, 18, ‘男‘);

apply( )方法
apply( )方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。
应用场景:经常跟数组有关系
var o = { name: ‘andy‘ }; function fn(arr) { console.log(arr); // ‘pink‘ }; fn.apply(o, [‘pink‘]); // 1. 也是调用函数 第二个可以改变函数内部的this指向 // 2. 但是他的参数必须是数组(伪数组) // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 var arr = [1, 66, 3, 99, 4]; var arr1 = [‘red‘, ‘pink‘]; var max = Math.max.apply(Math, arr); var min = Math.min.apply(Math, arr); console.log(max, min); // 99 1

bind方法
bind( )方法不会调用函数。但是能改变函数内部this指向。
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 参数使用逗号隔开

案例:我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
< body> < button> 点击< /button> < button> 点击< /button> < button> 点击< /button> < script> var btns = document.querySelectorAll(‘button‘); for (var i = 0; i < btns.length; i++ ) { btns[i].onclick = function() { this.disabled = true; setTimeout(function() { this.disabled = false; }.bind(this), 2000); } } < /script> < /body>


    推荐阅读