js 高阶函数 AOP 切片编程 重写数组原型方法

概念

AOP(面向切片编程) 就是把一些与业务逻辑模块无关的功能抽离出来，然后通过“动态织入”的方式参入业务的逻辑模块中。这样设计的好处是，首先可以保证业务逻辑模块的纯净和高内聚性；其次可以方便的复用模块。

示例

function say(who){
    console.log(`${who} 说话`)
}

Function.prototype.before = function(callback){
    return (who)=>{
        callback()
        this(who) // 指向say
    }
}

let newSay = say.before(function(){
    console.log('先刷牙')
})
newSay('张三')

/**
 * 重写数组原型方法
 * push shift unshift pop reverse sort splice 会导致数组本身变化
 */

const oldArrayMethods = Array.prototype;

// 创建对象 原型指向oldArrayMethods
export const arrayMethods = Object.create(oldArrayMethods)

const methods = [
    'push',
    'shift',
    'unshift',
    'pop',
    'reverse',
    'sort',
    'splice'
]

// AOP 切片编程
methods.forEach(methods => {
    arrayMethods[methods] = function (...arg) {
        // 调用Array原型方法
        const res = oldArrayMethods[methods].apply(this, arg)

        // push unshift 添加的元素可能还是一个对象
        let inserted; // 单前添加的元素
        switch(methods){
            case 'push':
            case 'unshift':
                inserted = arg
                break;
            case 'splice': // arr.splice(0,1,2)
                inserted = arg[2]
                break;
        }
        // 观察新的值
        // if(inserted) this.__ob__.observerArray(inserted);
        
        return res
    }
})

// --------------------

// 重写数组方法 修改原型
arr.__proto__ = arrayMethods