call apply bind 区别与联系

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量520 收藏 4
点赞数
分类专栏： JS初学笔记 JS面试题 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47075145/article/details/126415998
版权

目录

1.共同点：功能一致

2.区别：

1. call,apply 可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。

1.通过call 修改this指向  立即执行

 2.通过apply修改this指向   立即执行

 3.通过bind修改this指向  不会立即执行

 2：参数不同：第一个参数都是this新的指向对象。第二个参数，apply第二个参数是数组。call和bind有多个参数就需要挨个写。

1.call 有多个参数就需要挨个写

 2.bind 有多个参数就需要挨个写

 3.apply第二个参数是数组

3.使用场景

1.apply使用场景

2.bind 使用场景

3.call使用场景(除开apply,bind才能使用的场景)

1.共同点：功能一致

可以改变函数体内的this指向。

语法：函数.call()      函数.apply()         函数.bind()

2.区别：

1. call,apply 可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(){
            console.log(this,this.str);
        }
        fun();
    </script>

分析：易知道，这里的this指向window,所以this.str 就是 你好。

如果通过call,apply,bind修改this指向呢？


1.通过call 修改this指向  立即执行

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(){
            console.log(this,this.str);
        }
        fun.call(obj);   //立即执行
        fun();
    </script>

结果：

分析:修改成功，若没成功，this.str结果应该是：你好 

 2.通过apply修改this指向   立即执行

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(){
            console.log(this,this.str);
        }
        fun.apply(obj);   //立即执行
        fun();
    </script>

结果：

 3.通过bind修改this指向  不会立即执行

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(){
            console.log(this,this.str);
        }
        fun.bind(obj);  //没有立即执行
        console.log(fun.bind(obj)); //查看返回结果是一个函数
        fun();
    </script>

结果：

 通过加入() 执行：

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(){
            console.log(this,this.str);
        }
        fun.bind(obj)();  
        fun();
    </script>

结果： 

 2：参数不同：第一个参数都是this新的指向对象。第二个参数，apply第二个参数是数组。call和bind有多个参数就需要挨个写。

1.call 有多个参数就需要挨个写

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(name,age){
            this.name = name;
            this.age = age;
            console.log(this,this.str);
        }
        fun.call(obj,'张三',99);  //参数'张三'和99 传入 fun函数里面
    </script>

结果：

 2.bind 有多个参数就需要挨个写

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(name,age){
            this.name = name;
            this.age = age;
            console.log(this,this.str);
        }
        fun.bind(obj,'张三',99)();  
    </script>

 3.apply第二个参数是数组

    <script>
        var str = '你好'
        var obj = {str:'这是obj对象内的str'};
        function fun(name,age){
            this.name = name;
            this.age = age;
            console.log(this,this.str);
        }
        fun.apply(obj,['张三',99]);  
    </script>

3.使用场景

1.apply使用场景

eg：数组 [1,36,2,7,321] ,求其最大值？

    <script>
        let arr = [1,36,2,7,321];
        let re = Math.max.apply(null,arr);
        console.log(re); //321        
    </script>

分析：Math.max(1,36,2,7,321)这种可以得到最大值，但是是求数组中最大值，所以可以想到apply的第二个参数要求是数组来解决。为什么这里第一个参数填null,因为Math.max这里的运用是判断数组arr的最大值，并不是需要研究this指向。

2.bind 使用场景

<body>
    <h1 id="h1">ish1</h1>
    <button id="btn">1111111</button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            console.log(this.id);  // btn
        }
    </script>
</body>

分析：这里this指向的是btn,因为是给btn绑定的点击事件，但是如果想让this指向 h1，然后点击按钮，打印出h1的id的话，就需要改变this指向。

1.选择用 箭头函数

<body>
    <h1 id="h1">ish1</h1>
    <button id="btn">1111111</button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = ()=>{
            console.log(this);//window
            console.log(this.id);// undefined
        }
    </script>
</body>

分析：此时this指向window达不到this指向h1要求

2.用call / apply

