JS中的call(),apply()和bind()方法

nifhlheimr 发布于2019-08-22 18:05 / 2268人阅读

摘要：奔着一星期彻底弄清楚一个小知识点的目的这次的目标是方法在实际项目中经常会用到这三个函数只是简单的知道都是用来进行上下文绑定的这三个函数都可以实现现在看来这三者还是有很大区别的特别是和其他两个的区别先说和目的是改变函数的执行上下文下面列举一些

奔着一星期彻底弄清楚一个javascript小知识点的目的,这次的目标是call apply bind方法

在实际项目中,经常会用到这三个函数,只是简单的知道,都是用来进行上下文绑定的,这三个函数都可以实现,现在看来这三者还是有很大区别的,特别是bind和其他两个的区别

先说call和apply 目的是改变函数的执行上下文,下面列举一些他们的用法

实例一

const zhangsan = {
    name: "张三",
    age: 18    
}

const lisi = {
    name: "李四",
    age: 16
}

function introduce(grade) {
    console.log(`我的名字叫${this.name},我今年${this.age}岁了,上${grade}了`)
}

introduce.call(zhangsan, 3) // 我的名字叫张三,我今年18岁了,上3了
introduce.call(lisi, 4) // 我的名字叫李四,我今年18岁了,上3了
introduce.apply(zhangsan, [3])// 我的名字叫张三,我今年18岁了,上3了
introduce.apply(lisi, [4]) // 我的名字叫李四,我今年18岁了,上3了

实例二

const People = {
    name: "党",
    age: 100,
    introduce: function(grade) {
       console.log(`我的名字叫${this.name},我今年${this.age}岁了,上${grade}了`) 
    }
}

People.introduce("大学") // 我的名字叫党,我今年100岁了,上大学了

const zhangsan = {
    name: "张三",
    age: 18
}

People.introduce.call(zhangsan, 3) // 我的名字叫张三,我今年18岁了,上3了
People.introduce.apply(zhangsan, [3]) // 我的名字叫张三,我今年18岁了,上3了

通过以上两个例子,可以看出,call和apply的区别主要在于传递参数的上的不同,

他们俩的第一个参数都是要执行环境的this, 也就是说执行函数的上下文

第二个参数apply是以数组的方式以此传递, call要一个一个传

需要注意的一点,他们的第二个参数都可以穿arguments

下面就看下bind函数的具体用法

还是老样子,列举一些例子,例子更能直观的感受其用法

还是以上面代码为基础

const wangwu = {
    name: "王五",
    age: 20
}
People.introduce.bind(wangwu, 4)  // ƒ (grade) {
                                  //   console.log(`我的名字叫${this.name},我今年        
                                  //   ${this.age}岁了,上                 
                                  // }
可以看到输出的是一个函数体

所以, bind后函数不会执行, 只是返回一个改变上下文的函数副本, 而call和apply是直接执行的函数

如果想得到和call apply一样的效果,需要手动执行下改函数

People.introduce.bind(wangwu, 4)() // 我的名字叫王五,我今年20岁了,上4了

查了下bind在ie6 ~ ie8下bind的兼容性不好,如果需要兼容ie低版本浏览器的,需要模拟其用法

代码如下

if(!function(){}.bind) {
    Function.prototype.bind = function(context) {
        const self = this
        const args = Array.prototype.slice.call(arguments)
        return function() {
            return self.apply(context, args.slice(1))
        }
    }
}

细想下来,上面这段代码的知识点特别多

const self = this

通过上面两个截图可以很明确的知道需要让this保存调用它的值

需要扩展方法的时候,都需要先判断是否已经存在,如果不存在则会在原型prototype上添加方法

将伪数组转化为真正的数组 Array.protoype.slice.call(arguments)
数组slice的用法,具体怎么使用可以参考这个

返回一个函数,把该函数传递给bind的第一个参数当做执行上下文, 由于args已经是一个数组，排除第一项，之后的参数作为第二部分参数传给apply。

GPU云服务器云服务器 JS中bind、call和apply的作 js中的call和apply apply与call的区别 apply()方法

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

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

理解JavaScript中的call,apply和bind方法

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法...

chaosx110 2019-08-26 12:23 评论0 收藏0
JS中的call、apply、bind方法详解

摘要：不能应用下的等方法。首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 评论0 收藏0
js中call、apply、bind那些事

摘要：应用场景求数组中的最大值和最小值并不是最佳选择是中的静态方法，因此必然是没有使用上下文的必要的。因此绑定只需要用或者占位就可以了。前言面试，几乎每次都会问到一个js中关于call、apply、bind的问题，比如… 怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承 apply、call、bind的区别和主要应用场景作用首先问个问...

shiyang6017 2019-08-21 14:43 评论0 收藏0
JS系列之call & apply & bind

摘要：参考链接在中，和是对象自带的三个方法，都是为了改变函数体内部的指向。返回值是函数方法不会立即执行，而是返回一个改变了上下文后的函数。而原函数中的并没有被改变，依旧指向全局对象。原因是，在中，多次是无效的。参考链接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变...

xiaochao 2019-08-23 13:09 评论0 收藏0
js 面试官想了解你有多理解call,apply,bind?

摘要：返回值这段在下方应用中有详细的示例解析。回调函数丢失的解决方案绑定回调函数的指向这是典型的应用场景绑定指向，用做回调函数。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this...

wuaiqiu 2019-08-26 10:33 评论0 收藏0