Javascript--this指針

時間 2019-11-11
原文原文鏈接
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script>
            var name = "The Window";   //至關於 window.name = "The Window";
            
            /****************字面量建立對象**************/

            var object1 = {   
            　　name : "My Object1",   
            　　getNameFunc : function(){   
            　　　　return function(){   
            　　　　　　return this.name;   
            　　　  };   
            　　}   
            };   
            
            function showThis1(){
               alert(object1.getNameFunc()());  //The Window
            }

            var object2 = {   
            　　name : "My Object2", 
                //方法
            　　getNameFunc : function(){ 
                    //方法內的this指針指向調用方法的對象，因此that引用了正確的對象object2
                    var that = this;
                    //函數
            　　　　return function(){   
            　　　　　　return that.name;   
            　　　  };   
            　　}   
            };  

            function showThis2(){
               alert(object2.getNameFunc()());  //My Object2
            }

            /***************字面量建立對象**************/


            /***************工廠模式建立對象，利用函數返回一個對象***********/
            /*工廠模式建立對象，可利用內部函數造成閉包，建立較爲複雜的對象*/

            var object3 = (function(){
                function getName(){
                   return this.name;
                }

                return {
                    name : "My Object3",
                    //這種寫法與Object1是同一種狀況
                    getNameFunc : function(){
                       return getName(); 
                　　}
                }
            })();

            function showThis3(){
               alert(object3.getNameFunc());  //Window
            }

            

            var object4 = (function(){
                return {
                    name : "My Object4",
                    getNameFunc : function(){
                       return this.name; 
                　　}
                }
            })();

            function showThis4(){
               alert(object4.getNameFunc());  //My Object4
            }            

            var object5 = (function(){
                
                //函數內的this 默認指向window，這裏的that依然指向window而不是object5
                var that = this;

                function getName(){
                   return that.name;
                }

                return {
                    name : "My Object5",
                    getNameFunc : function(){
                        return getName();
                　　}
                }
            })();

            function showThis5(){
               alert(object5.getNameFunc());  //Window
            }
            /***************工廠模式建立對象**************/

            
            /***************構造方法建立對象**************/
            /*構造方法比較特殊，其this指針指向待返回的對象，
              而不是window，注意構造方法的函數首字母必定要大寫*/
            function Object6(){
                this.name = "My Object6";
                this.getNameFunc = function(){
                      return this.name;
                }
            }

            var object6 = new Object6();

            function showThis6(){
               alert(object6.getNameFunc());  //My Object6
            }

            function Object7(){
                //可是構造函數內部定義的函數this指針仍然指向window，依然須要注意
                function getName(){
                   return this.name;
                }
                this.name = "My Object7";
                this.getNameFunc = function(){
                      return getName();
                }
            }

            var object7 = new Object7();

            function showThis7(){
               alert(object7.getNameFunc());  //Window
            }

            /***************構造方法建立對象**************/

   
            /*使用上述方式建立對象均有一個缺陷，
              就是每個object實例均有不一樣的getNameFunc，而不是共享爲一個，
              浪費了內存空間，使用原型模式建立對象能夠解決這個問題*/

            /*******原型模式建立對象*********/
            function Object8(){

            }
            
            //至關於Java中被共享的屬性 public static String name;
            Object8.prototype.name = "My Object8";

            //至關於Java類中的函數 public String getNameFunc(){...};
            Object8.prototype.getNameFunc = function (){
               return this.name;
            }

            var object8 = new Object8();

            
            /*這樣，每個利用構造函數Object8建立出來的對象，均共享了getNameFunc節約了內存空間。
              可是因爲原型對象是被全部子對象所共享的，因此子對象同時共享了name屬性，
              若某一個對象修改了name屬性的值，其它對象的name會同時改變，這顯然是不但願看到的*/
            var object8_bro = new Object8();

            function showThis8(){
               alert(' object8: ' + object8.getNameFunc() 
                     + '\n object8兄弟: ' + object8_bro.getNameFunc());
               alert('object8兄弟更名了!');
               object8_bro.name = 'Object8魔改';
               alert(' object8: ' + object8.getNameFunc() 
                     + '\n object8兄弟: ' + object8_bro.getNameFunc() 
                     + '\n WTF，兩兄弟同時更名了！');
            }

            /*******原型模式建立對象*********/
            
            /********組合使用原型模式和構造函數建立對象**************/
            /*爲了解決這個問題，可組合使用原型模式和構造函數建立對象，
              即公共方法寫在原型對象中 ,私有變量寫在構造方法中 。
              這也是許多jQuery插件之中常常使用的建立對象的方式*/

            function Object9(){
                 this.name = "Object9"
            }
            
            Object9.prototype.getNameFunc = function(){
                 return this.name;
            }

            var object9 = new Object9();

            var object9_bro = new Object9();

            function showThis9(){
               alert(' object9: ' + object9.getNameFunc()
                      + '\n object9兄弟: ' + object9_bro.getNameFunc());
               alert('object9兄弟更名了!');
               object9_bro.name = 'Object9魔改';
               alert(' object9: ' + object9.getNameFunc()
                     + '\n object9兄弟: ' + object9_bro.getNameFunc() + '\n該是誰仍是誰！');
            }
            /********組合使用原型模式和構造函數建立對象**************/


            //稍稍改動下，像不像一個jQuery插件，像不像一個java的類呢
            var jQuery = {};
                   
            ;(function($){
                 
                 //構造函數
                 function Object10(){
                     //私有變量
                     this.name = "Object10"
                 }

                 //公有函數 
                 Object10.prototype.getNameFunc = function(){
                     return _getName(this);
                 }

                 $.createObject10 = function(){
                     return new Object10();
                 }
                    
                 //閉包私有函數
                 function _getName(that){
                     //注意this指針！！
                     return that.name.toUpperCase();
                 }
                 
            })(jQuery);

            var object10 = jQuery.createObject10();

            function showThis10(){
                 alert(object10.getNameFunc());  
            }
      </script>
  </head>
  <body>
        <button onclick = "showThis1()"> this1 </button>
        <button onclick = "showThis2()"> this2 </button>
        <button onclick = "showThis3()"> this3 </button>
        <button onclick = "showThis4()"> this4 </button>
        <button onclick = "showThis5()"> this5 </button>
        <button onclick = "showThis6()"> this6 </button>
        <button onclick = "showThis7()"> this7 </button>
        <button onclick = "showThis8()"> this8 </button>
        <button onclick = "showThis9()"> this9 </button>
        <button onclick = "showThis10()"> this10 </button>
  </body>
<html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。