关于javascript:Javascript之bindcallapply方法的使用场景和区别

39次阅读

共计 1287 个字符,预计需要花费 4 分钟才能阅读完成。

Javascript 之 bind,call,apply 办法的应用场景和区别

之前的文章里有写到上述三种办法的实现,这次就来比照下这三种办法。

入参 语法 出参
call n 个参数,第一个参数为原函数的 this 指向,其余参数顺次传入原函数中进行调用 function.call(thisArg, arg1, arg2, …) 函数执行后果
apply 最多两个参数,第一个参数为原来函数的 this 指向,第二个参数是类数组或数组对象,解构后传入原函数进行调用 func.apply(thisArg, [argsArray]) 函数执行后果
bind n 个参数,bind 中的第一个参数为原来函数的 this 指向,其余参数顺次传入原函数中进行调用 function.bind(thisArg[, arg1[, arg2[, …]]]) 一个新函数

这三者进行比照个别说的都是 call 和 apply 进行比照,bind 和 call 进行比照。具体认真看看上表写的货色哈。

相同点就是三者都批改了原函数的 this 指向,为什么这么做呢?依照我的了解来答复就是, 共享方法节俭内存

大家想一想,如果没有这种批改 this 指向的方法,而咱们又想要打印一些变量的某些属性,是不是就得这么写了:

const teacher = {

name:'三上 you 亚',

age:'18'

}

function demo(){console.log(teacher.name)

}

或者这么搞

const teacher = {
name:'三上 you 亚',
age:'18',
consoleName(){console.log(this.name)
}

}
teacher.consoleName()

很麻烦的好不好,而且每个变量我都这么搞是不是占用很多内存

优化一下啦,就成了,那罗唆就这么写:

function test(params){console.log(params.name)
}
const teacher = {
name:'三上 you 亚',
age:'18'
}
test(teacher)

ok,这样的确简化了一些,然而我 TM 每次写一个我的项目还得创立 test 这个办法,我的项目多了这也很焦躁啊。罗唆就加到原型上完事了,当然,而且加的话,必定是加到 Function 下面啊,总不能加到 Object 的原型上吧,你能设想会有 Object.prototype.[‘ 打印一些 XX 属性 ’] 这样的办法吗

喏,这样就好了解了吧。

接下来说一下常见的一个例子:类数组对象应用 slice 办法

[].slice.call(arguments)

咱们都晓得啊,类数组对象跟数组不是一回事,只有 length 属性并且参数的 key 是从 0 开始,这两点跟 Array 一样,其余的办法并不具备,slice 办法当然也就没有了。

但在函数中咱们拿到 arguments 后经常须要做一些解决,这时候将他转换成一个数组会更不便一些。

而 slice 办法的实现则是依照 key 进行取值的,这个能够用到 arguments 上,如果咱们 slice 时不填参数则会把 arguments 外面的 value 输入到一个数组中去,这样也就实现一个类数组对象转成一个数组对象的目标啦,是不是很微妙呢

正文完
 0