手动实现 JavaScript 之 apply、call、bind

绝地灬酷狼 2022-09-04 10:53 134阅读 0赞

JavaScript 的 apply、call和bind方法用来更改函数内部的this指向，从而达到借调方法的目的，应用场景非常广泛。现在我们手动实现这几个方法，加深对原型和函数的理解。

#### Function.prototype.apply ####

> **apply 可以传入两个参数，第一个是函数的this，另外一个是函数的参数，类型是数组**

Function.prototype.applyFn = function(context) { 
       // 如果context不存在则为window
       context = context || window;
       // 将函数赋值给 context
       context.fn = this
       // 取第二个参数
       var args = arguments[1] || [];
       // 执行这个函数
       var result = context.fn(...args);
       // 移除 fn
       delete context.fn;
       // 返回结果
       return result;
    }

#### Function.prototype.call ####

> **call 与 apply 唯一的区别是 call 可以传多个参数**

Function.prototype.callFn = function(context, ...args) { 
       // 直接利用 applyFn 来实现 call
      return this.applyFn(context, args);
    }

#### Function.prototype.bind ####

> **bind 传参和 call 一样，区别是 bind 返回的是一个函数**

Function.prototype.bindFn = function(context, ...args){ 
      var that = this
       // 直接利用 applyFn 来实现 bind
      return function(...inArgs) { 
        return that.applyFn(context, [...args, ...inArgs])
      }
    }

希望对大家有所帮助。

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关手动实现Promise.all

想要实现Promise.all()功能，关键点 / 1、接受一个数组作为参数，或者具有 Iterator 接口的参数 2、参数支持Promise对

短命女/ 2022年12月29日 12:55/ 0 赞/ 157 阅读

相关手动实现一个promise

> 1. Promise的参数是一个函数，这个函数有2个参数，分别是resolve 和reject > 2. Promise的状态一开始是pending，满足某些条件是，状

忘是亡心i/ 2022年12月06日 04:10/ 0 赞/ 132 阅读

相关手动实现 JavaScript 之 apply、call、bind

JavaScript 的 apply、call和bind方法用来更改函数内部的this指向，从而达到借调方法的目的，应用场景非常广泛。现在我们手动实现这几个方法，加深对原型和函

绝地灬酷狼/ 2022年09月04日 10:53/ 0 赞/ 135 阅读

相关手动实现Spring Aop

Aop，百度百科的解释：在软件业，AOP为Aspect Oriented Programming的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护

本是古典何须时尚/ 2022年07月11日 09:27/ 0 赞/ 182 阅读

相关 javascript实现一个简单的图片轮播和手动播放

<!DOCTYPE html> //还有许多地方有待改善 <html> <head> <meta charset="UTF-8"

蔚落/ 2022年05月26日 04:18/ 0 赞/ 168 阅读

相关原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

曾经终败给现在/ 2022年05月20日 10:26/ 0 赞/ 261 阅读

相关 Spring之手动实现Autowired（自动装配）Bean

本文核心在于配置XML实现手动装配Bean。一、文件目录如下我的文件是包与包之间互不影响的效果。 ![20190428090120645.png][] Ad

偏执的太偏执、/ 2022年02月13日 13:56/ 0 赞/ 485 阅读

相关手动实现快排

ps：基于比较的排序算法最快就是nlgn的时间复杂度快排的主要思想就是找到一个key值比他大的放右边比他小的放在左边然后对该key值左边和右边同时进行该操作，即

曾经终败给现在/ 2022年02月04日 12:43/ 0 赞/ 295 阅读

相关手动实现tomcat功能

Tomcat服务器是一个[免费][Link 1]的[开放源代码][Link 2]的[Web][]应用服务器。Tomcat是[Apache][][软件][Link 3]基金会（A

╰+哭是因爲堅強的太久メ/ 2022年01月28日 04:29/ 0 赞/ 183 阅读

相关 JS基础之手动实现简易jQuery api

今天主要实现以下两个api： 1. addClass：给指定标签增加class 2. setText:给指定标签设置文本内容(textContent) 第一版第

喜欢ヅ旅行/ 2022年01月21日 08:23/ 0 赞/ 207 阅读