手写实现call、apply、 bind

已于 2023-10-18 17:03:05 修改
阅读量107 收藏
点赞数
文章标签： 前端 javascript
于 2023-10-16 21:31:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61478092/article/details/133869773
版权

目录

什么是call、bind、apply？

call、bind、apply的使用

call()方法

bind()方法

apply()

call、bind、apply的区别

总结

手写call、apply、bind方法

手写call()

手写apply()

手写bind()

什么是call、bind、apply？

call，apply，bind是Javascript中用于改变普通函数this指向（无法改变箭头函数this指向）的方法，这三个函数实际上都是绑定在function构造函数的prototype上，而每一个函数都是Function的实例，因此每一个函数都可以直接调用call,apply,bind

call、bind、apply的使用

call()方法

语法：function.call(thisArg, arg1, arg2, ...)。其中thisArg是要设置为函数执行上下文的对象，也就是this要指向的对象，从第二个参数开始，arg1,arg2,···是传递给函数的参数。通过使用call方法，可以将一个对象的方法应用到另一个对象上

//定义一个对象
const obj1={
 name:'Alice',
 greet:function(){
   console.log(`Hello, ${this.name}!`);
 }
};

//定义另一个对象
const obj2={
  name:'Bob'
};

//使用call方法将obj1的greet方法应用到obj22上
obj1.greet.call(obj2); // 输出：Hello, Bob!

作用：

1.第一个调用函数，第二个可以改变函数内的this指向

2.call的主要作用可以实现继承

bind()方法

语法：function.bind(thisArg, arg1, arg2, ...)。其中thisArg是要绑定到函数执行上下文的对象，也就是this要指向的对象，从第二个参数开始，arg1, arg2, ...是传递给函数的参数。与call和apply方法不同，bind方法并不会立即执行函数，而是返回一个新函数，可以稍后调用。这对于事件处理程序和setTimeout函数等场景非常有用

function greet(name){
 console.log("Hello,"+name);
}

const delayGreet=greet.bind(null,"John");
setTimeout(delayGreet,2000);//2s后输出，hello,John

作用：

1.不会调用原来的函数，可以改变原来函数内部的this指向

2.返回的是原函数改变this之后产生的新函数

3.如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向此时用bind

apply()

语法：function.apply(thisArg, [argsArray])。 其中thisArg是要设置为函数执行上下文的对象，也就是this要指向的对象，argsArray是一个包含参数的数组。通过使用apply方法，可以将一个对象的方法应用到另一个对象上，并使用数组作为参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = { name: 'John' };
greet.apply(person, ['Mary']); // 输出：Hello, Mary!

作用：

1.也是调用函数 第二个可以改变函数内部this的指向

2.但是它的参数必须是数组（伪数组）

3.apply的主要应用 比如我们可以利用apply借助于数学内置对象求最大值

call、bind、apply的区别

1.调用方式：

call：使用函数的call方法可以直接调用函数，并传递参数列表。

bind：使用函数的bind方法可以返回一个新的函数，这个新函数的this值被绑定到指定的对象，但不会立即执行。

apply：使用函数的apply方法可以直接调用函数，并传递参数列表，与call方法类似，但参数需要以数组或类数组的形式传递。

2.参数传递方式：

call：使用call方法时，参数需要一个一个地列举出来，通过逗号分隔。

bind：使用bind方法时，可以传递任意数量的参数，可以在绑定时传递参数，也可以在调用时传递参数。

apply：使用apply方法时，参数需要以数组或类数组的形式传递。

3.执行时机

call：调用call方法时，函数会立即执行。

bind：调用bind方法时，返回一个新函数，需要后续再调用这个新函数才会执行。

apply：调用apply方法时，函数会立即执行。

总结

相同点: 都可以改变函数内部的this指向

区别点

1.call和apply 会调用函数并且改变函数内部this指向

2.call和apply传递的参数不一样,call传递参数aru1,aru2..形式 apply必须数组形式[arg)

3.bind 不会调用函数可以改变函数内部this指向

主要应用场景:

1.call 经常做继承

2.apply经常跟数组有关系比如借助于数学对象实现数组最大值最小值

3. bind 不调用函数但是还想改变this指向比如改变定时器内部的this指向

call可以直接调用函数，并传递参数列表，立即执行。

bind返回一个新函数，将绑定的对象作为this值，可以在绑定时或调用时传递参数，需要手动调用新函数执行。

apply可以直接调用函数，并传递参数列表，立即执行，参数以数组或类数组的形式传递。

手写call、apply、bind方法

手写call()

