本文摘自PHP中文网，作者angryTom，侵删。
js中call能够改变this的指向、bind能改变this的指向，并返回一个函数，这是怎么实现的呢？本文将带你一步步实现这些功能，希望对学习JavaScript的朋友有帮助。
前言
现在的前端门槛越来越高，不再是只会写写页面那么简单。模块化、自动化、跨端开发等逐渐成为要求，但是这些都需要建立在我们牢固的基础之上。不管框架和模式怎么变，把基础原理打牢才能快速适应市场的变化。下面介绍一些常用的源码实现：
call实现
bind实现
new实现
instanceof实现
Object.create实现
深拷贝实现
发布订阅模式
call
call用于改变函数this指向，并执行函数
（推荐 js教程 ，欢迎学习！）
一般情况，谁调用函数，函数的this就指向谁。利用这一特点，将函数作为对象的属性，由对象进行调用，即可改变函数this指向，这种被称为隐式绑定。apply实现同理，只需改变入参形式。
1 2 3 4 5 6 7 8 | let obj = {
name: 'JoJo'
}
function foo(){
console.log(this.name)
}
obj.fn = foo
obj.fn()
|
实现
1 2 3 4 5 6 7 8 9 10 11 | Function.prototype.mycall = function () {
if(typeof this !== 'function'){
throw 'caller must be a function'
}
let othis = arguments[0] || window
othis._fn = this
let arg = [...arguments].slice(1)
let res = othis._fn(...arg)
Reflect.deleteProperty(othis, '_fn')
return res
}
|
使用
1 2 3 4 5 6 7 | let obj = {
name: 'JoJo'
}
function foo(){
console.log(this.name)
}
foo.mycall(obj)
|
bind
bind用于改变函数this指向，并返回一个函数
注意点：
作为构造函数调用的this指向
维护原型链
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | Function.prototype.mybind = function (oThis) {
if(typeof this != 'function'){
throw 'caller must be a function'
}
let fThis = this
let arg = Array.prototype.slice.call(arguments,1)
let NOP = function(){}
let fBound = function(){
let arg_ = Array.prototype.slice.call(arguments)
return fThis.apply(this instanceof fBound ? this : oThis, arg.concat(arg_))
}
if(this.prototype){
NOP.prototype = this.prototype
}
fBound.prototype = new NOP()
return fBound
}
|
使用
1 2 3 4 5 6 7 8 | let obj = {
msg: 'JoJo'
}
function foo(msg){
console.log(msg + '' + this.msg)
}
let f = foo.mybind(obj)
f('hello')
|
new
new使用构造函数创建实例对象，为实例对象添加this属性和方法
new的过程：
创建新对象
新对象__proto__指向构造函数原型
新对象添加属性方法（this指向）
返回this指向的新对象
1 2 3 4 5 6 7 8 9 10 | function new_(){
let fn = Array.prototype.shift.call(arguments)
if(typeof fn != 'function'){
throw fn + ' is not a constructor'
}
let obj = {}
obj.__proto__ = fn.prototype
let res = fn.apply(obj, arguments)
return typeof res === 'object' ? res : obj
}
|
instanceof
instanceof 判断左边的原型是否存在于右边的原型链中。
实现思路：逐层往上查找原型，如果最终的原型为null时，证明不存在原型链中，否则存在。
1 2 3 4 5 6 7 8 9 10 | function instanceof_(left, right){
left = left.__proto__
while(left !== right.prototype){
left = left.__proto__
if(left === null){
return false
}
}
return true
}
|
Object.create
Object.create创建一个新对象，使用现有的对象来提供新创建的对象的__proto__，第二个可选参数为属性描述对象
1 2 3 4 5 6 7 8 9 | function objectCreate_(proto, propertiesObject = {}){
if(typeof proto !== 'object' || typeof proto !== 'function' || proto !== null){
throw('Object prototype may only be an Object or null:'+proto)
}
let res = {}
res.__proto__ = proto
Object.defineProperties(res, propertiesObject)
return res
}
|
深拷贝
深拷贝为对象创建一个相同的副本，两者的引用地址不相同。当你希望使用一个对象，但又不想修改原对象时，深拷贝是一个很好的选择。这里实现一个基础版本，只对对象和数组做深拷贝。
实现思路：遍历对象，引用类型使用递归继续拷贝，基本类型直接赋值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function deepClone(origin) {
let toStr = Object.prototype.toString
let isInvalid = toStr.call(origin) !== '[object Object]' && toStr.call(origin) !== '[object Array]'
if (isInvalid) {
return origin
}
let target = toStr.call(origin) === '[object Object]' ? {} : []
for (const key in origin) {
if (origin.hasOwnProperty(key)) {
const item = origin[key];
if (typeof item === 'object' && item !== null) {
target[key] = deepClone(item)
} else {
target[key] = item
}
}
}
return target
}
|
发布订阅模式
发布订阅模式在实际开发中可以实现模块间的完全解耦，模块只需要关注事件的注册和触发。
发布订阅模式实现EventBus：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | class EventBus{
constructor(){
this.task = {}
}
on(name, cb){
if(!this.task[name]){
this.task[name] = []
}
typeof cb === 'function' && this.task[name].push(cb)
}
emit(name, ...arg){
let taskQueen = this.task[name]
if(taskQueen && taskQueen.length > 0){
taskQueen.forEach(cb=>{
cb(...arg)
})
}
}
off(name, cb){
let taskQueen = this.task[name]
if(taskQueen && taskQueen.length > 0){
let index = taskQueen.indexOf(cb)
index != -1 && taskQueen.splice(index, 1)
}
}
once(name, cb){
function callback(...arg){
this.off(name, cb)
cb(...arg)
}
typeof cb === 'function' && this.on(name, callback)
}
}
|
使用
1 2 3 4 5 | let bus = new EventBus()
bus.on('add', function(a,b){
console.log(a+b)
})
bus.emit('add', 10, 20)
|
以上就是手动实现js中的call、bind、instanceof的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
js函数的回调
自学 html5 要多久
学js前要学什么
js 中 settimeout 和 setinterval 区别
jq实现弹幕效果
akjs是个什么软件
三种js数组去重的简洁方案
js 判断值是否为数字
js中行内style怎么写？
js不跳转传值php
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 手动实现js中的call、bind、instanceof
