Js面试常客之手写实现call、apply、bind方法(一看就会,附详细截图)

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

initObj.showName.call(newObj)

打印信息发生改变

此时的this指向已经改变,指向了newObj 。使用apply跟bind也能达到同样的效果

initObj.showName.apply(newObj)

initObj.showName.bind(newObj)() //返回一个函数,需要再执行一次

验证这三个函数可以改变this指向之后,接下来实现自己的函数,加深理解。

先将自己的方法加入函数的原型中,让所有函数都可以调用

Function.prototype.myCall = function(context){

context = context || window

context.showName = this //保存之前对象的方法,即下面的initObj.showName

let result = context.showName() //这一步改变了调用方法的对象,即this指向了当前对象context

delete context.showName

return result

}

initObj.showName.myCall(newObj)

此时打印出来与 initObj.showName.call(newObj) 结果一致。

另外一种情况是带有参数,为initObj添加一个changeName方法

let initObj = {

name:‘gao’,

age:18,

showName:function(){

console.log(this.name,‘name’)

},

changeName:function(name){

this.name = name

}

}

执行如下代码

initObj.changeName(‘lion’)

console.log(initObj,‘initObj’)

可想而知,打印如下

调用call方法

let newObj = {

name:‘leo’,

age:20,

}

initObj.changeName.call(newObj,‘ggj’) //改变this指向,指向newObj

console.log(newObj,‘newObj’) //打印newObj,查看属性改变

接下来手写实现自己的call函数,在原来的基础上修改并打印出来

Function.prototype.myCall = function(context){

context = context || window

context.changeName = this //保存changeName方法,即下面的 initObj.changeName

let args = […arguments].slice(1) //arguments包括对象与参数在里面的类数组,这一步提取出参数

let result = context.changeName(…args) //改变this指向,传入参数,即下面的 ‘ggj’

delete context.changeName

return result

}

initObj.changeName.myCall(newObj,‘ggj’)

console.log(newObj,‘newObj–> myCall’)

手写call方法实现完毕,接下来实现apply方法,apply方法与call方法类似,只是传参方式有所变化,call是排列传参,而apply是通过数组传参,直接上代码

Function.prototype.myApply = function(context){

context = context || window

context.changeName = this //保存之前对象的方法

//let args = […arguments].slice(1) //call处理参数方式

let args = […arguments[1]] //arguments[1]为传入的参数类数组,即[‘ggj’]

let result = context.changeName(…args) //这一步改变了调用方法的对象,this指向了context

delete context.changeName

return result

}

initObj.changeName.myApply(newObj,[‘ggj’])

console.log(newObj,‘newObj–> myApply’)

打印结果与apply函数一致

至此,手写apply方法也实现 了,接下来就是bind方法,bind方法的传参方式与call方法传参方式一致,即表示处理参数部分相同,但是bind有一个独特的部分,就是返回的是一个函数,代码如下

Function.prototype.myBind = function(context){

分享

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值