201908-前端笔记-手动实现apply和call、bind

Betta 发布于2019-08-26 14:05 / 2894人阅读

摘要：删除方法，返回。处理参数，返回一个闭包判断是否为构造函数调用，如果是则调用调用当前函数如果不是，则用，将和参数传入参考

apply

Function.prototype.myApply = function(context,args){
    // 如果是调用自己，则返回undefined
    if(this===Function.prototype) return false;
    
    context=context || window;

    var fn = Symbol(),
    result;
    
    context[fn]=this;
    
    if(Array.isarray(args)){
        result = context[fn](...args);
    }else{
        result = context[fn]();
    }
    
    delete context[fn];
    return result;
}

1.如果是调用自己，则返回undefined
2.判断context是否存在，不存在则调用window
3.新增一个Symbol属性，赋值给context
4.将当前函数赋值给这个属性
5.判断传参是否数组
6.如果是，则将其余的参数传入执行方法。如果否，则直接调用方法。
7.删除方法，返回。

call

Function.prototype.myCall= function(context=window,...args){
    if(this === Function.prototype) return undefined;
    
    context= context || window
    
    var fn = Symbol(),
    result;
    
    context[fn] = this;
    
    result = context[fn](...args)
    delete context[fn]
    return result;
}

1.如果是调用自己，则返回undefined
2.判断context是否存在，不存在则调用window
3.新增一个Symbol属性，赋值给context
4.将当前函数赋值给这个属性
5.将其余的参数传入执行方法
6.删除方法，返回。

bind

Function.prototype.myBind = function(context=window,...args){
    if(this === Function.prototype) return undefined;
    
    const _this = this ;
    
    return function F(...args2){
        if(this instanceof F){
            return new _this(...args,...args2)
        }
        _this.apply(context,args.concat(...args2))
    }
}

1.处理参数，返回一个闭包
2.判断是否为构造函数调用，如果是则调用new调用当前函数
3.如果不是，则用apply，将context和args参数传入

参考

GPU云服务器云服务器 JS中bind、call和apply的作 js中的call和apply apply与call的区别 linux和redis笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110017.html

Javascript中this与闭包学习笔记

摘要：但是在调用函数值执行之后并没有达到我们想要的效果。解析在这里我们为每一个的事件绑定了一个匿名函数，这个匿名函数就形成了一个闭包。这样我们就为每个的事件的匿名函数，都保存下了自己闭包变量。博客原址理解 Javascript中的this 基于不同的调用方式this的指向也会有所不同，调用方式大致有如下几种：调用方式表达式构造函数调用 new Foo(); 对象方法...

pinecone 2019-08-22 10:34 评论0 收藏0
【进阶3-1期】JavaScript深入之史上最全--5种this绑定全面解析

摘要：在严格模式下调用函数则不影响默认绑定。回调函数丢失绑定是非常常见的。因为直接指定的绑定对象，称之为显示绑定。调用时强制把的绑定到上显示绑定无法解决丢失绑定问题。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第三期，本周的主题是this全面解析，今天是第9天。本计划一共28期，每期重点攻克一个面试重...

xavier 2019-08-23 13:47 评论0 收藏0
JavaScript MVC 学习笔记（四）类的使用(下)

摘要：基于函数进行调用的，用来确保函数是在指定的值所在的上下文中调用的。添加私有函数目前上面为类库添加的属性都是公开的，可以被随时修改。以基于的富应用开发为主要学习资料。控制类库的作用域在类和实例中都添加proxy函数，可以在事件处理程序之外处理函数的时候保持类的作用域。下面是不用proxy的办法： var Class = function(parent){ var klas...

Rango 2019-08-21 10:25 评论0 收藏0
【前端工程师手册】JavaScript之this的笔记

摘要：函数别名是全局对象的属性显式绑定一个小栗子和第一个参数是一个对象，它们会把这个对象绑定到，接着在调用函数时指定这个。今天总结一下this。误解熟悉Java或者其他语言的同学看到this会想当然的认为this指向函数本身，然而在JavaScript中并不是这样子。 function func(){ console.log(this.index) } func.index ...

roland_reed 2019-08-22 17:32 评论0 收藏0
JS学习笔记 - 代码复用

摘要：本文章记录本人在学习中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。但是在开发的过程中，并不是所有的代码复用都会使用到继承。而且整个代码都无法按照预期来运行。为了修复绑定对象与方法之间的关系。本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。 js 中复用代码说道代码复用，一般都会涉及到对...

cheng10 2019-08-21 10:35 评论0 收藏0