JS經典面試題04-原型鏈Foo.getName

在這裏插入圖片描述

1.1-答案揭曉

在這裏插入圖片描述

1.2-原理解析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /*總結:本題目覆蓋知識點 
        1. 變量不使用var聲明,默認是全局變量。 沒有作用域限制
        2. this指向
        3. 靜態成員 與 實例成員
        4. 原型
        5. 預解析
        */
       
        /* 題幹 */

        //1.聲明全局函數Foo
        function Foo() {
            //聲明全局變量getName : 本質給window添加getName方法
            getName = function () {
                console.log(1);
            };
            /* 
            沒有使用new : this指向window
            使用new : this指向new創建的空對象(實例化對象)
            */
            return this;
        }

        //2.給Foo添加靜態成員 : getName
        Foo.getName = function () {
            console.log(2);
        }
        //3.給Foo添加原型方法getName
        Foo.prototype.getName = function () {
            console.log(3);
        }
        //4.聲明全局函數getName
        var getName = function () {
            console.log(4);
        };
        //5.聲明全局函數getName (被var覆蓋)
        function getName() {
            console.log(5);
        }

        /* 題目 */

        //1.調用Foo函數對象自己的方法
        Foo.getName();//2
        //2.調用全局函數
        getName();//4
        //3.調用Foo() 返回window    繼續調用window對象的getName方法
        Foo().getName();//1
        //4.調用全局函數 getName
        getName();//1
        //5. new Foo.getName : 這裏並沒有調用Foo,所以其實是調用Foo函數對象自己的getName
        //前面這個new是嚇唬你的
        new Foo.getName()//2
        //6. new Foo() :返回實例化對象  調用getName訪問原型中的方法 
        new Foo().getName();//3
        //7. 多出來的new是嚇唬你的,原理與6一致
        // 相當於  new   (new Foo.getName())  與6中的this指向有區別
        new new Foo().getName();//3   
    </script>
</body>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章