JavaScript手写call,apply,bind方法

简介: JavaScript手写call,apply,bind方法

改变this指向在书写业务的时候经常遇到,我们经常采用以下方法进行改写

  1. 使用作用声明变量存储this
  2. 使用jJavaScript的原生方法call,apply,以及bind进行改写

第一种方法就不说了,就是一个变量存储的问题,主要说第二种如何实现的

call,bind,apply方法都是JavaScript原生的方法,挂载在Function原型上,使得所有函数都可以调用,今天我们来实现一下call,apply,bind吧

改写this实现思路


我们声明一个函数,函数接受俩个参数,第一个参数是接受改变的this指向,第二个是剩余参数,用于执行改变方法后传递的使用参数,在函数中里面声明一个变量用于存储传递过来的this,遵循this指向的准则,this是在执行的时候生成的,函数的准则是谁调用它就指向谁,传递过来的this是一个对象,然后在传递过来的this上面声明一个方法,声明的方法就是当前函数,该方法由传递过来的this进行调用执行,这样就改变了this指向问题,在把传递过来的参数除第一个外全部传递给声明的方法,我们来实现一下

前期准备


这些数据用于配合手写的方法,由于call,bind,apply他们都是需要把他们挂载到函数原型上,函数才能调用的到,我们这里也把他挂载到原型上

var name = '前端';
        var age = "7";
        let obj = {
            name: '若水',
            age: '20'
        };
 function fnLog(arg) {
     let str = `我叫${this.name}今年${this.age}岁了`;
  console.log(str, '传递过来的', arg);
}

手写的call,bind,apply方法第一个参数都是改变的this指向,第二个参数是传递的参数

手写call方法


call方法是改变this后立即执行

Function.prototype.myCall = function(content, ...arg) {
            // 创建一个变量接受改变的this,如果改变的this为空则采用window为默认this
            let newThis = content || window;
            /**newThis是一个对象,它是传递过来的this,在newThis上新增一个方法,这个方法就是
            当前函数 ,this就是指向的myCall,调用这个方法就可以改变this指向,因为函数是谁调用
            它this就指向谁 
            **/
            newThis.fn = this;
           /**执行改变this方法,接受返回值,这里容易被误导,这里是把myCall传递过来的参数传递
            给了改变this的函数,由于不确定传递多少使用了剩余参数,这里也是 **/
            let result = newThis.fn(...arg);
            //删除传递过来this上声明的方法,防止出现问题
            delete newThis.fn;
            // 将执行结果返回
            return result;
        };
        //执行手写的call方法
        fnLog.myCall(obj, 'myCall');

手写apply方法


apply传递的参数只能传递数组

//如果arg没有传递参数,默认为空数组
      Function.prototype.myApply = function(content, arg = []) {
            // 判断传递参数是否为数组,如果不为数组则抛出错误,为数组则继续执行
            if (!Array.isArray(arg)) {
                throw '传递参数必须为数组';
            }
            // 创建一个变量接受改变的this,如果改变的this为空则采用window为默认this
            let newThis = content || window;
            // 给当前传递过来的this,添加一个方法,遵循this准则,谁调用就指向谁的原则
            newThis.fn = this;
            // 同mycall相同
            let result = newThis.fn(arg);
           //删除传递过来this上声明的方法,防止出现问题
            delete newThis.fn;
            // 将执行结果返回
            return result;
        };
        //执行
        fnLog.myApply(obj, [1, 212, 232]);

手写bind方法


bind不是立即执行而是返回一个新的函数

Function.prototype.myBind = function(content, ...arg) {
            // 创建一个变量接受改变的this,如果改变的this为空则采用window为默认this
            let newThis = content || window;
        // 给当前传递过来的this,添加一个方法,遵循this准则,谁调用就指向谁的原则
            newThis.fn = this;
 // 由于bind不是立即执行,是返回一个函数作为bind方法执行的返回值,所以这里需要return出去一个函数
            return function() {
   // 然后在把执行当前的方法进行执行并把myBind接受剩余参数传递过去,接受返回值
                let result = newThis.fn(...arg);
                //删除当前的函数以及传递过来的this,防止出现问题
                delete newThis.fn;
                // 将执行结果返回
                return result;
            }
        };
       //调用bind函数,获取返回值,他的返回值是一个函数,所以我们需要在调用一下
        let f1 = fnLog.myBind(obj, 2);
        //调用bind的返回值
        f1()

祝大家每天开开心的,坚持努力,无惧未来!

相关文章
|
22天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
20天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
116 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
21天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
22天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
25 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
38 7
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。