原理：

  • 首先，通过 Function.prototype.myCall 将自定义的 myCall 方法添加到所有函数的原型对象上，使得所有函数实例都可以调用该方法。

  • 在 myCall 方法内部，首先通过 typeof this !== "function" 判断调用 myCall 的对象是否为函数。如果不是函数，则抛出一个类型错误。

  • 然后，判断是否传入了上下文对象 context。如果没有传入，则将 context 赋值为全局对象；ES11 引入了 globalThis，它是一个统一的全局对象，无论在浏览器还是 Node.js 中，都可以使用 globalThis 来访问全局对象。

  • 接下来，使用 Symbol 创建一个唯一的键 fn，用于将调用 myCall 的函数绑定到上下文对象的新属性上。

  • 将调用 myCall 的函数赋值给上下文对象的 fn 属性，实现了将函数绑定到上下文对象上的效果。

  • 调用绑定在上下文对象上的函数，并传入 myCall 方法的其他参数 args。

  • 将绑定在上下文对象上的函数删除，以避免对上下文对象造成影响。

  • 返回函数调用的结果。

Function.prototype.myCall(context,···args){
   //判断调用myCall的是否为函数
   if(typeof this !== 'function'){
      throw new TypeError("Function.prototype.myCall - 被调用的对象必须是函数");
   }
    
   //如果没有传入上下文的对象，则默认为全局对象
   context=context||globalThis;
   
   //用Symblo来创建唯一的fn,防止名字冲突
   let fn=Symbol("key");

   // this是调用myCall的函数，将函数绑定到上下文对象的新属性上
   context[fn]=this;

   //传入MyCall的多个参数
   const result=context[fn](···args);

   // 将增加的fn方法删除
   delete context[fn];

   return result;
};

测试：

const test={
   name:"csdn",
   hello:function(){
      console.log(`hello,${this.name}!`);
   },
   add:function(a,b){
      return a + b;
   },
};
const obj={
   name:"world"
};
test.hello.myCall(obj); //hello,world!
test.hello.call(obj); //hello,world!
console.log(test.add.myCall(null,1,2));//3
console.log(test.add.call(null,1,2));//3

手写apply()

原理：apply的实现思路跟call类似，就是apply传入参数是以数组的形式传入，所以多了一步判断传入的参数是否为数组以及在调用方法的时候使用扩展运算符 ... 将传入的参数数组 argsArr 展开

Function.prototype.myApply = function (context, argsArr) {
  // 判断调用myApply的是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.myApply - 被调用的对象必须是函数");
  }

  // 判断传入的参数是否为数组
  if (argsArr && !Array.isArray(argsArr)) {
    throw new TypeError("Function.prototype.myApply - 第二个参数必须是数组");
  }

  // 如果没有传入上下文对象，则默认为全局对象,globalThis 来访问全局对象。
  context = context || globalThis;

  // 用Symbol来创建唯一的fn，防止名字冲突
  let fn = Symbol("key");

  // this是调用myApply的函数，将函数绑定到上下文对象的新属性上
  context[fn] = this;

  // 传入myApply的多个参数
  const result = Array.isArray(argsArr)
    ? context[fn](...argsArr)
    : context[fn]();

  // 将增加的fn方法删除
  delete context[fn];

  return result;
};

测试：

const test={
   name:"csdn",
   hello:function(){
      console.log(`hello,${this.name}!`);
   }
};
const obj={
   name:"world"
};
test.hello.myApply(obj); //hello,world!
test.hello.apply(obj); //hello,world!
const arr=[2,3,4,9,5]
console.log(Math.max.myApply(null,arr));//9
console.log(Math.max.apply(null,arr));//9

手写bind()

原理：

  • 首先，通过 Function.prototype.myBind 将自定义的 myBind 方法添加到所有函数的原型对象上，使得所有函数实例都可以调用该方法。

  • 在 myBind 方法内部，首先通过 typeof this !== "function" 判断调用 myBind 的对象是否为函数。如果不是函数，则抛出一个类型错误。

  • 然后，判断是否传入了上下文对象 context。如果没有传入，则将 context 赋值为全局对象；ES11 引入了 globalThis，它是一个统一的全局对象，无论在浏览器还是 Node.js 中，都可以使用 globalThis 来访问全局对象。

  • 保存原始函数的引用，使用 _this 变量来表示。

  • 返回一个新的闭包函数 fn 作为绑定函数。这个函数接受任意数量的参数 innerArgs。

  • 在返回的函数 fn 中，首先判断是否通过 new 关键字调用了函数。这里需要注意一点，如果返回出去的函数被当作构造函数使用，即使用 new 关键字调用时，this 的值会指向新创建的实例对象。通过检查 this instanceof fn，可以判断返回出去的函数是否被作为构造函数调用。这里使用 new _this(...args, ...innerArgs) 来创建新对象。

  • 如果不是通过 new 调用的，就使用 apply 方法将原始函数 _this 绑定到指定的上下文对象 context 上。这里使用 apply 方法的目的是将参数数组 args.concat(innerArgs) 作为参数传递给原始函数。

