手动实现js中的call、bind、instanceof的详细操作
发布于
by
s中call能够改变this的指向、bind能改变this的指向，并返回一个函数，这是怎么实现的呢？本文将带你…
s中call能够改变this的指向、bind能改变this的指向，并返回一个函数，这是怎么实现的呢？本文将带你一步步实现这些功能，希望对学习JavaScript的朋友有帮助。
现在的前端门槛越来越高，不再是只会写写页面那么简单。模块化、自动化、跨端开发等逐渐成为要求，但是这些都需要建立在我们牢固的基础之上。不管框架和模式怎么变，把基础原理打牢才能快速适应市场的变化。下面介绍一些常用的源码实现：
| call实现
bind实现 new实现 instanceof实现 Object.create实现 深拷贝实现 发布订阅模式 |
call
call用于改变函数this指向，并执行函数
（推荐js教程，欢迎学习！）
一般情况，谁调用函数，函数的this就指向谁。利用这一特点，将函数作为对象的属性，由对象进行调用，即可改变函数this指向，这种被称为隐式绑定。apply实现同理，只需改变入参形式。
| let obj = {
name: ‘JoJo’ } function foo(){ console.log(this.name) } obj.fn = foo obj.fn() // log: JOJO |
实现
| 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’) //删除_fn属性 return res } |
使用
| let obj = {
name: ‘JoJo’ } function foo(){ console.log(this.name) } foo.mycall(obj) // JoJo |
bind
bind用于改变函数this指向，并返回一个函数
注意点：《作为构造函数调用的this指向维护原型链》
| Function.prototype.mybind = function (oThis) {
if(typeof this != ‘function’){ throw ‘caller must be a function’ } let fThis = this //Array.prototype.slice.call 将类数组转为数组 let arg = Array.prototype.slice.call(arguments,1) let NOP = function(){} let fBound = function(){ let arg_ = Array.prototype.slice.call(arguments) // new 绑定等级高于显式绑定 // 作为构造函数调用时，保留指向不做修改 // 使用 instanceof 判断是否为构造函数调用 return fThis.apply(this instanceof fBound ? this : oThis, arg.concat(arg_)) } // 维护原型 if(this.prototype){ NOP.prototype = this.prototype } fBound.prototype = new NOP() return fBound } |
使用
| let obj = {
msg: ‘JoJo’ } function foo(msg){ console.log(msg + ” + this.msg) } let f = foo.mybind(obj) f(‘hello’) // hello JoJo |
new
new使用构造函数创建实例对象，为实例对象添加this属性和方法
new的过程：
| 创建新对象
新对象__proto__指向构造函数原型 新对象添加属性方法（this指向） 返回this指向的新对象 |
| 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时，证明不存在原型链中，否则存在。
| function instanceof_(left, right){
left = left.__proto__ while(left !== right.prototype){ left = left.__proto__ // 查找原型，再次while判断 if(left === null){ return false } } return true } |
Object.create
Object.create创建一个新对象，使用现有的对象来提供新创建的对象的__proto__，第二个可选参数为属性描述对象
| 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 } |
深拷贝
深拷贝为对象创建一个相同的副本，两者的引用地址不相同。当你希望使用一个对象，但又不想修改原对象时，深拷贝是一个很好的选择。这里实现一个基础版本，只对对象和数组做深拷贝。
实现思路：遍历对象，引用类型使用递归继续拷贝，基本类型直接赋值
| 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：
| 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) } } |
使用
| let bus = new EventBus()
bus.on(‘add’, function(a,b){ console.log(a+b) }) bus.emit(‘add’, 10, 20) //30 |
以上就是手动实现js中的call、bind、instanceof的详细内容，更多请关注网站的其它相关文章！
类别：WordPress函数讲解、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！