JS高級之this是誰？
阿新 • • 發佈：2019-03-11
function 找不到 構造函數 fun body 全局 為什麽 bsp ...
1 <!-- 2 英語單詞：checkout：收銀臺 refresh:刷新 3 const Index = () => import(‘/page/index.vue‘)//等於const Index = function a（）{return import(‘/page/index.vue‘)} 4 5 js高級之this是誰？ 6 this本質上就是調用了就指向誰，this在指向誰有以下4種情況： 7 --------------------------------------------------------------------------------------8 *this之普通函數： 9 function t(){ 10 this.age=23; 11 } 12 t();//如果沒有這方法就會報undefined，在window就找不到age 13 //這個調用者是null，this為null時，js把this指向window 14 //在es5及以後，當this為null時拋出異常 15 alert(window.age); 16 //函數內帶有this操作，不能直接調用，應該new，否則會汙染全局 17 -------------------------------------------------------------------------------------18 *this之對象方法 19 window.name=‘kjx‘ 20 function intro() { 21 alert(‘my name is ‘+this.name); 22 } 23 var dog={ 24 name:‘孫小二‘, 25 } 26 dog.intro=intro; 27 dog.intro();//輸出是my name is 孫小二 28 var cat={ 29 name:‘加肥貓‘ 30 } 31 cat.intro=intro; 32 cat.intro();//輸出是my name is 加肥貓33 (cat,intro=dog.intro)();//輸出是全局變量my name is kjx，如果沒有定義全局變量的話就會沒有輸出，賦值運算的結果是一個值，如果你拿一個值來調用這個值不屬於任何一個對象 34 -------------------------------------------------------------------------------------- 35 *this之構造函數： 36 var a = new fn(); 37 console.log(a); 38 function cat (name,color) { 39 this.name=name; 40 this.color=color; 41 } 42 43 /* 44 0.方法new的瞬間，得到一個空對象{} 45 1.方法的this指向該空對象 46 2.運行方法 47 {}.name=name 48 {}.color=color 49 返回該對象 50 */ 51 var cat=new cat();//會得到一個新的對象，方法內的this指向該新對象 52 console.log(cat); 53 --------------------------------------------------------------------------------------
1 <style> 2 div{ 3 height: 300px; 4 width: 300px; 5 margin: 10px; 6 border: 1px solid blue; 7 } 8 </style> 9 <body> 10 <!-- 11 *this之通過call，apply調用，call和apply會動態更改this的指向 12 --> 13 <div id="test1">test1</div> 14 <div id="test2">test2</div> 15 </body> 16 <script> 17 var test1=document.getElementById(‘test1‘) 18 var test2=document.getElementById(‘test2‘) 19 function t () { 20 this.style.background=‘gray‘; 21 } 22 t.call(test2); 23 /* 24 函數名.call(對象，參數1，參數2，參數3,...) 25 1.把函數的this，指向對象 26 2.運行函數，傳參為參數1，參數2，參數3....) 27 函數名.apply(對象，[參數1，參數2，參數3,...]) 28 1.把函數的this，指向對象 29 2.運行函數，傳參為參數1，參數2，參數3....) 30 */ 31 32 </script>
1 //課後習題： 2 var name="The Window"; 3 var object={ 4 name:‘My Object‘, 5 getNameFunc:function () { 6 return function () { 7 return this.name; 8 } 9 } 10 } 11 alert(object.getNameFunc()());//輸出的是The Window，為什麽呢？ function () { return this.name; }相當於object.getNameFunc()，return返回的是函數函數是一個值，this.name就是全局變量的name
JS高級之this是誰？