Function.prototype.myBind = function (context, ...args) {
  // 判断调用myBind的是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.myBind - 被调用的对象必须是函数");
  }

  // 如果没有传入上下文对象，则默认为全局对象
  // ES11 引入了 globalThis，它是一个统一的全局对象
  // 无论在浏览器还是 Node.js 中，都可以使用 globalThis 来访问全局对象。
  context = context || globalThis;

  // 保存原始函数的引用，this就是要绑定的函数
  const _this = this;

  // 返回一个新的函数作为绑定函数
  return function fn(...innerArgs) {
    // 判断返回出去的函数有没有被new
    if (this instanceof fn) {
      return new _this(...args, ...innerArgs);
    }
    // 使用apply方法将原函数绑定到指定的上下文对象上
    return _this.apply(context,args.concat(innerArgs));
  };
};

测试：
 

const test = {
  name: "xxx",
  hello: function (a,b,c) {
    console.log(`hello,${this.name}!`,a+b+c);
  },
};
const obj = { name: "world" };
let hello1 = test.hello.myBind(obj,1);
let hello2 = test.hello.bind(obj,1); 
hello1(2,3)//hello,world! 6
hello2(2,3)//hello,world! 6
console.log(new hello1(2,3));
//hello,undefined! 6
// hello {}
console.log(new hello2(2,3));
//hello,undefined! 6
// hello {}

参考链接：https://juejin.cn/post/7268096685199327273

糕冷鲨手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js面试常客之手写实现call、apply、bind方法（一看就会，附详细截图）
m0_60635321的博客
04-14 610
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
手把手教你手写call、apply、bind，学不会来砍我
qq_45905655的博客
08-21 249
手把手教你手写call、apply、bind！
手写call,apply,bind方法
m0_45093055的博客
08-06 331
手写call,apply,bind方法
手写实现call、apply和bind函数
yiguoxiaohai的博客
01-31 447
手写实现call、apply和bind函数
手写实现call() apply() bind()函数,附有详细注释,包含this指向、arguments讲解
weixin_51472145的博客
08-30 662
手写实现call() apply() bind()函数是很经典的问题，但是能掰扯清楚的文章确实不算多，于是笔者才决定写下本文，希望能给读者带来一些启发，如有错误欢迎指正。附有详细注释,包含this指向、类数组对象arguments讲解
JS原理——手写call、apply、bind方法
dahuihuiya的博客
02-07 311
全局执行环境中，指向全局对象；
手写实现Call Apply Bind
qq_36171991的博客
02-26 107
Function.prototype.call = function (obj, ...args) { if (typeof this !== 'function') { throw 'not a function'; } let fn = Symbol('fn'); obj[fn] = this; let res = obj[fn](...args); delete obj[fn]; return res; } Function.prototype.apply .
js代码-手写call/bind/apply
07-14
js代码-手写call/bind/apply
js代码-手写call、apply、bind
07-16
js代码-手写call、apply、bind
js代码-手写代码，手动实现new,stringtify,parse,call,apply,bind等常见函数。
07-15
js代码-手写代码，手动实现new,stringtify,parse,call,apply,bind等常见函数。
手写实现call、apply、bind方法
buptlhr的博客
05-19 642
~ function anonymous(proto) { // call function call(context = window, ...args) { context == null ? context = window : null var type = typeof context if (type != 'object...
手写 apply call bind 实现
Jioho的博客
06-29 479
apply call bind 相关 对于 apply call bind 之前也有写过一篇很详细的入门级文章 apply ， call， bind 用法和区别 了解用法后，最好还是了解其实现原理，这样才能掌握透彻 三者的区别 call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同 除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组 bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并不会立刻执行 手写 call
手写 实现call(), apply()
Novice-XiaoSong的博客
10-31 133
一、call() ES6之前 Function.prototype.myCall = function (_context){ // _context空检测 _context = _context? _context: window; // 获取函数参数 let args = []; for(let i=1, len=arguments.length; i<len; i++){ // 避开在eval时组装参数中字符串的麻烦 args.push('arguments[' + i +
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1488
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 170
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 527
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
netcore 生成验证码
最新发布
qq_51172697的博客
06-20 115
提供一个生成验证码和校验的接口。
快速压缩前端项目
lyd的博客
06-15 451
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
手写call apply bind方法
03-17
手写call方法: ``` Function.prototype.myCall = function(context) { context = context || window; context.fn = this; var args = [...arguments].slice(1); var result = context.fn(...args); delete ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值