手写 JS 函数的 call、apply、bind

作者：helloworld1024fd

2023-02-13
浙江
本文字数：1419 字
阅读完需：约 5 分钟

之所以要写这篇，是因为曾经面试被要求在白纸上手写 bind 实现

结果跟代码一样清晰明确，一阵懵逼，没写出来！

下面，撸起袖子就是干！~

把 call、apply、bind 一条龙都整一遍！~~

call

定义与使用

Function.prototype.call(): developer.mozilla.org/zh-CN/docs/…

// Function.prototype.call()样例function fun(arg1, arg2) {  console.log(this.name)  console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 接受的是一个参数列表;方法立即执行fun.call(_this, 1, 2)

复制代码

// 输出：YIYING3

复制代码

手写实现

/** * 自定义call实现 * @param context   上下文this对象 * @param args      动态参数 */Function.prototype.ownCall = function(context, ...args) {  context = (typeof context === 'object' ? context : window)  // 防止覆盖掉原有属性  const key = Symbol()  // 这里的this为需要执行的方法  context[key] = this  // 方法执行  const result = context[key](...args)  delete context[key]  return result}

复制代码

// 验证样例function fun(arg1, arg2) {  console.log(this.name)  console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 接受的是一个参数列表;方法立即执行fun.ownCall(_this, 1, 2)

复制代码

// 输出：YIYING3

复制代码

apply

定义与使用

Function.prototype.apply(): developer.mozilla.org/zh-CN/docs/…

// Function.prototype.apply()样例function fun(arg1, arg2) {  console.log(this.name)  console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 参数为数组;方法立即执行fun.apply(_this, [1, 2])

复制代码

// 输出：YIYING3

复制代码

手写实现

/** * 自定义Apply实现 * @param context   上下文this对象 * @param args      参数数组 */Function.prototype.ownApply = function(context, args) {  context = (typeof context === 'object' ? context : window)  // 防止覆盖掉原有属性  const key = Symbol()  // 这里的this为需要执行的方法  context[key] = this  // 方法执行  const result = context[key](...args)  delete context[key]  return result}

复制代码

// 验证样例function fun(arg1, arg2) {  console.log(this.name)  console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 参数为数组;方法立即执行fun.ownApply(_this, [1, 2])

复制代码

// 输出：YIYING3

复制代码

bind

定义与使用

Function.prototype.bind(): developer.mozilla.org/zh-CN/docs/…

// Function.prototype.bind()样例function fun(arg1, arg2) {  console.log(this.name)  console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向，返回新function对象const newFun = fun.bind(_this)newFun(1, 2)

复制代码

// 输出：YIYING3

复制代码

参考前端进阶面试题详细解答

手写实现

/** * 自定义bind实现 * @param context     上下文 * @returns {Function} */Function.prototype.ownBind = function(context) {  context = (typeof context === 'object' ? context : window)  return (...args)=>{    this.call(context, ...args)  }}

复制代码

// 验证样例function fun(arg1, arg2) {  console.log(this.name)  console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向，返回新function对象const newFun = fun.ownBind(_this)newFun(1, 2)

复制代码

// 输出：YIYING3

复制代码

发布于: 刚刚阅读数: 3

helloworld1024fd

关注

还未添加个人签名 2022-07-31 加入

还未添加个人简介

发布

暂无评论

创作场景

手写 JS 函数的 call、apply、bind

call

定义与使用

手写实现

apply

定义与使用

手写实现

bind

定义与使用

手写实现

helloworld1024fd

评论