手撕JavaScript call apply bind 函数

最新推荐文章于 2022-12-07 22:12:26 发布
最新推荐文章于 2022-12-07 22:12:26 发布
阅读量267 收藏 1
点赞数 2
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongkongyu/article/details/120877322
版权

call ，apply ，bind ，是 js中非常重要的三个函数原型上的方法，其作用都是改变this的指向：
在这里插入图片描述

call函数

call函数语法：

Fun.call(Obj[, para...]);

即第一个参数是this的指向，之后的参数都会作为实参传给新函数。

示例代码如下：

function Fn(para1, para2) {
    console.log(this.clothes);
    this.clothes = "nihao";
    console.log(this.clothes);
    console.log("para1:", para1, " para2:", para2);
}

const o = {
    clothes: "shirt"
};

Fn();
Fn.call(o, 5, "hello");
console.log(o.clothes);

在这里插入图片描述
对于Fn.call(o)，其处理实际上类似于下面这种方式，其底层的调用还是o.Fn()

const o = {
    clothes: "shirt",
    Fn() {
        ...
        ...
    }
}

然后我们就可以使用代码写出一个效果和call一样的方法：

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

const o = {
    clothes: "shirt"
};

Function.prototype.myCall = function (o, ...args) {
    // 防止调用myCall不传第一个参数而报错
    o = o || window;
    //  把Fn函数设置为o的方法
    o.Fn = this;
    // 调用函数
    let res = o.Fn(...args);
    // 不修改函数的原型对象
    delete o.Fn;
    // 原函数有返回值则call函数返回res，没有则仍返回undefind
    return res;
}

Fn.myCall(o, 1, 2, 3);

在这里插入图片描述

apply方法

apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变thi指向一次。

apply方法的使用如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Fn(a, b, c) {
            console.log(this.clothes, a, b, c);
        }

        const o = {
            clothes: "shirt"
        };

        Fn.apply(o, [12, 23, 34]);
    </script>
</body>

</html>

在这里插入图片描述

一个类似apply方法的实现如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Fn(a, b, c) {
            console.log(this.clothes, a, b, c);
        }

        const o = {
            clothes: "shirt"
        };

        Function.prototype.myApply = function (o, args) {
            o = o || window; // 防止调用myApply不传第一个参数而报错
            o.Fn = this; // 将原函数设置为o的方法
            const newArgs = [];
            let res = null;
            if (!args) {
                res = o.Fn();
            } else {
                for (let i = 0; i < args.length; i++) {
                    newArgs.push("args[" + i + "]");
                }
                // 调用函数，如果有返回值，则记录在res中
                res = eval("o.Fn(" + newArgs + ")");
            }
            // 不修改函数的原型对象
            delete o.Fn;
            // 原函数有返回值则call函数返回res，没有则仍返回undefind
            return res;
        }

        Fn.myApply(o, [1, 3, 5]);
    </script>
</body>

</html>

在这里插入图片描述

bind方法

bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)，但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。

bind的使用示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Fn(a, b, c) {
            console.log(this.clothes, a, b, c);
        }

        const o = {
            clothes: "shirt"
        };

        // 分次传参
        let temp = Fn.bind(o, 12);  // 不执行
        temp(23, 34);  // 执行
        // 立即执行
        Fn.bind(o, 45)(56, 67);
    </script>
</body>

</html>

