獨家解析Javascript原型繼承 - 之函數(shù)原型和AOP

ispring 發(fā)布于2019-08-20 18:02 / 3146人閱讀

摘要：引子獨家解析原型繼承已經(jīng)比較全面的分析了自定義函數(shù)類型，內(nèi)置基本類和內(nèi)置對象類型的的以及的原型鏈。鑒于函數(shù)是的一等公民，另辟新篇介紹函數(shù)的原型及其應(yīng)用。函數(shù)本身也是對象，它遵循獨家解析原型繼承所描述的自定義函數(shù)類型對象的原型法則。

引子

獨家解析Javascript原型繼承已經(jīng)比較全面的分析了自定義函數(shù)類型，JS內(nèi)置基本類(undefined, null, bool, number, string, symbol)和JS內(nèi)置對象類型（Error, Date, Function)的design-time的prototype, 以及run-time的__proto__原型鏈。鑒于函數(shù)是JS的一等公民，另辟新篇介紹函數(shù)的原型及其應(yīng)用。

JS函數(shù)類型的構(gòu)造

通常情況下定義一個函數(shù)：

function add1(a, b) {
    return a + b;
}

console.log(add1(1,2)) //3

通過new Function也能構(gòu)造：

var add2 = new Function("a", "b", "return a + b");
console.log(add2(1,2)) //3

兩種方式達到的目的是一致的。而add1和add2的run-time __proto__都是Function.prototype, 可以看作add1和add2都是透過new Function構(gòu)造出來的，而function關(guān)鍵子就是調(diào)用new Function構(gòu)造的便利途徑。

add1.__proto__ = Function.prototype //true
add2.__proto__ = Function.prototype //true

函數(shù)本身也是對象，它遵循獨家解析Javascript原型繼承所描述的自定義函數(shù)類型對象的原型法則。

//add1 創(chuàng)自于Function類型，是Function的實例
add1.__proto__ //[Function]
add instanceof Function //true

// add1 也繼承了object類型的原型
add1.__proto__.__proto__ //{}
add1 instanceof Object //true

// 所以add1 run-time __proto__原型鏈的頂端同樣是null
add1.__proto__.__proto__.__proto__ // null

AOP編程實現(xiàn)

至此我們了解到，透過funtion關(guān)鍵字定義的函數(shù)，實質(zhì)是Fuction類型的實例，和通過new Function方式構(gòu)造本身是一樣的。所以我們通過修改Function的design-time的prototype，來實現(xiàn)面向切面編程（AOP）

值得一提的是：我們（程序員）一般情況下只推薦修改design-time的prototype，而不去更改run-time的__proto__, 否則修改run-time的__proto__會造成程序難以維護和閱讀，增加不確定的運行錯誤。Object.setPrototypeOf可以更改對象實例run-time的__proto__

面向切面編程（AOP，Aspect-Oritented Programming), 簡而言之，可理解為函數(shù)調(diào)用時，在該函數(shù)執(zhí)行前或／和執(zhí)行后做一些通用的工作，比如做log，記錄執(zhí)行時間等。這需要一個代理函數(shù)，把原始函數(shù)打扮成具有做log等功能的新函數(shù)。實際中調(diào)用該代理函數(shù)

function foo() {
     console.log("foo runs");
}

foo(); // foo runs

現(xiàn)在我們想在foo函數(shù)執(zhí)行前后分別打印log，而不修改foo函數(shù)本身。

Function.prototype.before = function() {
    var _self = this;
    return function() {
        console.log("before foo calls");
        return _self.apply(this, arguments);
    }
}

Function.prototype.after = function() {
    var _self = this;
    return function() {
        var ret = _self.apply(this, arguments);
        console.log("after foo calls");
        return ret;
    }
}

//這里foo就具有了執(zhí)行前后打印log的功能
foo = foo.before().after();
foo();
// before foo calls
// foo runs
// after foo calls

把打印log的功能提出來，做成更通用的邏輯。

Function.prototype.before = function(beforeFn) {
    var _self = this;
    return function() {
        beforeFn.apply(this, arguments);
        return _self.apply(this, arguments);
    }
}

Function.prototype.after = function(afterFn) {
    var _self = this;
    return function() {
        var ret = _self.apply(this, arguments);
        afterFn.apply(this, arguments);
        return ret;
    }
}

//包裝成具有l(wèi)og功能的新的foo函數(shù)
foo = foo.before(function() {
    console.log("foo enters")
}).after(function(){
    console.log("foo exits")
});
foo();
// foo enters
// foo runs
// foo exits

由此，可把函數(shù)調(diào)用和通用的log能功能掛接（hook）起來了。