手动实现js中的call、bind、instanceof的详细操作

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主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/5984.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注