本篇内容介绍了“JS中call、apply和bind函数手写实现demo的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
JavaScript 中的函数是一等公民,可以像普通变量一样被传递和使用。这种灵活性使得函数可以被用于各种场景,比如对象方法的调用、构造函数的创建和原型继承等。在函数的使用过程中,call
、apply
、bind
是 JavaScript 中比较常用的一些方法,它们可以改变函数执行的上下文,同时还能传递参数。
call
方法用于调用一个函数,并且可以设置函数内部的 this
值。它可以让你将一个函数的 this
对象指向任意一个对象,并且传入任意个数的参数。
下面是 call
方法的基本语法:
function.call(thisArg, arg1, arg2, ...)
其中:
function
:要调用的函数。
thisArg
:设置 function
函数中的 this
对象的值。
arg1
、arg2
、...
:传递给 function
函数的参数,可以有多个。
下面是一个简单的示例:
const person = { name: 'Zhang San', sayHi() { console.log(`Hi, my name is ${this.name}.`); }, }; person.sayHi(); // 输出 "Hi, my name is Zhang San." const otherPerson = { name: 'Zhang San', }; person.sayHi.call(otherPerson); // 输出 "Hi, my name is Zhang San."
在上面的例子中,我们创建了一个 person
对象,它有一个 sayHi
方法,用于输出自我介绍。我们使用 call
方法将 person
对象的 sayHi
方法绑定到 otherPerson
对象上,并且输出了 otherPerson
对象的名字。
接下来,我们将手动模拟实现 call
方法,实现一个名为 myCall
的函数。
Function.prototype.myCall = function(context, ...args) { context = context || window; context.fn = this; const result = context.fn(...args); delete context.fn; return result; };
上面的代码中,我们给 Function.prototype
添加了一个新的方法 myCall
。该方法接收两个参数,第一个参数 context
表示要绑定的 this
值,第二个参数 args
表示要传递给函数的参数列表。如果第一个参数 context
为空,则默认绑定到全局对象 window
上。
接着,我们在绑定的对象 context
上添加了一个 fn
属性,并且将当前函数绑定到该属性上,接着调用该函数,并将结果保存到 result
变量中。
最后,我们删除 context
对象上的 fn
属性,并将结果返回。这样,我们就成功地手动模拟实现 call
方法。
apply
函数的语法为:function.apply(thisArg, [argsArray])
,其中 thisArg
表示函数执行时的上下文对象,也就是函数中的 this
关键字所指向的对象,argsArray
是一个数组,表示函数执行时传递的参数列表。
实现步骤
声明一个函数,以便在之后使用 apply
函数。
function sum(a, b) { return a + b; }
然后我们现在需要为函数 sum
添加 apply
方法,该方法接受两个参数:上下文对象 thisArg
和参数数组 argsArray
。
Function.prototype.apply = function(thisArg, argsArray) { // 代码实现 };
在 apply
函数中,第一个参数 thisArg
表示要调用函数的上下文对象。如果没有传递 thisArg
,那么默认为全局对象 window
。
Function.prototype.apply = function(thisArg, argsArray) { thisArg = thisArg || window; };
我们需要在函数执行时将函数中的 this
关键字指向上下文对象 thisArg
,从而改变函数的上下文对象。
Function.prototype.apply = function(thisArg, argsArray) { thisArg = thisArg || window; let fn = Symbol('fn'); thisArg[fn] = this; let result = thisArg[fn](...argsArray); delete thisArg[fn]; return result; };
在上述代码中,我们使用了一个新的 Symbol
类型的变量 fn
,用于存储函数对象。然后我们将函数对象存储在上下文对象 thisArg
中,并立即执行该函数,从而改变函数的上下文对象。最后,我们删除存储在上下文对象中的函数对象,并返回函数执行的结果。
下面是完整的 apply
函数的代码实现:
function sum(a, b) { return a + b; } Function.prototype.apply = function(thisArg, argsArray) { thisArg = thisArg || window; let fn = Symbol('fn'); thisArg[fn] = this; let result = thisArg[fn](...argsArray); delete thisArg[fn]; return result; }; console.log(sum.apply(null, [1, 2])); // 输出:3
bind
函数也是对函数的this指向进行修改的函数,不同于 call
和 apply
函数的立即执行,bind
函数返回一个新的函数,这个新的函数可以在后续调用时再传入参数并执行。bind
函数的实现可以通过在返回的新函数中使用闭包来保存传入的 this
值,并返回一个新函数。
bind
函数的语法如下:
function.bind(thisArg[, arg1[, arg2[, ...]]])
其中,thisArg
为需要绑定的 this
值,arg1
, arg2
等为新函数的参数。bind
函数返回一个新函数,这个新函数的 this
值被绑定为传入的 thisArg
值,同时可以传入额外的参数作为新函数的参数。当调用返回的新函数时,会以传入的参数和之前绑定的 this
值作为参数调用原函数。
下面是一个手动实现的 bind
函数:
Function.prototype.bind2 = function(thisArg) { var self = this; var args = Array.prototype.slice.call(arguments, 1); return function() { var bindArgs = Array.prototype.slice.call(arguments); return self.apply(thisArg, args.concat(bindArgs)); }; }
在实现中,先保存 this
的指向,然后将传入的参数放到 args
数组中。接下来返回一个新的函数,这个新的函数会保存 bind2
函数中的 this
值和 args
数组中的参数。在新函数被调用时,会将之前保存的 this
值和 args
数组中的参数与新传入的参数合并为一个数组,并调用原函数的 apply
方法传入这个数组作为参数,以达到修改 this
值和传入参数的目的。
“JS中call、apply和bind函数手写实现demo的方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。