js的一道經典題

時間 2019-11-07

原文原文鏈接

題

function Foo(){
        getName = function () {alert(1);}
        return this;
    }
    Foo.getName = function() {alert(2);};
    Foo.prototype.getName = function(){alert(3);};
    var getName = function(){alert(4);};
    function getName(){alert(5)};

    Foo.getName();
    getName();
    Foo().getName();
    getName();
    new Foo.getName();
    new Foo().getName();    
    new new Foo().getName();

答

2 ----Foo.getName();
    4 ----getName();
    1 ----Foo().getName();
    1 ----getName();
    2 ----new Foo.getName();
    3 ----new Foo().getName();
    3 ----new new Foo().getName();

概念

爲了閱讀效益最大化，請先了解執行環境和變量對象的文字性概念。html

執行環境挺常見的，它是長這樣的。它的特性是先進後出(stack)。函數

上述圖片是來源於代碼執行到Foo( ).getName( )。this

(anonymous function) 其實就是global contextspa

表示方法：prototype

ECStack = [
        functionContext(Foo),    /*這不是函數*/
        GlobalContext    
    ]

變量對象也挺常見，在Chrome中長這樣。指針

表示方法一般是：code

//以上述代碼還沒有執行時爲例
    VO = {    
        Foo: {
            <reference to function>,
            return this
        }
        getName: <reference to function>
    }

分析

代碼執行有兩個階段htm

進入環境（代碼未執行，已編譯）對象
代碼執行blog

如今一塊兒來看看每一行代碼的執行

上述代碼未執行時，變量對象是這樣的。

VO = {
        Foo: {
            <reference to function>,
            return this
        }
        getName: <reference to function(){alert(5)}>
    }

執行"第一行"代碼

該行代碼執行後VO會變成這樣。

VO = {
        Foo: { 
            <reference to function>,
            getName: <reference to function() {alert(2)},
            return this
        }
        getName: <reference to function(){alert(5)}>
    }

VO的Foo圖示是這樣的

執行"第二行"代碼

該行代碼執行後VO會變成這樣。

VO = {
        Foo: { 
            <reference to function>,
            getName: <reference to function() {alert(2)},
            prototype: {
                getName: <reference to function(){alert(3)}
                },
            return this,
                
        }
        getName: <reference to function(){alert(5)}>
    }

VO的Foo圖示是這樣

執行"第三行"代碼

該行代碼執行後VO會變成這樣。

VO = {
        Foo: { 
            <reference to function>,
            getName: <reference to function() {alert(2)},
            prototype: {
                getName: <reference to function(){alert(3)}
                },
            return this
        }
        getName: <reference to function(){alert(4)}>
    }

執行"第四行"代碼（第一問）

直接去VO裏尋找結果發現alert 2。

執行"第五行"代碼（第二問）

getName() //等於
window.getName();

一樣直接在VO裏能夠直接找到答案 alert 4。

執行"第六行"代碼（第三問）

這裏比上述多了一個函數調用，Foo()調用返回this(指向window)，因此此時

Foo().getName()； ／／等於
window.getName()

同時注意：
因爲Foo()調用，致使VO發生了變化。最後alert 1.

VO = {
        Foo: { 
            <reference to function>,
            getName: <reference to function() {alert(2)},
            prototype: {
                getName: <reference to function(){alert(3)}
                },
            return this
        }
        getName: <reference to function(){alert(1)}>
    }