<body>
    <h1 id="h1">ish1</h1>
    <button id="btn">1111111</button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            console.log(this);
            console.log(this.id);
        }.apply(h1);
    </script>
</body>

分析：可以实现 this指向 h1，但是实现不了 点击按钮，才打印出h1的id。这里还未点击按钮就直接打印出h1的id了。

3.使用bind

<body>
    <h1 id="h1">ish1</h1>
    <button id="btn">1111111</button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            console.log(this);
            console.log(this.id);
        }.bind(h1);
    </script>
</body>

分析：可以实现 this指向 h1，也实现了 点击按钮，打印出h1的id。 它这里点击按钮，就相当于时给bind返回的函数添加了(),只有点击时才执行。

3.call使用场景(除开apply,bind才能使用的场景)

前端小草籽
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
call apply bind 用法与区别
Superman_peng的博客
06-07 206
用法 call 执行 call 方法时： 1.首先把要操作的函数中的this关键字变为call方法第一个传递的实参 2.把call方法第二个及之后的实参获取到 3.把要操作的函数执行，并且把第二个以后传递进来的实参传递给函数 fn.call(obj, param1, param2, ...) 关于传参 function func (a,b,c) {} func.call(obj, 1,2,3) // func 接收到的参数实际上是 1,2,3 func.call(obj, [1,2,3]) // fu
call，apply，bind三者用法和区别
weixin_47793765的博客
12-29 1875
定义: apply()：调用一个对象的一个方法，用另一个对象替换当前对象，例如：B.apply(A，arguments)；即A对象应用B对象的方法。 call()：调用一个对象的一个方法，用另一个对象替换当前对象，例如：B.call(A，args1，args2，···)；即A对象调用用B对象的方法。 作用：①改变this指向；②借用别的对象的方法；③单纯的调用函数；④实现继承； function add(a,b){ return a+b; } function sub(a,b){ return a-b;
这可能是最简单直观的call()、bind()、和apply()的区别和联系
im_dogg的博客
04-20 276
面试的时候被问到 bind、call和apply的区别，当时脑袋似懂非懂，事后通过一个简单的例子写出来分享给大家 首先说一下三者的共同点 共同点： 都是用来改变函数的this对象的指向的。 第一个参数都是this要指向的对象。 都可以利用后续参数传参。 一般用于借调其他对象的方法 至于不同点，用一个例子区分： 新建两个对象，平板对象pad和电脑computer,只有pad里有介绍intro方法...
js中继承的几种用法总结(apply,call,prototype)
weixin_30709061的博客
09-13 369
js中有三种继承方式 1.js原型（prototype）实现继承 <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> func...
call 、apply 、bind的区别和作用
wcxrib的博客
01-29 1024
bind、apply、call 之间的区别是：1、执行方式不同；3、修改this的性质不同。执行方式不同是指，call和apply是改变后页面加载之后就立即执行，是同步代码。bind是异步代码，改变后不会立即执行；而是返回一个新的函数。1、都是用来改变this指向的，都是跟在函数的后面；
call，apply ，bind区别与联系
qq_46448507的博客
07-22 180
相同点 1，call，apply，bind都是Fuction.prototype的方法，所有的function都具有的方法。 2，并且都是可以改变函数内部this指向的方法 var tom ={ name：'汤姆', eat:function(){ console.log(name+'正在吃饭') } } function Preson(name){ this.name=name console.log(this.name) } const ls=new Preson() ls.call(to
call、apply、bind有什么区别
weixin_53954018的博客
06-08 164
js
javascript中call apply 与 bind方法详解
10-22
在JavaScript中，`call`、`apply`和`bind`都是与函数调用相关的三个重要方法，它们都允许我们改变函数内部`this`的指向，从而实现不同对象间的方法复用和灵活控制上下文环境。下面我们将分别详细介绍这三个方法。 1...
原生JS实现 call apply bind
01-08
call apply bind 的 区别 call apply方法都是在调用之后立即执行的，而bind是返回原函数，需要再调用一次才能执行 传参方式的区别 var newFn1 = fn1.bind(newObj,arg1,arg2....); bind 第一个参数为需改变的新指向...
Javascript中call，apply，bind方法的详解与总结
10-20
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧
javascript中apply/call和bind的使用
10-20
本文主要介绍了javascript中apply/call和bind的使用。具有很好的参考价值，下面跟着小编一起来看下吧
javascript中call,apply,bind函数用法示例
10-20
`bind()` 与 `call()` 和 `apply()` 不同，它不会立即执行函数，而是返回一个新的函数，这个新函数的 `this` 值被绑定到指定的对象。`bind()` 可以接受一个或多个参数，这些参数会被预设为新函数的参数。例如： ```...
call，apply，bind的区别
热门推荐
why404
02-09 1万+
一、call,apply,bind的相同点： 都是改变this指向的； 第一个参数都是this要指向的对象； 都可以利用后续参数传参； 二、call,apply,bind的区别： call和bind的参数是依次传参，一一对应的； 但apply只有两个参数，第二个参数为数组； call和apply都是对函数进行直接调用，而bind方法返回的仍是一个函数； 例如： var a ={ name:'一一', age:'22', sex:'女', ho.
call、apply、bind区别
weixin_44562686的博客
06-25 163
call、apply区别 相同点：都是重定向this指针的方法。 不同点：call和apply的第二个参数不相同，call是若干个参数的列表。apply是一个数组 手写一个call方法 // 在这之前需要重新认识一下call方法的执行操作 let mock = { value : 1 }; function mockNum(){ console.log(‘value’,this.value) } mockNum.call(mock) // 改变了函数中this的指向，当前this指向了mock对象 转换一下
小白都能看明白的bind,apply,call的区别
youhebuke225的博客
06-11 310
目录bind,apply,call的区别1. `apply/call`2. `bind` bind,apply,call的区别 函数体中有this 用来指定函数中的this是谁 1. apply/call bind/call 两者是差不多的区别在于，两者的参数不同 参数一：需要绑定的this 其他参数： call直接传递参数 apply传递参数的数组 const name = 'Jack' function fn (a,b){ console.log(name,a,b) console
apply，call，bind三者的区别及实现原理
老古懂的博客
03-01 2618
apply，call，bind三者的区别 1、三者都可以改变函数的this对象指向。 2、三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。 3、三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。 bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。 为什么要改变this指向？ 来，给大爷们上栗子， var na
call apply bind三者的区别
qq_53632527的博客
10-18 226
call方法 function.call ( thisArg, Arr1, Arr2, . . .) apply方法 function.apply( thisArg, [arr1, arr2, . . . ] ) bind方法 function.call ( thisArg, Arr1, Arr2, . . .) thisArg为this的指向，Arr为传入的参数 call apply bind三者的区别： （1）指向的区别：三者的第一个参数都是this的指向，但是在使用..
call apply bind 的区别 和 联系
weixin_58370739的博客
09-05 85
一 call（） 1，call()可以调用函数, 2,改变this指向 3，主要用于继承 书写格式 Num.apply(thisArg,参数1,参数二) 二 apply（） 1，可以调用函数 2，改变this指向 3,传入的是一个数组 书写格式a.apply(thisArg,[argsArray]) thisArg:在fun函数运行时指定的this值 argsArray:传递的值，必须包含在数组里面 返回值就是函数的返回值，就是调用函数 三 bind（） 1，...
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1517
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
call apply bind 区别
04-21
call、apply、bind 都是用来改变函数中 this 指向的方法。 call 和 apply 的作用相同，都是使函数调用时的 this 指向第一个参数，并且立即执行该函数，其中唯一的区别在于传参方式不同。call 的参数是逐个列举，而 apply 的参数是以数组的形式传递，即第二个参数是一个数组。 bind 的作用是返回一个新的函数，在该函数被调用时，会将 this 关键字设置为提供的值，并传入原函数的参数以进行调用。区别于 call 和 apply，bind 方法不是立即执行函数，而是返回一个新的函数。 简单来说，call 和 apply 是为了改变函数的上下文环境，而 bind 是为了改变函数的执行方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值