前言
Javascript是一門基于對象的動態(tài)語言，也就是說，所有東西都是對象，一個很典型的例子就是函數(shù)也被視為普通的對象。Javascript可以通過一定的設(shè)計模式來實現(xiàn)面向?qū)ο蟮木幊蹋渲衪his “指針”就是實現(xiàn)面向?qū)ο蟮囊粋€很重要的特性。本文將給大家詳細(xì)介紹關(guān)于Javascript中this關(guān)鍵字指向的相關(guān)內(nèi)容，讓我們先做一個小測試，如果全部答對了，恭喜你不用往下看了。
測試題目
第一題
<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>答案
（往下看，下面有詳細(xì)解析哦）
this
一、指向調(diào)用函數(shù)的對象
<script> // this:指向調(diào)用函數(shù)的對象 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>二、無對象調(diào)用函數(shù)/匿名函數(shù)自調(diào)用->this指向window
<script> // 2.匿名函數(shù)自執(zhí)行|匿名函數(shù)|無主函數(shù) this->window var username = 'zhangsan'; // 匿名函數(shù)自執(zhí)行 this->window (function() { var username = 'lisi'; console.log(this); // window alert(this.username); // zhangsan })() function demo() { var username = 'wangwu'; // 無主函數(shù) this->window function test() { // this->window alert(this.username); } test(); // zhangsan } demo();</script>三、通過new產(chǎn)生的對象
<script> // 3.通過new的對象：this指向產(chǎn)生的對象 // 函數(shù) 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>四、apply/call調(diào)用
首先我們來了解下apply()/call()是個什么東西呢？
apply()/call():最終是調(diào)用function，只不過內(nèi)部的this指向了thisObj
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])function.apply([thisObj[,argArray]])
注意：
1. 調(diào)用function函數(shù)，但是函數(shù)內(nèi)的this指向thisObj（更改對象內(nèi)部指針）
2. 如果thisObj沒有傳參，則默認(rèn)為全局對象
3. call()/apply()聯(lián)系與區(qū)別
聯(lián)系：功能一樣，第一個參數(shù)都是thisObj
區(qū)別：傳遞的參數(shù)如果比較多
call()的實參就是一一列出
apply()的實參是全部放置在第二個數(shù)組參數(shù)中
一個理解apply()/call()的實例：
<script> // apply()/call() function demo() { console.log(123); } // 調(diào)用函數(shù)的時候，demo.call()/demo.apply()最終調(diào)用的還是demo() demo(); // 123 demo.call(); //123 demo.apply(); // 123</script><script> // call()/apply()的區(qū)別： // call()參數(shù)單獨再call中羅列 // apply()的參數(shù)通過數(shù)組表示 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)：強(qiáng)制性的將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>總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網(wǎng)的支持。
新聞熱點
疑難解答
