美文网首页
call、apply、bind的区别

call、apply、bind的区别

作者: 王二彪 | 来源:发表于2019-10-20 20:01 被阅读0次

call,apply、bind的区别:

bind绑定this的指向之后,不会立即调用当前函数,而是将函数返回。
而call,apply绑定this指向后会立即调用。
如果我们在不知道什么时候会调用函数的时候,需要改变this的指向,那么只能使用bind。

比如:在定时器中,我们想改变this的指向,但是又不能立即执行,需要等待2秒,这个时候只能使用bind来绑定this。
setInterval(function(){
    // ...
}.bind(this), 2000);

一、Apply

方法重用

通过 apply() 方法,您能够编写用于不同对象的方法。

JavaScript apply() 方法

apply() 方法与 call() 方法非常相似:
在本例中,person 的 fullName 方法被应用到 person1:

实例

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

二、call

call函数

在Function.prototype上挂载一个newCall函数表示是对call的模拟,具体逻辑看注释

Function.prototype.newCall = function(context){
  // 1 判断context是否为object,如果是object就代表可能是Object 或者 null,如果不是就赋值一个空对象

  if (typeof context === 'object') {
    context = context || window //  context 如果是null就会赋值为window
  } else {
    context = Object.create(null)
  }

  // 2 在context下挂载一个函数,函数所在的key随机生成,防止context上已有同名key
  var fn = +new Date() + '' + Math.random() // 用时间戳+随机数拼接成一个随机字符串作为一个新的key
  context[fn] = this
  // 3 newCall如果还有其他的参数传入也要考虑用到
  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push('arguments['+ i + ']')
  }
  // 4 重点在这里,执行context[fn]这个函数,只能用eval,因为newCall的入参参数不确定
  var result = eval('context[fn]('+args+')') // args是一个数组,但是当它和字符串相加时自动调用内部的toString方法转成字符串

  delete context[fn] // 用完后从context上删除这个函数
  // 5 返回结果
  return result
}

原理:

在要挂载的对象context上临时添加一个方法 f
用eval执行这个临时添加的方法f,并拿到执行后的结果result
删除这个额外的方法f,并返回执行结果result


带参数的 apply() 方法

apply() 方法接受数组中的参数:

实例

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);

与 call() 方法对比:

实例

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;

相关文章

  • 理解JS中的 call, apply, bind方法

    call, apply, bind 方法的目的和区别 我们常说,call(), apply(),bind()方法的...

  • this_原型链_继承

    this相关问题 apply、call 、bind的作用以及区别 call、apply和bind方法的用法以及区别...

  • this&原型链&继承

    this 1. apply、call 、bind有什么作用,什么区别? apply、call 、bind 都是用来...

  • 关于 this_原型链_继承 相关问题总结

    关于this 1- apply、call 、bind的作用和区别 apply、call 、bind都有改变thi...

  • this_原型链_继承

    this 相关 1. apply、call 、bind有什么作用,什么区别 apply、call、bind可以改变...

  • this_原型链_继承

    问题1: apply、call 、bind有什么作用,什么区别? apply和call call apply,调用...

  • this 原型链 继承

    this 相关问题 1.apply、call 、bind有什么作用,什么区别 apply、call 、bind这三...

  • call(),apply()和bind()

    call、apply和bind函数存在的区别:bind返回对应函数, 便于稍后调用; apply, call则是立...

  • this 相关问题

    问题1: apply、call 、bind有什么作用,什么区别 apply call bind 问题2: 以下代码...

  • js继承

    问题1: apply、call 、bind有什么作用,什么区别 apply/call/bind 问题2: 以下代码...

网友评论

      本文标题:call、apply、bind的区别

      本文链接:https://www.haomeiwen.com/subject/dwndqctx.html