DIV CSS 佈局教程網

問題1:作用域

(function() {
    var a = b = 5;
})();
console.log(b);
// 非嚴格狀態顯示  5
// a 是局部變量，b 是全局變量
// 嚴格狀態顯示 b is not defined

(function() {
    'use strict';
    var a = window.b = 5;
})();
console.log(b)
// 嚴格狀態下顯示 5

問題2:創建“內置”方法

        window.onload = function(){
            var str = "hello";
            var oText = document.getElementById('text');
// Javascript的繼承及原型屬性的知識，下面這個方法可以檢測在自己定義函數之前有沒有這個函數存在，避免重復定義
            String.prototype.repeatify = String.prototype.repeatify || function(times){
                var str = '';
                for(var i=0;i<times;i++){
                    str += this;
                }
                return str;
            }
            oText.innerHTML = str.repeatify(3);
        }

問題3:聲明提前

        window.onload = function(){
            function test(){
                console.log(a);
                console.log(foo());
                var a=1;
                function foo(){
                    return 2;
                }
            }
            test();
        }
// 上面這段代碼相當於下面這段代碼
          window.onload = function(){
             function test(){
                 var a;
                 function foo(){
                    return 2;
                  }
                 console.log(a);
                 console.log(foo());
                 a = 1;
                 }
    
              test();
        }

問題4:Javascript中的this

        window.onload = function(){
            var fullname = 'John Doe';
            var obj = {
                fullname:'Colin lhrig',
                prop:{
                    fullname:'Aulia De Rose',
                    getFullname:function(){
                        return this.fullname;
                    }
                }
            }
            var oText = document.getElementById('text');
            oText.innerHTML = obj.prop.getFullname();
        }
// 顯示結果為 Aulia De Rose
            var test = obj.prop.getFullname;
            oText.innerHTML = test();
// 顯示結果為 John Doe

　　Javascript中關鍵字this所指代的函數上下文，取決於函數是怎樣被調用的，而不是怎麼被定義的。在第一個console.log()，getFullname()被作為obj.prop對象被調用。因此，當前的上下文指代後者，函數返回這個對象的fullname屬性。相反，當getFullname()被賦予test變量，當前的上下文指代全局變量window，這是因為test被隱形的作為全局變量的屬性。基於這一點，函數返回window的fullname。

問題5: call()和apply()

        window.onload = function(){
            var fullname = 'John Doe';
            var obj = {
                fullname:'Colin lhrig',
                prop:{
                    fullname:'Aulia De Rose',
                    getFullname:function(){
                        return this.fullname;
                    }
                }
            }
            var oText = document.getElementById('text');
            oText.innerHTML = obj.prop.getFullname();
        }
// 顯示結果為 Aulia De Rose
            var test = obj.prop.getFullname;
            oText.innerHTML = test.call(obj.prop);
// 顯示結果為 Aulia De Rose

　　call() 或者 apply()方法可以強制轉換上下文