50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试

techstay 发布于2019-08-26 10:44 / 2519人阅读

摘要：自己实现在函数原型上定义自己的方法实现自己的临时属性同理，只是传递的第二个参数是数组，这里我们只需要在调用时，将参数用把数组展开即可自己实现跟的本质区别，不会改变原函数的指向，只会返回一个新的函数我们想要的那个指向，并且不会调用。

在实现自己的call,apply,bind前，需要复习一下this.

所谓的this其实可以理解成一根指针：

其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象,这就是精髓。最关键所在

this的四种指向：

当this所在的函数被普通调用时，指向window，如果当前是严格模式，则指向undefined

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

test();
指向window 输出下面的代码：
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

严格模式
"use strict";
function test() {
  console.log(this);
};
test();
// undefined

当this所在当函数被以obj.fn()形式调用时，指向obj

var obj = {
  name: "segmentFault",
  foo: function() {
    console.log(this.name);
  }
}
obj.foo();
// "segmentFault"

还可以这么做

function test() {
  console.log(this.name);
}
var obj = {
  name: "qiutc",
  foo: test
}
obj.foo();
// "qiutc"

当call,apply加入后，this的指向被改变了

  function a(a,b,c) {
        console.log(this.name);
        console.log(a,b,c)
    }
    const b = {
        name: "segmentFault"
    }
    a.call(b,1,2,3)
    
    
    //输出 segmentFault和 1,2,3

    function a(a,b,c) {
        console.log(this.name);
        console.log(a,b,c)
    }

    a.apply(b,[1,2,3])
    //输出segmentFault和1,2,3

遇到bind后：

    function a() {
        console.log(this.name);
    }
    const b = {
        name: "segmentFault"
    }
    a.bind(b, 1, 2, 3)

此时控制台并没有代码输出，因为bind会重新生成并且返回一个函数，这个函数的this指向第一个参数

    function a() {
        console.log(this.name);
    }
    const b = {
        name: "segmentFault"
    }
    const c = a.bind(b, 1, 2, 3)
    c()
    //此时输出segmentFault

正式开始自己实现call :

在函数原型上定义自己的myCall方法：

 Function.prototype.myCall = function (context, ...arg) {
        const fn = Symbol("临时属性")
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

四行代码实现了简单的call，思路如下：

通过对象属性的方式调用函数，这个函数里面的this指向这个对象

每次调用新增一个symbol属性，调用完毕删除

这个symbol属性就是调用mycall方法的函数

函数形参中使用...arg是将多个形参都塞到一个数组里，在函数内部使用arg这个变量时，就是包含所有形参的数组

在调用 context[fn](...arg)时候，...arg是为了展开数组，依次传入参数调用函数

为了简化，今天都不做类型判断和错误边际处理，只把原理讲清楚。

自己实现apply

在函数原型上定义自己的myApply方法：

//实现自己的myApply
    Function.prototype.myApply = function (context, arg) {
        const fn = Symbol("临时属性")
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

    const obj2 = {
        a: 1
    }

    test.myApply(obj2, [2, 3, 4])

同理，只是apply传递的第二个参数是数组，这里我们只需要在调用时，将参数用...把数组展开即可

自己实现bind：

bind跟apply,call的本质区别，bind不会改变原函数的this指向，只会返回一个新的函数（我们想要的那个this指向），并且不会调用。但是apply和call会改变原函数的this指向并且直接调用

bind在编写框架源码，例如koa等中用得特别多：

 //实现自己的myBind
    Function.prototype.myBind = function (context, ...firstarg) {
        const that = this
        const bindFn = function (...secoundarg) {
            return that.myCall(context, ...firstarg, ...secoundarg)
        }
        bindFn.prototype = Object.create(that.prototype)
        return bindFn
    }

    var fnbind = test.myBind(obj, 2)
    fnbind(3)

同理自己定义好原型上的myBind方法
this劫持保留最初的调用mybind方法的那个对象
返回一个新的函数这个新的函数内部this指向已经确定，使用的是我们的mycall方法

学习需要循序渐进，建议根据本文顺序去封装一遍，是比较轻松的，当然bind还需要判断是否是new调用.

完整版本bind


Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存储源函数以及上方的params(函数参数)
    // 对返回的函数 secondParams 二次传参
    let fToBind = function (...secondParams) {
        console.log("secondParams",secondParams,...secondParams)
        const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用
        const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果
    };
    fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBind
    return fToBind; // 返回拷贝的函数
};

觉得写得不错可以给个star，欢迎加入我们的前端交流群～：

现在人数超过了100人，所以只能加我，然后拉你们进群！！

..]

GPU云服务器云服务器 JS中bind、call和apply的作 apply与call的区别 js中的call和apply php中级面试

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

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

50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试

摘要：自己实现在函数原型上定义自己的方法实现自己的临时属性同理，只是传递的第二个参数是数组，这里我们只需要在调用时，将参数用把数组展开即可自己实现跟的本质区别，不会改变原函数的指向，只会返回一个新的函数我们想要的那个指向，并且不会调用。 showImg(https://segmentfault.com/img/bVbwgfN?w=1308&h=972); 在实现自己的call,apply,b...

neuSnail 2019-08-30 15:44 评论0 收藏0
前端20个真正灵魂拷问，吃透这些你就是中级前端工程师【上篇】

摘要：还是老规矩，从易到难吧传统的定时器，异步编程等。分配对象时，先是在空间中进行分配。内存泄漏内存泄漏是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 网上参差不弃的面试题，本文由浅入深，让你在...

mdluo 2019-08-30 15:44 评论0 收藏0
前端20个真正灵魂拷问，吃透这些你就是中级前端工程师【上篇】

摘要：还是老规矩，从易到难吧传统的定时器，异步编程等。分配对象时，先是在空间中进行分配。内存泄漏内存泄漏是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 网上参差不弃的面试题，本文由浅入深，让你在...

leap_frog 2019-08-26 10:46 评论0 收藏0
「中高级前端面试」JavaScript手写代码无敌秘籍

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

Zhuxy 2019-05-23 16:26 评论0 收藏0
从一道面试题，到“我可能看了假源码”

摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...

Carson 2019-08-20 14:23 评论0 收藏0