您好,登錄后才能下訂單哦!
這篇文章主要介紹了Javascript中this關鍵字指向問題的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
測試題目
第一題
<script> var str = 'zhangsan'; function demo() { var str = 'lisi'; alert(this.str); } window.demo(); // ?? var obj = { str: "wangwu", say: function() { alert(this.str); } } obj.say(); // ?? var fun = obj.say; window.fun(); // ?? </script>
第二題
<script> var username = 'zhangsan'; (function() { var username = 'lisi'; alert(this.username); // ?? })() function demo() { var username = 'wangwu'; function test() { alert(this.username); } test(); // ?? } demo(); </script>
第三題
<script> function Person() { this.username = 'zhangsan'; this.say = function() { alert('我叫' + this.username); } } var p = new Person(); p.say(); // ?? var p1 = new Person(); p1.say(); // ?? </script>
第四題
<script> var username = 'zhangsan'; function demo() { alert(this.username) } var obj1 = { username: "lisi" }; var obj2 = { username: "wangwu" }; demo(); // ?? demo(obj1); // ?? demo(obj2); // ?? demo.call(obj1); // ?? demo.apply(obj2); // ?? </script>
答案
第一題:zhangsan wangwu zhangsan
第二題:zhangsan zhangsan
第三題:我叫zhangsan 我叫zhangsan
第四題:zhangsan zhangsan zhangsan lisi wangwu
(往下看,下面有詳細解析哦)
this
指向調用函數的對象
無對象調用函數/匿名函數自調用(this指向window)
通過new產生的對象
apply/call調用
一、指向調用函數的對象
<script> // this:指向調用函數的對象 var str = 'zhangsan'; function demo() { var str = 'lisi'; //this->window console.log(this); alert(this.str); } window.demo(); // zhangsan var obj = { str: "wangwu", say: function() { // this->obj alert(this.str); } } obj.say(); // wangwu var fun = obj.say; window.fun(); // zhangsan </script>
全局函數(demo)屬于window對象的方法,window調用demo所以this就指向了window
obj調用say方法,this就指向了obj
fun()是全局函數,而聲明的fun接收的是obj里面單純的一個函數,并沒有調用(obj.say()才是調用了函數),此時的fun就是一個函數(function(){alert(this.str);}),那么當fun()調用函數的時候,this指向的就是window
是誰調用的函數,那么this就指向誰
二、無對象調用函數/匿名函數自調用->this指向window
<script> // 2.匿名函數自執行|匿名函數|無主函數 this->window var username = 'zhangsan'; // 匿名函數自執行 this->window (function() { var username = 'lisi'; console.log(this); // window alert(this.username); // zhangsan })() function demo() { var username = 'wangwu'; // 無主函數 this->window function test() { // this->window alert(this.username); } test(); // zhangsan } demo(); </script>
因為匿名函數沒有名字,所以就掛給window了
test(),誰調用test那么就指向誰。當然實驗過,它不是window調用的,也不是demo調用的,沒有人管它,那么它就指向window。它就相當于一個沒有主人調用它,無主函數。
三、通過new產生的對象
<script> // 3.通過new的對象:this指向產生的對象 // 函數 function Person() { // 屬性 this.username = 'zhangsan'; // 方法 this.say = function() { // this->p console.log(this); // Person對象 alert('我叫' + this.username); } } // 實例化出一個對象:p就具有了username屬性和say方法 var p = new Person(); console.log(p); // Person對象 console.log(p.username); // zhangsan p.say(); // 我叫zhangsan // this->p1 var p1 = new Person(); p1.say(); // Person對象 我叫zhangsan </script>
當我們的函數Person里面運用了this去寫屬性和方法這種格式,那么就要通過new來讓屬性和方法變得有價值,通過new去運用函數里面的屬性和方法
四、apply/call調用
首先我們來了解下apply()/call()是個什么東西呢?
apply()/call():最終是調用function,只不過內部的this指向了thisObj
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]]) function.apply([thisObj[,argArray]])
注意:
1. 調用function函數,但是函數內的this指向thisObj(更改對象內部指針)
2. 如果thisObj沒有傳參,則默認為全局對象
3. call()/apply()聯系與區別
聯系:功能一樣,第一個參數都是thisObj
區別:傳遞的參數如果比較多
call()的實參就是一一列出
apply()的實參是全部放置在第二個數組參數中
一個理解apply()/call()的實例:
<script> // apply()/call() function demo() { console.log(123); } // 調用函數的時候,demo.call()/demo.apply()最終調用的還是demo() demo(); // 123 demo.call(); //123 demo.apply(); // 123 </script> <script> // call()/apply()的區別: // call()參數單獨再call中羅列 // apply()的參數通過數組表示 function demo(m, n, a, b) { alert(m + n + a + b); } demo(1, 5, 3, 4); // 13 demo.call(null, 1, 5, 3, 4); // 13 demo.apply(null, [1, 5, 3, 4]); // 13 </script>
this的第四個用法實例
<script> // this的第四個用法:call(obj)/apply(obj):強制性的將this指向了obj var username = 'zhangsan'; function demo() { alert(this.username) } var obj1 = { username: "lisi" }; var obj2 = { username: "wangwu" }; // call()/apply():打劫式的改變了this的指向 demo(); // zhangsan demo(obj1); //zhangsan demo(obj2); //zhangsan demo.call(obj1); // lisi demo.apply(obj2); // wangwu </script>
如果直接調用demo里面寫的不管是obj1還是obj2,那么demo還是屬于window調用的。
不管你用call還是apply最終調用的都是demo函數,但它們會強制的this指向了obj1/obj2,強制的指向了它們的第一個參數對象。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“Javascript中this關鍵字指向問題的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。