bind、call、apply的区别与用法?

我们在看一些插件的时候,经常会用到这 3 个函数,那么他们具体的用途是什么呢?区别又是什么呢?我们先看看下面一段代码:

var name = '小白'
var obj = {
	name: '小明',
	getName: function () {
		console.log(this, this.name)
		return this.name
	}
}
var getName = obj.getName
obj.getName()
// obj, 小明
getName()
// window,小白

是不是很神奇,同一个函数,执行的结果不一样,这里涉及到一个this的指向问题。

函数中的this指向

js中一个普通函数this的指向与其本身无关,只与调用该函数的对象有关。根据这个规则,我们回到上面的问题,obj.getName调用getName函数的对象是obj,所以this指向了obj对象,那么得到的obj.name为小明;而getName()是直接调用的函数,实际上是window.geName()window对象在调用函数,this则指向window对象。(use strict 严格模式下,全局 this 是 undefined,而不是window)。
关于this的指向这里不做具体讲解,毕竟这是个复杂的问题,后面再分情况讲解,毕竟这也是一个高频面试题。

bind、call、apply 的作用

这 3 个函数的作用是,改变一个函数在执行时this的指向。我们来改造上面的代码。

var name = '小白';
var obj = {
	name: '小明',
	getName: function () {
		console.log(this, this.name)
		return this.name
	}
};

var obj1 = {name: '小花'}

var getName = obj.getName;
getName();
// window,小白
obj.getName();
// obj, 小明
getName.apply(obj);
// obj,小明
getName.call(obj1);
// obj1,小花
getName.bind(obj)();
// obj,小明

可以看到,当我们改用apply去调用函数时,不管其所在的作用域,我们的this指向bind,apply,call函数接受的第一个参数。

相同点与不同点

相同点:三个函数都是为了改变被调用函数的this指向,都指向接受的第一个参数。
不同点:

  1. applycall都是直接调用函数,而bind则是先将函数暂存起来,需要再单独调用一次。
  2. applycall第一个参数一样,都是要绑定给 this 的值,如果这个值为null或者undefined,则为window对象。他们的区别在第二个参数上:当函数需要传递多个变量时, apply可以接受一个数组作为参数输入, call 则是接受一系列的单独变量。当参数个数已知的时候可以用call,而当参数个数不确定的时候可以用apply
  3. bindcall很相似,第一个参数是this的指向,从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。bind 方法不会立即执行,而是返回一个改变了上下文 this后的函数。而不会影响原函数中的this指向。

最后我们再看一个完整的实例来表现这个三个函数的用途和区别:

function sub(a, b) {
		const sub = a + b
		console.log(sub)
		return sub
	}
	sub.call(null, 1, 2)
	sub.apply(null, [1, 2])
	sub.bind(null, 1, 2)()

可以看到,callapply参数不一样,而bind参数和call一样,但还需要单独调用一下函数。

应用场景

求数组中的最大和最小值
var arr = [0,8,3,46]
var max = Math.max.apply(null,arr);//46
var min = Math.min.apply(null,arr);//0
// 等价于
var max = window.Math.max(...arr);
var min = window.Math.min(...arr);

这里利用apply的第二个参数是接受一个数组,而在调用函数的时候会自动展开这个数组,而max和min方法接受参数的形式是(1,2,3,4)。

将 arguments 等类数组转换为数组
var trueArr = Array.prototype.slice.call(arguments,0,arguments.length)
判断变量类型
function isArray(obj){
    return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('dot') // false
使用 log 代替 console.log
function log(){
  console.log.apply(console, arguments);
}

以上用途参考:call、apply 和 bind 方法的用法以及区别

总结

callapplybind都是为了改变当前要执行函数this指向,由第一个参数决定,为null或者undefined时则为window对象。callapply的参数有区别。而bind不是马上执行函数,而是返回该函数和保留该函数的执行上下文。

学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。

个人公众号:长按保存关注

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读