脚本宝典收集整理的这篇文章主要介绍了JS 函数的 call、apply 及 bind 超详细方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
调用 call()
方法会立即执行目标函数,同时改变函数内部 this
的指向。this 指向由方法的第一个参数决定,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。
/* 正常模式 */ let obj = { sum(a, b) { console.LOG(this) return a + b } } // 执行 sum 函数的 apply、bind 方法,打印的 this 同下 obj.sum.call() // 打印 window obj.sum.call(undefined, 1, 2) // 打印 window obj.sum.call(null, 1, 2) // 打印 window /* 严格模式 */ 'use strict' // 执行 sum 函数的 apply、bind 方法,打印的 this 同下 obj.sum.call() // 打印 undefined obj.sum.call(undefined, 1, 2) // 打印 undefined obj.sum.call(null, 1, 2) // 打印 null
关键点:
myCall()
方法被添加在 Function 原型对象上,目标函数调用该方法时,myCall() 方法内部的 this 将指向目标函数。...
处理传入目标函数的参数call()、apply()、bind() 方法的模拟实现中,对于不传第一个参数或者传递 undefined、null 时,这里在 JS 正常模式和严格模式下做了统一处理,即目标函数内部的 this 均指向 window 对象。
代码如下:
Function.PRototyPE.myCall = function (context, ...args) { if (context === undefined || context === null) { context = window } // 下面这行为核心代码 context.fn = this const result = context.fn(...args) delete context.fn return result } let obj1 = { basicNum: 1, sum(a, b) { console.log(this) return this.basicNum + a + b } } let obj2 = { basicNum: 9 } console.log(obj1.sum.call(obj2, 2, 3)) // 14 console.log(obj1.sum.myCall(obj2, 2, 3)) // 14
调用 apply()
方法会立即执行目标函数,同时改变函数内部 this
的指向。this 指向由方法的第一个参数决定,第二个参数是一个参数数组或 arguments 对象,各数组元素或 arguments 对象表示的各参数将作为目标函数的参数一一对应传入。
关键点:
myApply()
方法被添加在 Function 原型对象上,目标函数调用该方法时,myApply() 方法内部的 this 将指向目标函数。...
处理传入目标函数的参数代码如下:
Function.prototype.myApply = function (context, args) { if (context === undefined || context === null) { context = window } // 下面这行为核心代码 context.fn = this const result = context.fn(...args) delete context.fn return result } console.log(obj1.sum.apply(obj2, [2, 3])) // 14 console.log(obj1.sum.myApply(obj2, [2, 3])) // 14
bind()
方法将返回一个新函数——目标函数的拷贝,该函数内部的 this
指向方法的第一个参数,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。之后执行新函数相当于执行了目标函数。bind()
方法实现了函数柯里化,因此可以分两次向目标函数传递参数,第一次的参数列举在 bind() 方法首参后面,第二次的参数列举在新函数中。关键点:
myBind()
方法被添加在 Function 原型对象上,目标函数调用该方法时,myBind() 方法内部的 this 将指向目标函数。 ...
处理传入目标函数的初始参数、后续参数。代码如下:
Function.prototype.myBind = function (context, ...inITArgs) { if (context === undefined || context === null) { context = window } // 缓存 this 值 const _this = this return function (...args) { // 下面这行为核心代码 context.fn = _this const result = context.fn(...initArgs, ...args) delete context.fn return result } } console.log(obj1.sum.bind(obj2, 2)(3)) // 14 console.log(obj1.sum.myBind(obj2, 2)(3)) // 14
三个方法的相同点与不同点:
相同点:
都能够改变目标函数执行时内部 this 的指向
方法的第一个参数用于指定函数执行时内部的 this 值
支持向目标函数传递任意个参数
若不向方法的第一个参数传值或者传递 undefined、null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined、null。
区别:
apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数。
apply() 方法向目标函数传递参数时只需将参数数组或 arguments 对象作为方法的第二个参数即可,而 call() 和 bind() 方法则需要将传参逐个列举在方法的一个参数后面。
调用 call() 和 apply() 方法时会立即执行目标函数,而 bind() 方法则不会,它将返回一个新函数——目标函数的拷贝,该函数内部的 this 指向 bind() 方法的第一个参数,之后执行新函数相当于执行了目标函数。
只有 bind() 方法实现了函数柯里化,因此可以分两次向目标函数传递参数。
以上就是JS 函数的 call、apply 及 bind 超详细方法的详细内容,更多关于JS 函数的 call、apply 及 bind 方法的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的JS 函数的 call、apply 及 bind 超详细方法全部内容,希望文章能够帮你解决JS 函数的 call、apply 及 bind 超详细方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。