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>

答案

• 第一題：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關鍵字指向問題的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!