JS中call(),apply(),bind()函数的区别与用法详解
小刺猬_0421 人气:0call()
介绍
通过提供一个新的this值给当前调用的函数/方法,从而改变this指向。
语法
fn.call(this.Arg, arg1, arg2,...)
thisArg:当前调用函数this指向的对象
arg1, arg2:传递的其他参数(直接传给形参可不写)
特点
- 可以直接调用函数—
fn.call()
- 可以改变被调用函数的this指向为指定的—
fn.call(this.Arg)
返回值
使用调用者提供的值和参数调用该函数的返回值,也就是函数的返回值。若该方法没有返回值,则返回undefined
。
使用(主要应用)
通过使用call()来实现继承
// 借用父构造函数继承属性 // 父构造函数 function Father(name, age) { this.uname = name this.age = age } // 子构造函数 function Son(name, age) { Father.call(this, name, age) } var son = new Son('小明', 10) console.log(son); // Son {uname: '小明', age: 10}
apply()
介绍
apply-应用、运用的意思。
apply()-调用一个具有给定值的函数,以及以一个数组(或一个类数组对象)的形式提供的参数this
,简单理解为调用函数的,fang'shi但是它可以改变this指向。
语法
fn.apply(this.Arg, [argsArray])
thisArg:在fn函数运行时指定的this值,当不需要改变this指向时这里可以填null 。
argsArray:传递的值,必须包含在数组里面。
特点
- 也是调用函数—
fn.apply()
- 可以改变函数内部的this指向—
fn.apply(this)
但是它的参数必须是数组(伪数组)
返回值
apply()的返回值就是函数的返回值,因为它就是调用函数。
使用调用者提供的值和参数调用该函数的返回值。若该方法没有返回值,则返回undefined
。
使用
var a = { name: '小红' } function fn(arr) { console.log(this); // {name: '小红'} console.log(arr); // blackpink 传字符串就输出字符串传数字就输出数字 } fn.apply(a, ['blackpink']) // fn.apply() // this->window arr->undefined
典型应用: 借助于数学内置对象求值。
var arr = [1, 66, 3, 99, 4] // var max = Math.max.apply(null, arr) // 虽然这里的this指向不需要改变填null没有错 var max = Math.max.apply(Math, arr) // 但是这里最好是让this指向函数的调用者是最合适的 var min = Math.min.apply(Math, arr) console.log(max); // 99 console.log(min); // 1
bind()
介绍
bind:绑定、捆绑
bind():不会调用函数,但是也能改变函数内部的this指向
语法
fn.bind(thusArg, arg1, arg2, ...)
thisArg:在fn函数运行时指定的this值
arg1, arg2:传递的其他参数
特点
- 不会调用原来的函数,不会立即调用;
- 可以改变原来函数内部的this指向;
- 返回的是原函数改变this之后产生的新函数;
返回值
- 返回由指定的this值和初始化参数改造的原函数拷贝。
使用
var c = { name: '大华' } function fn() { console.log(this); // {name: '大华'} console.log(a + b); // 3 } // fn.bind(c) // 这里不会有输出值 var f = fn.bind(c, 1, 2) f() // 拷贝函数所以输出值用函数调用
典型应用:
如果有的函数我们不需要立即调用,但是又想改变这个函数内部this指向,此时用bind(),eg:点击发送验证码60秒后才能二次点击
<button>按钮</button> <button>按钮</button> <button>按钮</button>
var btns = document.querySelectorAll('button') for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { this.disabled = true // 这个this指向的是调用者btn setTimeout(function() { // this.disabled = false; // 只用这一个不加bind的话会不管用,因为定时器里面的this指向的是window this.disabled = false // 此时这里的this指向的是当前点击的那个btn }.bind(this), 3000) // 这个this指向的是btn这个对象 } }
call(),apply(),bind()的区别
三者相同点
- 都可以改变函数内部的this指向
不同点
call
和apply
会调用函数,并且改变函数内部this指向;call
和apply
的传参不一样,call
传参aru1, aru2...形式,apply
必须为数组形式 [arg] ;bind
不会直接调用函数,但是可以改变函数内部this指向;
应用场景不同:
call
经常做继承;apply
经常跟数组有关系,比如借助于数学对象实现数组最大最小值;bind
不调用函数,但是还想改变this指向,比如改变定时器内部this指向;
以上既是JS中call(),apply(),bind()函数的区别与使用方法,更多关于这3个函数的使用方法请查看下面的相关链接
加载全部内容