javascript的call apply和new原理剖析 [手写]

mindwind 发布于2019-08-23 15:27 / 885人阅读

摘要：今天公司没那么忙闲来无事就手动实现下的和的原理吧本篇不长废话不多分为步手写方法手写方法手写方法我们知道可以改变指向，同时也可以传递参数。即的第一个参数为改变后的，剩余参数则是正常的函数参数。并且，调用和后相当于改变并立马执行函数。

今天公司没那么忙闲来无事就手动实现下js的call,apply和new的原理吧～
本篇不长废话不多分为3步：

手写call方法

手写apply方法

手写new方法

我们知道 call可以改变this指向，同时也可以传递参数。即 call的第一个参数为改变后的this，剩余参数则是正常的函数参数。并且，调用call和apply后相当于改变this并立马执行函数。ok，上代码～

let str = "str";

let obj = {
    name:"123"
};

function fn(){
    console.log(this);
}

fn.call(str); // 打印 String {"str"}
fn.call(obj); // 打印 {name: "123"}

手写call方法

注意观看顺序1,2,3,4,5...

/* Function原型上拓展call方法*/

Function.prototype.myCall = function(context){
    /** 1 如果没传上下文conntext 就取window为this 
     * 此处Object() 主要考虑到如果是String类型
    */
    context = context?Object(context):window;
    /** 2 改变this指向
     * this就是原函数 */
    context.fn = this;
    /** 3 取参数 注意从第二个开始取
     * 因为第一个参数是上下文context 也就是this
    */
    let args = [];
    for(let i = 1; i < arguments.length; i++){
        /** 4 这里传递的上字符串 因为待会要配合eval()使用 */
        args.push("arguments["+ i +"]");
    }
    /** 5 把参数传递进去 eval()方法可以让字符串执行 */
    let r = eval("context.fn("+ args +")");
    /** 6 删除原context.fn */
    delete context.fn;
    /** 7 返回r */
    return r;
}


let str = "str";

let obj = {
    name:"123"
};

function fn(){
    console.log(this);
}

fn.myCall(str); // 打印 String {"str"}
fn.myCall(obj); // 打印 {name: "123"}

云服务器 GPU云服务器 js中的call和apply JS中bind、call和apply的作 apply与call的区别 javascript call

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

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

「中高级前端面试」JavaScript手写代码无敌秘籍

摘要：第一种直接调用避免在不必要的情况下使用，是一个危险的函数，他执行的代码拥有着执行者的权利。来自于此外，实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航实现一个new操作符实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承实现一个J...

Zhuxy 2019-05-23 16:26 评论0 收藏0
22道JavaScript高频手写面试题

JavaScript笔试部分点击关注本公众号获取文档最新更新,并可以领取配套于本指南的《前端面试手册》以及最标准的简历模板. 实现防抖函数（debounce）防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。那么与节流函数的区别直接看这个动画实现即可。 showImg(https://segmentfault.com/img/remote/146000002...

Alan 2019-08-26 10:44 评论0 收藏0
手写JavaScript中的bind方法

摘要：如果绑定后的函数被了，那么此时指向就发生改变。构造函数上的属性和方法，每个实例上都有。接下来声明一个函数，在该中获取了第二次传的参数，并且返回了的执行。的又等于的实例。至此，就实现了自己的方法。之前已经实现过了call，apply和new。今天顺便把bind也实现下。首先： bind方法返回的是一个绑定this后的函数，并且该函数并没有执行，需要手动去调用。(从这一点看bind函数...

AZmake 2019-08-26 13:35 评论0 收藏0
手写call、apply、bind函数

摘要：函数特点可以改变我们当前函数的指向还会让当前函数执行题目自测思路解析执行传入三个参数函数内部执行传入三个参数函数内部执行 call函数特点： 1)可以改变我们当前函数的this指向 2）还会让当前函数执行 Function.prototype.call = function (context) { if (typeof this !== function) { thro...

gecko23 2019-05-23 13:55 评论0 收藏0
学习JavaScript之this,call,apply

摘要：在全局对象中调用，自然读取的是全局对象的值构造器调用说明作为构造器调用时，指向返回的这个对象。最直观的表现就是，去看一些优秀框架的源代码时，不再是被绕的晕乎乎的。学习起因：在之前的JavaScript学习中，this,call,apply总是让我感到迷惑，但是他们的运用又非常的广泛。遂专门花了一天，来弄懂JavaScript的this,call,apply。中途参考的书籍也很多，以...

wenhai.he 2019-08-19 17:30 评论0 收藏0