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){

分享

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