手撕JavaScript中常用的方法call,apply,bind等

forEach

function forEach(arr, fn) {
	for (let i = 0; i < arr.length; i++) {
	    fn(arr[i])
    }
}

filter

function filter(arr, fn) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (fn(arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}

map

function map(arr, fn) {
    let res = []
    for (let value of arr) {
        res.push(fn(value))
    }
    return res
}

every

// 只要有一个返回false就退出, 只要有一个不满足条件就行
function every(arr, fn) {
    let flag = true
    for (let value of arr) {
        flag = fn(value)
        if (!flag) {
            break
        }
    }
    return flag
}

some

// 只要有一个返回true就退出，只要有一个满足条件就行
function some(arr, fn) {
    let flag = false
    for (let value of arr) {
        flag = fn(value)
        if (flag) {
            break
        }
    }
    return flag
}

call

let obj = {
    a: 2
}
function foo(e, a, b, c) {
    console.log(e, a, b, c, this.a)
}
// 手写call
Function.prototype.myCall = function (obj = window) { // 不传参默认为window
    // this指向实例对象
    obj.fn = this 
    // 参数
    const args = [...arguments].slice(1)
    // 这里利用了隐式绑定，执行实例对象函数，fn是挂载在obj身上的对象，所以指向fn时this指向obj
    const res = obj.fn(...args)
    delete obj.fn
    return res
}

foo(1)
foo.myCall(obj)

apply

// 手写apply
Function.prototype.myApply = function (obj = window) {
    obj.fn = this
    let result
    if (arguments[1]) {
        result = obj.fn(...arguments[1])
    } else {
        result = obj.fn()
    }
    delete obj.fn
    return result
}
foo.myApply(obj, [1, 2])

bind

// 手写bind
// Function.prototype.myBind = function (context = window) { // 原型上添加myBind方法
//     var argumentsArr = Array.prototype.slice.call(arguments) // 类数组转数组
//     var args = argumentsArr.slice(1) // 后面的参数
//     var self = this // 调用的方法本身
//     return function () { // 返回一个待执行的方法
//         var newArgs = Array.prototype.slice.call(arguments) // 返回函数的arguments
//         self.apply(context, args.concat(newArgs)) // 合并两args
//     }
// }

Function.prototype.myBind = function (obj = window) {
    obj.fn = this
    let firstArg = [...arguments].slice(1)
    return function () {
        obj.fn(...firstArg.concat([...arguments]))
    }
}

let foo1 = foo.myBind(obj, 10)
foo1(1)

日常使用的方法

once

function once(fn) {
   let done = false
   return function () {
       if (!done) {
           done = true
           fn.apply(this, arguments)
       }
   }
}

memoize

// 记忆函数
function memoize(fn) {
    const cache = {}
    return () => {
        let key = JSON.stringify(arguments)
        cache[key] = cache[key] || fn.apply(this, arguments)
        return cache[key]
    }
}

持续更新中。。。