如何手写call、apply、bind？

VEIGHTZ 发布于2019-08-23 16:53 / 2399人阅读

摘要：可以改变，并且传入参数，立刻执行，返回函数返回值手写参数默认值并不会排除，所以重新赋值是调用的函数执行后删除新增属性可以改变，并且传入参数，与不同的是，传入的参数是数组或类数组，立刻执行，返回函数返回值手写参数默认值并不会排除，所以重新赋值

call

Function.prototype.call(this, arg1, arg2, …..)
可以改变this，并且传入参数，立刻执行，返回函数返回值

手写call

Function.prototype.myCall = function(context = window, ...args) {
  context = context || window; // 参数默认值并不会排除null，所以重新赋值
  context.fn = this; // this是调用call的函数
  const result = context.fn(...args);
  delete context.fn; // 执行后删除新增属性
  return result;
}

apply

Function.prototype.apply(this, [arg1, arg2, …..])
可以改变this，并且传入参数，与call不同的是，传入的参数是数组或类数组，立刻执行，返回函数返回值

手写apply：

Function.prototype.myApply = function(context = window, args = []) {
  context = context || window; // 参数默认值并不会排除null，所以重新赋值
  context.fn = this; // this是调用call的函数
  const result = context.fn(...args);
  delete context.fn;
  return result;
}

bind

Function.prototype.bind(this, arg1, arg2, …)
可以绑定this，并且传入参数，方式与call相同，但是不会执行，返回已绑定this的新函数

手写bind：

Function.prototype.myBind = function(context, ...args) {
  const _this = this;
  return function Bind(...newArgs) {
    // 考虑是否此函数被继承
    if (this instanceof Bind) {
      return _this.myApply(this, [...args, ...newArgs])
    }
    return _this.myApply(context, [...args, ...newArgs])
  }
}

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

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

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

js函数this理解？手写apply、call、bind就够了

摘要：一是什么函数的内部属性，引用的是函数据以执行的环境对象。函数做为节点事件调用时指向节点本身做为构造函数实力化方法时指向实例对象箭头函数里的普通函数，由于闭包函数是执行的，所以指向箭头函数的指向函数创建时的作用域。一、this是什么？函数的内部属性，this引用的是函数据以执行的环境对象。也就是说函数的this会指向调用函数的执行环境。 function a(){ retur...

Cciradih 2019-08-26 10:39 评论0 收藏0
手写call、apply、bind函数

摘要：函数特点可以改变我们当前函数的指向还会让当前函数执行题目自测思路解析执行传入三个参数函数内部执行传入三个参数函数内部执行 call函数特点： 1)可以改变我们当前函数的this指向 2）还会让当前函数执行 Function.prototype.call = function (context) { if (typeof this !== function) { thro...

gecko23 2019-05-23 13:55 评论0 收藏0
手写call、apply、bind及相关面试题解析

摘要：我是前端我的全名是我是一个前端指向接收多个参数，第一个是返回值返回值是一个函数上下文的，不会立即执行。柯里化相关讲解请移步简版的实现就算完成了欢迎吐槽点赞它们有什么不同？怎么用？ call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 let obj = { name: 一个 } ...

TwIStOy 2019-08-23 14:48 评论0 收藏0
手写JavaScript中的bind方法

摘要：如果绑定后的函数被了，那么此时指向就发生改变。构造函数上的属性和方法，每个实例上都有。接下来声明一个函数，在该中获取了第二次传的参数，并且返回了的执行。的又等于的实例。至此，就实现了自己的方法。之前已经实现过了call，apply和new。今天顺便把bind也实现下。首先： bind方法返回的是一个绑定this后的函数，并且该函数并没有执行，需要手动去调用。(从这一点看bind函数...

AZmake 2019-08-26 13:35 评论0 收藏0
面试题里的那些各种手写

摘要：最近准备初级前端面试，发现有很多手写实现什么的，例如什么手写实现，。后面以这道题为引线面试官可能会追问什么是执行上下文的判断，的区别手写一个函数实现斐波那契数列首先拷一个阮神在他教程里的一个写法。最近准备初级前端面试，发现有很多手写实现什么的，例如什么手写实现bind，promise。手写ajax，手写一些算法。翻阅了很多书籍和博客。这里做一个总结改进，算是对我后面大概为期一个月找...

wh469012917 2019-08-23 16:58 评论0 收藏0