在 js 中，经常会用到 apply，call，bind，new，这几个方法在前端占据非常重要的作用，今天来看一下这些方法是如何实现，方便更加深入的理解它们的运作原理。
this 的绑定问题
引用一点点其他知识点：一个方法的内部上下文 this 如何确定？
一个方法的调用分为一下四种：
方法直接调用，称之为函数调用，当前的上下文 this，绑定在全局的 window 上，在严格模式 use strict 下，this 为 null
方法作为一个对象的属性，这个是否通过对象调用方法，this 绑定在当前对象上。如下：
let dog = {
name: ‘ 八公 ’,
sayName: function() {
console.log(this.name)
}
}
dog.sayName() // 八公
apply，call 调用模式，当前的方法的上下文为方法调用的一个入参，如下：
function sayHello() {
console.log(this.hello)
}
let chineseMan = {
hello: ‘ 你好啊 ’
}
sayHello.apply(chineseMan) // 你好啊
let englishMan = {
hello: ‘how are you’
}
sayHello.apply(englishMan) // how are you
构造函数的调用，当前方法的上下文为新生的实例，如下
// 声明构造函数
function Animal(name) {
this.name = name
this.sayName = function() {
console.log(this.name)
}
}
let dog = new Animal(‘dog’)
dog.sayName() // dog
let cat = new Animal(‘cat’)
cat.sayName() // cat
正文
apply 实现
思路：apply 方法实现在 Function.prototype 中
获取到当前调用方法体
获取方法的入参
绑定方法体中的上下文为传入的 context– 使用的方法就是对象调用属性方法的方式绑定
调用方法
Function.prototype.myApply = function() {
let _fn = this
if (typeof _fn !== ‘function’) {
throw new TypeError(‘error’)
}
let ctx = […arguments].shift()
// 因为 apply 的入参是数组，所有只需要取第一个
let args = […arguments].slice(1).shift()
ctx.myApplyFn = _fn
// 由于 apply 会将原方法的参数用数组包裹一下，所以需要展开参数
let res = ctx.myApplyFn(…args)
delete ctx.myApplyFn
return res
}
call 实现
思路：实现在 Function.prototype 中，大致和 apply 相似，却别在对于参数的处理上
获取到当前调用方法体
获取方法的入参
绑定方法体中的上下文为传入的 context
调用方法
Function.prototype.myCall = function() {
let _fn = this
if (typeof _fn !== ‘function’) {
throw new TypeError(‘error’)
}
let ctx = […arguments].shift()
// call 使用的多个入参的方式，所有直接取参数第二个参数开始的所有入参，包装成一个数组
let args = […arguments].slice(1)
ctx.myCallFn = _fn
let res = ctx.myCallFn(…args)
delete ctx.myCallFn
return res
}
bind 实现
思路：实现在 Function.prototype 中，并且返回一个已经绑定了上下文的函数。利用闭包可以捕获函数上下文的变量来实现，总体上比起之前两个方法稍微复杂一些。
获取调用 bind 的实例方法体
获取需要绑定的上下文 context
声明闭包函数
闭包函数中绑定 context 到实例方法体中
闭包函数中调用原来的方法体
返回闭包函数
Function.prototype.myBind = function() {
let _fn = this
if (typeof _fn !== ‘function’) {
throw new TypeError(‘error’)
}
let ctx = […arguments].shift()
let args = […arguments].slice(1)
return function() {
// 因为 bind 的调用方式，会有 bind({}, ‘para1’, ‘para2’)(‘para3’, ‘para4’)，这个时候需要将外面参数和内部参数拼接起来，之后调用原来方法
args = args.concat([…arguments])
ctx.myBindFn = _fn
let res = ctx.myBindFn(…args)
delete ctx.myBindFn
return res
}
}
codepen 演示 需要翻墙 <p class=”codepen” data-height=”265″ data-theme-id=”0″ data-default-tab=”js,result” data-user=”beyondverage0908″ data-slug-hash=”PXMyqB” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”rewrite bind”> <span>See the Pen rewrite bind by avg (@beyondverage0908) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></script>
new 方法实现
思路：需要明白 new 到底做了什么
生成一个新的实例对象
实例对象__proto__链接到构造函数的 prototype 对象
绑定构造函数的上下文为当前实例
获取参数，传入参数，并调用构造函数
function newObj() {
let _o = {}
let constructor = […arguments].shift()
let args = […arguments].slice(1)
if (typeof constructor !== ‘function’) {
throw new TypeError(‘error’)
}
_o.__proto__ = constructor.prototype
// 第一种调用方式：借助 apply，call，或者 bind 实现绑定_o
// constructor.apply(_o, args)
// 第二种，使用属性方法绑定的方式
_o.myNewFn = constructor
_o.myNewFn(…args)
delete _o.myNewFn
return _o
}
// how to use – 如何使用 function Animal(name, weight) {
this.name = name
this.weight = weight
}
let dog = newObj(Animal, ‘dog’, ’18kg’)// the animal name: dog weight: 18kgconsole.log(the animal name: ${dog.name} weight: ${dog.weight})
let cat = newObj(Animal, ‘cat’, ’11kg’)// the animal name: cat weight: 11kgconsole.log(the animal name: ${cat.name} weight: ${cat.weight})
codepen 需要翻墙
<p class=”codepen” data-height=”265″ data-theme-id=”0″ data-default-tab=”js,result” data-user=”beyondverage0908″ data-slug-hash=”MZNPoK” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;” data-pen-title=”MZNPoK”> <span>See the Pen MZNPoK by avg (@beyondverage0908) on CodePen.</span></p><script async src=”https://static.codepen.io/ass…;></script>
结语
熟悉函数内部的实现，了解内部的原理，对理解运行会有很多好处，亲自实现一遍会给你很多领悟。同时这些知识点又是非常重要的。