前言
Javascript是一門基于對象的動態語言，也就是說，所有東西都是對象，一個很典型的例子就是函數也被視為普通的對象。Javascript可以通過一定的設計模式來實現面向對象的編程，其中this “指針”就是實現面向對象的一個很重要的特性。本文將給大家詳細介紹關于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>答案
（往下看，下面有詳細解析哦）
this
一、指向調用函數的對象
<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>二、無對象調用函數/匿名函數自調用->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>三、通過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>四、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>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
