关于js的一些重构,reduce、new、apply、instanceof等

重构new

  //重写new
function _new(FC, ...args) {
    if (typeof FC !== 'function') throw new TypeError('参数1必须是函数')
    if (!FC.prototype) throw new TypeError('参数1不能是箭头函数')
    //根据FC原型来得到当前的对象
    let obj = Object.create(FC.prototype)
    //执行函数,解决this的指向
    let ret = FC.apply(obj, args)
    console.log(ret)
    //判断函数执行结果,引用类型返回指定数据,没有返回值或者是基础类型返回当前对象
    if (ret !== null && /object|function/i.test(typeof ret)) {
        return ret
    }
   return obj
}

重构bind

//重写bind
        Function.prototype.myApply = function (Ctx, args) {
            if (!Array.isArray(args)) throw new TypeError('参数2必须是数组')
            //判断要指向的环境是否为null或undefined
            Ctx = Ctx == null ? window : (typeof Ct != 'object' ? Object(Ctx) : Ctx)
            //给传入的指向的对象添加一个属性让他等于this
            const methodName = Symbol()
            Ctx[methodName] = this
            //执行这个this 方法
            let ret = Ctx[methodName](...args)
            //删除这个属性,然后返回这个执行结果
            delete Ctx[methodName]
            return ret
        }
        function fn1(a, b, c,d,e) {
            console.log(this,a,b,c,d,e)
            return '你的姓名为:' + this.name
        };
        var obj = { name: 2222, fn: 'abc' };
        
        console.log(fn1.myApply(obj, [1, 2, 3, 4,5]))

Bind

 Function.prototype.myBind=function(Ctx,...args1){
            //保存this,当前调用的函数
            const func=this
            //返回一个函数
            return function(...args2){
                func.apply(Ctx,[...args1,...args2])
            }
        }

instanceof

  //instanceof
function _instanceof(obj, FC) {
    if (typeof obj != 'object') throw new TypeError('必须是引用')
    //不能是函数
    if (typeof obj === 'function' && obj == null) throw false
    //得到FC的原型
    let prototype = FC.prototype
    if (!prototype) return false

    //根据兼容处理 es6 typeof Symbol存在暂时性死区
    if (typeof Symbol === 'function') {
        //es6存在hasInstance方法
        var insFn = FC[Symbol.hasInstance]
        if (typeof insFn === 'function') {
            return insFn.call(FC, obj)
        }
    }
    //针对老版本浏览器  
    //es5,通过来 对象.__proto__ === 类.prototype   根据原型链来进行查找
    var proto = Object.getPrototypeOf(obj)
    while (1) {
        if (proto === null) return false
        if (proto === prototype) return true
        proto = Object.getPrototypeOf(proto)
    }
}

forEach

 //forEach
        Array.prototype._forEach = function (fn, thisArg) {
            if (typeof fn !== 'function') throw '参数必须是函数'
            // if (!Array.isArray(thisArg)) throw '只能数组使用'

            let arr = this
            for (let i = 0; i < arr.length; i++) {
                fn.call(thisArg, arr[i], i, arr)
            }
        }
        window.value = 0
        let obj = { value: 1 }
        let arr = ["_", "for", "each"]
        let arr1=[1,2,3,4]
        arr._forEach(
            function (ele, index, arr) {
                console.log("ele, index, arr", ele, index, arr);
                console.log("this.vaule", this.value);
            }, obj)

map

 //map
Array.prototype._map = function (fn, thisArg) {
    if (typeof fn !== 'function') throw '参数必须是函数'
    if (!Array.isArray(thisArg)) throw '只能数组使用'
    const arr = this
    //返回的新数字
    const newArr = []
    for (let i = 0, len = arr.length; i < len; i++) {
        //将每次执行回调函数的结果push到新数组中
        newArr.push(fn.call(thisArg, arr[i], i, arr))
    }
    return newArr
}
// window.value = 0
// let obj = { value: 1 }
// let arr = ["_", "for", "each"]

// const newArr = arr._map(
//     function (ele, index) {
//         return ele + "你好" + index
//     }, obj)
// console.log(newArr);

reduce

 //reduce
function array_reduce(arr,fn,initValue){
    if(arr.length=0) return
    if(arr.length===1) return arr[0]
    //假设不存在初始值
    var index=1
    var value=arr[0]
    if(initValue!==undefined){
        index=0;value=initValue
    }
    for(;index<arr.length;index++){
        value=fn(valeu,arr[index],index,arr)
    }
    return value
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值