1. <dd id="jcnig"><nav id="jcnig"><delect id="jcnig"></delect></nav></dd>
      <dfn id="jcnig"><tt id="jcnig"><sup id="jcnig"></sup></tt></dfn>

    2. <cite id="jcnig"></cite>
      <cite id="jcnig"><tt id="jcnig"></tt></cite>

      <address id="jcnig"><nav id="jcnig"></nav></address>
    3. <address id="jcnig"><nav id="jcnig"></nav></address>
      400-650-7353

      精品課程

      您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】ES5及ES6this詳解

      【Web前端基礎知識】ES5及ES6this詳解

      • 發布: 優就業it培訓
      • 來源:優就業
      • 2021-03-22 16:34:27
      • 閱讀()
      • 分享
      • 手機端入口

      今天,我們學習一下JavaScript中的this。我們從什么是this,ES5及ES6中this的幾種情況進行學習。讓this變的so easy,我們這里說的都是非嚴格模式下。

      什么是this

      this表示當前行為執行的主體,在javaScript中this不是函數獨有的,但是我們主要研究的是函數中的this,為了方便大家理解我們舉個例子。

      小明今天項目成功上線了,提前下班,不用加班了,獎勵自己去肯德基吃一個漢堡,對于這句話我們簡單的分析下:

      在哪里吃:肯德基

      誰吃:小明

      在這里肯德基是吃的環境,小明是當前吃這個行為的主體。

      1. //全局作用域下 
      2. Var myBody = document.body; 
      3. //window是可以省略的  當前body元素的寬度都會被輸出 
      4. console.log(window.getComputedStyle(myBody).width;);//726px 
      5. console.log(getComputedStyle(myBody).width;);//726px 
      6. //我們在這里輸出this  ->window 
      7. console.log(this);//window   

      ES5中this的幾種情況

      1.全局作用域下的this是window

      前邊的我們說過this代表當前行為執行的主體,在全局作用域下所有的屬性和方法都是window的屬性和方法,并且window是可以省略的。那么也就是說我們去調用一個方法在全局作用域下,誰調用的也就是window調用,那么window就是當前行為執行的主體,和去肯德基吃漢堡是一樣的誰吃小明,那么小明就是當前行為執行的主體。

      2.自執行函數中的this是window

      在javaScript中我們主要研究的是函數中的this,自執行函數中的this永遠是window,因為函數就是一個方法,一種行為,這個行為是直接執行的,那么執行的主體就是window。

      1. //這里我們寫兩個自執行函數 
      2. ~function(){ 
      3. console.log(this);  //->window 
      4. }(); 
      5.  
      6. (function (){ 
      7. console.log(this);//->window 
      8. })(); 

      3.當前函數執行就看前面有沒有點(.),點前面是誰this就是誰,和當前函數在哪里定義的及在哪里執行的沒有關系,沒有點就是window.

      還是一樣的道理,.前面就表示當前行為執行的主體。如果沒有依然當前行為執行的主體是window.

      1. //定義一個函數 
      2. function hello(){ 
      3. console.log(this); 
      4. hello();//this->window 
      5. //定義一個對象設置屬性為hello值是對應的那個函數 
      6. Var obj = {hello:hello}; 
      7. //我們再去調用的時候  發現是obj這個對象調用的這個函數  那么obj就是當前行為執行的主體  和這個函數在哪里定義是沒有關系的。 
      8. Obj.hello(); //this->obj 

      4.call,apply,bind改變this指向問題就看方法中的第一個參數是誰this就是誰。

      首先call,apply,bind這三個方法都是用來改變this的指向,其實本質就是改變當前行為執行的主體。由于這個三個方法第一個參數傳遞都是當前行為執行的主體。所以就看第一個參數即可。

      1. //定義一個函數 
      2. function world(){ 
      3.    console.log(this); 
      4. //定義一個對象 
      5. Var obj = {name:”哈哈”}; 
      6. //將obj變為這個方法行為執行的主體 
      7. World.call(obj);//this->obj 
      8. //apply和bind同理只是傳遞參數和使用方式略有不同 

      ES6中this的幾種情況

      1.箭頭函數是沒有自己this的,this是繼承它的宿主環境(上級作用域) 宿主環境不是執行的環境,而是定義的環境。

      1. let fn = () => { 
      2.     console.log(this); 
      3.  
      4. fn();//this->window 
      5.  let obj = { 
      6.   name: "obj", 
      7.   sum: function () { 
      8.    fn(); //在widnow下定義的,所以它的宿主環境是widnow而不是sum 
      9.    } 
      10.  }; 

      2. ES6類構造器中的this是當前這個實例,而原型上的函數中的this指向調用者。

      1. //類中的this 
      2.         class Btn { 
      3.             constructor(tagName) { 
      4.                 this.btn = document.querySelector(id); 
      5.                 thisthis.btn.onclick = this.click; 
      6.                 console.log(this); //this->這個類的實例 
      7.             } 
      8.             click() { 
      9.                 // 方法里的this指向調用者 
      10.                 console.log(this); //this->btn這個元素 
      11.             } 
      12.         } 
      13.         var btn = new Btn('input'); 
      14.      

       

      學習疑問申請解答
      您的姓名
      您的電話
      意向課程
       

      中公優就業

      IT小助手

      掃描上方二維碼添加好友,請備注:599,享學習福利。

      >>本文地址:
      注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

      推薦閱讀

      優就業:ujiuye

      關注中公優就業官方微信

      • 關注微信回復關鍵詞“大禮包”,享學習福利
      QQ交流群
      在線疑問解答
      (加群備注“網站”)
      IT培訓交流群 加入群聊 +
      軟件測試 加入群聊 +
      全鏈路UI/UE設計 加入群聊 +
      Python+人工智能 加入群聊 +
      互聯網營銷 加入群聊 +
      Java開發 加入群聊 +
      PHP開發 加入群聊 +
      VR/AR游戲開發 加入群聊 +
      大前端 加入群聊 +
      大數據 加入群聊 +
      Linux云計算 加入群聊 +
      優就業官方微信
      掃碼回復關鍵詞“大禮包”
      享學習福利

      測一測
      你適合學哪門IT技術?

      1 您的年齡

      2 您的學歷

      3 您更想做哪個方向的工作?

      獲取測試結果
       
      課程資料、活動優惠 領取通道
       
       
      日本一本二本三本av网站,一本加勒比HEZYO东京热高清,一本久久A久久精品综合