在这里插入图片描述
bind类似功能的实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Fn(a, b, c) {
            console.log(this.clothes, a, b, c);
        }

        const o = {
            clothes: "shirt"
        };

        Function.prototype.mybind = function (o) {
            if (typeof this !== 'function') {
                throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
            }
            let aArgs = Array.prototype.slice.call(arguments, 1),
                fToBind = this,
                fNOP = function () {},
                fBound = function () {
                    // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
                    return fToBind.apply(this instanceof fBound ?
                        this :
                        o,
                        // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                        aArgs.concat(Array.prototype.slice.call(arguments)));
                };
            // 维护原型关系
            if (this.prototype) {
                // 当执行Function.prototype.bind()时, this为Function.prototype 
                // this.prototype(即Function.prototype.prototype)为undefined
                fNOP.prototype = this.prototype;
            }
            // 下行的代码使fBound.prototype是fNOP的实例,因此
            // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
            fBound.prototype = new fNOP();
            return fBound;
        };

        let temp = Fn.mybind(o, 12, 23);
        temp(34);
    </script>
</body>

</html>

在这里插入图片描述

call、apply、bind三者的区别

  • 三者都可以改变函数的this对象指向。
  • 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
  • 三者都可以传参，但是apply是数组，而call是参数列表
  • apply和call是一次性传入参数，而bind可以分为多次传入。
  • bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

为什么要修改this指向

在如下代码可以观察到，正常情况下 say 方法中的 this 是指向调用它的 obj 对象的，而定时器 setTimeout 中的 say 方法中的 this 是指向window对象的(在浏览器中)，这是因为 say 方法在定时器中是作为回调函数来执行的，因此回到主栈执行时是在全局执行上下文的环境中执行的，但我们需要的是 say 方法中 this 指向obj对象，因此我们需要修改 this 的指向。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var name = "张三";
        let obj = {
            name: "李四",
            say: function () {
                console.log(this.name);
            }
        };
        obj.say(); // 李四，this指向obj对象
        setTimeout(obj.say); // 张三，this指向window对象
    </script>
</body>

</html>

在这里插入图片描述
如果有兴趣了解更多相关知识，可以来我的个人网站看看：eyes++的个人空间

耶瞳
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript 学习--13】--深入理解JS bind函数中多参数问题
corner2030的博客
04-06 5422
首先来理解下bind的概念：bind()方法，用来创建一个函数的实例=（新函数），其新函数的this值会被绑定到给定bind()的第一个参数。 注意理解这个实例，将会是你理解bind的关键。你可以理解为新函数，也就是bind之后是生成一个新函数 例1：理解bind后的this指向。 var o = {color: 'blue'}; function sayColor() {aler...
Function.prototype.bind()的使用与实现
SCUhzs
09-16 2273
文章目录Function.prototypebind()的语法一些使用例子返回指定上下文的函数(创建绑定函数)内定参数（偏函数）在事件中使用bind闭合作用域（配合 `setTimeout`）作为构造函数使用的绑定函数快捷调用手动实现一个bind()参考资料 Function.prototype Function.prototype.apply() 在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。 Function.prototype.bind() bind()方法会创建一个
call ,apply和bind方法 详解
热门推荐
06-19 2万+
JavaScript 函数call、apply和bind的区别和用法详解
call()、apply()、bind() 区别、使用场景、实现方式
Lyrelion的博客
11-19 1983
call()、apply()、bind() 区别、使用场景、实现方式
call、apply、bind详细讲解
m0_60273757的博客
12-07 1499
call、apply、bind详细讲解,从小白的思维出发，更加好理解！
javascript中call,apply,bind函数用法示例
10-20
主要介绍了javascript中call,apply,bind函数用法,结合实例形式分析了call,apply,bind函数的功能、使用方法与相关注意事项,需要的朋友可以参考下
javascript中call apply 与 bind方法详解
10-22
网上文章虽多，大多复制粘贴，且晦涩难懂，我希望能够通过这篇文章，能够清晰的提升对apply、call、bind的认识，并通过一些具体的示例给大家展示下这3个方法的用法，希望大家能够喜欢。
javascript中apply/call和bind的使用
10-20
本文主要介绍了javascript中apply/call和bind的使用。具有很好的参考价值，下面跟着小编一起来看下吧
javascript中apply、call和bind的使用区别
10-22
下面小编就为大家带来一篇javascript中apply、call和bind的使用区别。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
「干货」细说 call、apply 以及 bind 的区别和用法
weixin_34240520的博客
01-27 262
前言 上一篇文章 《「前端面试题系列4」this 的原理以及用法》 中，提到了 call 和 apply。 它们最主要的作用，是改变 this 的指向。在平时的工作中，除了在写一些基础类，或者公用库方法的时候会用到它们，其他时候 call 和 apply 的应用场景并不多。 不过，突然遇到的时候，需要想一下才能转过弯来。所以今天，就让我们好好地探究一下，这两个方法的区别以及一些妙用。最后，还会介绍...
call、apply和bind
yangyalun的博客
09-30 4918
function test(){ console.log(this) } test();//打印window var t=new test()//打印test(){} 首先我们要明白上面这个this指向问题，普通函数调用，this指向window，而通过new来实例化一个构造函数的对象，则this指向函数。 1.call、apply和bind 的相同点和不同点 相同点：ca...
深入理解call、applay和bind
杨兴元的博客
05-02 3516
这三个方法都是用来改变某一个函数this关键字指向的 call 当前实例通过原型链的查找机制，找到Function.prototype上的call方法 =》function call() { [native code] } fn.call(): 把找到的call方法执行 当call方法执行的时候，内部处理的事情 => 首先把操作函数中的this绑定为第一个参数 => 把call方法第...
javascript中bind()函数实现和应用以及多次bind的结果和参数位置的思考
learninginJAVA的专栏
10-05 2382
概述 在ECMA-262第五版引入了bind()方法，该方法创建一个新函数。 语法 fn.bind(context[, arg1[, arg2[, ...]]])第一个参数context将成为返回的新函数的this对象 第二个及以后的参数加上绑定函数运行时本身的参数按照顺序，将作为新函数的擦书 实现原理 Function.prototype.bind = function (conte
js bind 传参、_齐齐怪同学关于Vue.js的一些心得，推荐一下
weixin_39869791的博客
11-20 62
-----聊摄影 谈技术 不老的攻城狮-----v-cloak v-text v-html和插值表达式的区别与特点使用插值表达式会有闪烁问题　　设置v-cloak类中的display为none来解决闪烁问题　　使用插值表达式可以在前后添加内容，v-text会覆盖标签内容　　使用v-text没有闪烁问题　　使用v-html来添加带有html标签的内容，同时也会覆盖原标签的内容　v-bi...
javascript中bind()函数实现和应用以及多次bind的结果的思考
包磊磊的博客
02-22 798
一. 概述 在ECMA-262第五版引入了bind()方法，该方法创建一个新函数。 二. 语法 fn.bind(context[, arg1[, arg2[, ...]]]) 1 第一个参数context将成为返回的新函数的this对象 第二个及以后的参数加上返回的新函数的参数，将作为新函数的参数 三.bind的简单实现原理 if (!Function.prototyp...
bind、call、apply 区别
weixin_40856652的博客
04-20 2万+
一、bind、call、apply的作用 关于call、apply、bind函数，它们主要用来改变this指向的，在很多框架中常有用到，而且也是面试官喜欢问到的问题：多数会问道三者的区别， 以及手动实现它们。 call的用法 fn.call(thisArg, arg1, arg2, arg3, ...) 调用fn.call时会将fn中的this指向修改为传入的第一个参数thisArg；将后面的参数传入给fn,并立即执行函数fn。 let obj = { name: "xiaoming",
手撕JS call、apply、bind方法
03-07 462
手撕JS call、apply、bind方法 在js中call、apply、bind方法都是用来改变this指针的指向的，也是前端面试手撕代码的一个考点，拼多多笔试就考了bind的源码实现，现在给大家列出这三种方法JS实现 1.call方法 call方法的第一个参数也是this的指向，后面传入的是一个参数列表,改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次 function fn(...args){ console.log(this,args); } let obj =
js中call和apply,bind的区别
m0_50665842的博客
12-07 251
js中call和apply,bind的区别
JavaScript之手撕call、apply
战场小包的博客
10-02 1937
前言 call/apply的核心理念就是借用方法。 这话乍一听上去，感觉有点云里雾里。讲一个生活中的实例来描述一下： 老邓和老王是邻居，老邓家有火锅，老王家有烧烤架。老王家很少吃火锅，但突然有一天想吃火锅，他就可以去老邓家借用火锅，这样老王家不仅吃上了火锅，还没花买锅的钱。同样如果有一天老邓家想吃烧烤，便可以去老王家借烧烤架。 call/apply做的便是类似的事，A对象上实现了一个方法，B对象由于一些需求，也需要调用同样的方法，最好的方法肯定是B直接去调用A对象的方法，自身无需扩展。 基本介绍 语法： f
call apply bind
最新发布
07-11
js中的apply、call、bind是三个函数方法，都可以用来改变函数的this指向。 apply和call的作用是一样的，都是改变函数的this指向，并且立即执行该函数。区别在于传入参数的方式不同，apply接收一个数组作为参数，而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值