您现在的位置是:首页 > Javascript
当前栏目
一起手写JS函数的call、apply、bind
2023-02-18 16:33:10 时间
之所以要写这篇,是因为曾经面试被要求在白纸上手写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)
// 输出:
YIYING
3
手写实现
/** * 自定义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)
// 输出:
YIYING
3
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])
// 输出:
YIYING
3
手写实现
/** * 自定义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])
// 输出:
YIYING
3
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)
// 输出:
YIYING
3
参考 前端进阶面试题详细解答
手写实现
/** * 自定义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)
// 输出:
YIYING
3
相关文章
- JS常用的几种设计模式
- pm2:在生产环境中运行 nodejs 应用
- 一些你需要掌握的 tsconfig.json 常用配置项
- 用 nodejs 实现 http 服务版本的 hello world
- 聊聊 JavaScript 的几种模块系统
- Node.js 是怎么找到模块的?
- Node.js 是如何做 GC (垃圾回收)的?
- React 源码:ReactElement 和 FiberNode 是什么?
- JS 当中的函数柯里化和高阶函数
- 数据提取-JsonPath
- Selenium与PhantomJS
- 数据提取-PyQuery
- package.json中script的生命周期
- JavaScript反爬之哈希算法
- 性能调优命令之jstat
- 性能调优命令之jstack
- 基于docker Jenkins搭建持续集成自动化测试环境,管理、配置、运行 Node 节点与 Slave 分布式运行
- selenium Webdriver自动化测试之执行JavaScript脚本
- Python3.x:Selenium+PhantomJS爬取带Ajax、Js的网页及获取JS返回值
- HTML基础之JS