JS 手写实现call,apply方法

简介: JS 手写实现call,apply方法

大概思路就是将 你要调用的方法  添加为对象里面的属性方法,这样就改变了方法里面的htis指向obj,然后调用该对象里面的方法,调用完成后,再将对象里面的此方法删除delete,将调用的结果返回。

  // 手写实现call方法,改变this指向
            const obj = {
                name: 'zs',
            };
            const person = {
                add(a, b, c) {
                    console.log(a, b, c);
                    return this.name;
                },
            };
            Function.prototype.myCall = function (context) {
                if (typeof this !== 'function') {
                    throw new Error('error');
                }
                // 获取到除了除了context的其他参数,args为一个数组
                let args = [...arguments].slice(1);
                // 如果没有传递参数,则默认this指向为window
                context = context || window;
                // 在对象obj中添加 你要所有改变this指向的方法,相当于在对象obj中添加了一个方法
                context.fn = this;
                // 然后执行该对象里面的方法,此时this为当前的对象obj,则会打印出'zs'
                let result = context.fn(...args);
                // 再将该方法从对象obj里面删除
                delete context.fn;
                // 将函数运行的结果返回回去
                return result;
            };
            console.log(person.add.myCall(obj, 1, 2, 3));

运行结果如下

目录
相关文章
|
1天前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
|
2天前
|
存储 JavaScript 前端开发
javascript中字符串处理,常用的方法汇总
javascript中字符串处理,常用的方法汇总
|
2天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
2天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
2天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法
|
2天前
|
前端开发 JavaScript
【Web 前端】JS继承的方法有哪些?
【4月更文挑战第22天】【Web 前端】JS继承的方法有哪些?
|
3天前
|
JavaScript 前端开发
关于javascript中call(),apply(),bind()的介绍,初步
关于javascript中call(),apply(),bind()的介绍,初步
|
5天前
|
JavaScript 前端开发
js操作字符串的相关方法
js操作字符串的相关方法
9 3
|
5天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
15 4
|
5天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。