js实现call,apply,bind

╰半橙微兮° 2022-11-12 05:22 131阅读 0赞

*  第一步我们先在Function的原型上面新建一个函数吧.叫myApply

const obj = {
        name:'joy',
    };
    
    function getName() {
        console.log(this.name);
    }
    
    Function.prototype.newApply= function () {
        console.log(this);
    };
    
    getName.newApply(); //ƒ getName(){ console.log(this.name); }

这时候打印出来,this是getName这个函数.  
根据我之前写过的一篇文章 [(确定this的指向)][this]  
得知,this绑定的优先级是

> 箭头函数 > new > 显式 > 隐式 > 默认绑定

call,apply是属于显示绑定,那肯定不能用箭头函数和new来代替了,否则优先级就改变了,那就只能用隐式绑定的方式了

*  所以我们要用隐式绑定的方式去改变this的指向

const obj = {
        name:'joy'
    };
    
    function getName(){
        console.log(this.name);
    }
    
    Function.prototype.newApply= function (that) {
        that.myFn = this;
        const result = that.myFn();
        return result
    };
    
    getName.newApply(obj); //joy

这里已经是初步完成了改变this指向的功能了,让我们在来完善一下

*  加上传递参数和不传this调用

const obj = {
        name:'joy'
    };
    
    function getName(a,b){
        console.log(this.name,a,b);
    }
    
    Function.prototype.newApply = function (that,arg) {
        if(typeof this !== 'function'){
            throw this+'is not a function'
        }
        that = that || window; //因为第一个参数如果不传就会绑定到window上面
        arg = arg || [];
        that.myFn = this;
        const result = that.myFn(...arg); //解构赋值把参数传进来,先把结果存起来
        delete that.myFn; //再删除,否则就有副作用了
        return result;
    };
    
    getName.newApply(obj,[1,2]); // joy

*  这样一个apply就完成了,可能还有些地方没考虑到,但是大概功能都出来了,call也是差不多就是传参不太一样

const obj = {
        name:'joy'
    };
    
    function getName(a,b){
        console.log(this.name,a,b);
    }
    
      Function.prototype.newCall = function (that, ...arg) {
                if (typeof this !== 'function') {
                    throw this + 'is not a function'
                }
                that = that || window; //因为第一个参数如果不传就会绑定到window上面
                that.myFn = this;
                const result = that.myFn(...arg); //解构赋值把参数传进来,先把结果存起来
                delete that.myFn; //再删除,否则就有副作用了
                return result;
            };
    
            getName.newApply(obj, 1, 2); // joy 1 2

以上就是apply和call自己实现的方式了.

*  接下来到一个难点bind了,bind有点不一样,call和apply是绑定直接调用,而bind是绑定不调用,返回绑定后的函数
 *  那么直接利用apply不就可以了

const obj = {
            name:'joy'
        };
    
        function getName(){
            console.log(this.name);
        }
    
        Function.prototype.newBind = function (that) {
            const fn = this;
            return function () {
                fn.apply(that)
            }
        };
    
        getName.newBind(obj)() //joy

*  再优化一下

const obj = {
            name:'joy'
        };
    
        function getName(){
            console.log(this.name);
        }
    
        Function.prototype.newBind = function (that) {
            if (typeof this !== 'function') {
                throw new TypeError('Error')
            }
            const args = [...arguments].slice(1);
            const fn = this;
            return function () {
                fn.apply(that)
            };
            // 返回一个函数
            return function F() {
                // 因为返回了一个函数,如果是new的话this就要指向新创建的对象了
                if (this instanceof F) {
                    return new fn(...args, ...arguments)
                }
                return fn.apply(that, args.concat(...arguments))
            }
        };
    
        getName.newBind(obj)() //joy

以上就是实现call,apply,bind的内容了

作者：土豪码农  
链接：https://www.jianshu.com/p/5afd6674f352  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[this]: https://www.jianshu.com/p/66eb9b21105d

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现定时器

JS实现定时器有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2] [获取

迷南。/ 2024年03月31日 15:27/ 0 赞/ 33 阅读

相关 js实现相加的数 js实现数据的循环

<input type="text" id="in1" value=""/>+ <input type="text" id="in2" value=""/>

￡神魔★判官ぃ/ 2024年03月22日 17:14/ 0 赞/ 41 阅读

相关【js】纯js实现复制粘贴

结果图展示： ![20190926104907767.gif][] 代码展示：（可直接拿着运行） <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2023年08月17日 15:23/ 0 赞/ 94 阅读

相关 js实现instanceof

`instanceof` 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 `prototype`。 function instanc

桃扇骨/ 2023年01月22日 10:58/ 0 赞/ 45 阅读

相关 JS实现栈

![3eb3575b0b466d46b860b1f0e02be4bd.png][] 栈是一种先进后出的特殊线性表结构 function ArrayStack(

刺骨的言语ヽ痛彻心扉/ 2022年11月04日 01:31/ 0 赞/ 121 阅读

相关 JS实现 EventBus

JS实现 EventBus ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETi

ゞ浴缸里的玫瑰/ 2022年09月09日 00:26/ 0 赞/ 144 阅读

相关 js 实现map

//map的JS实现 this.map = function(){ var map = { put: function(key, v

Bertha 。/ 2022年08月21日 13:50/ 0 赞/ 124 阅读

相关 JS 实现Map

function Map() { this.arr = new Array(); var struct = function(key, valu

阳光穿透心脏的1/2处/ 2022年08月13日 09:29/ 0 赞/ 111 阅读

相关 js实现sleep

1.这种不是匀速, 写到for循环中出现1,2,3.......456....的情况 function sleep(milliseconds) { v

本是古典何须时尚/ 2022年01月06日 15:47/ 0 赞/ 180 阅读

相关 js实现剪切

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

曾经终败给现在/ 2021年09月02日 05:24/ 0 赞/ 236 阅读