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

千鋒教育qyf發表於2021-04-29

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

web

  什麼是this

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

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

  在哪裡吃:肯德基

  誰吃:小明

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

  //全域性作用域下

  Var myBody = document.body;

  //window是可以省略的 當前body元素的寬度都會被輸出

  console.log(window.getComputedStyle(myBody).width;);//726px

  console.log(getComputedStyle(myBody).width;);//726px

  //我們在這裡輸出this ->window

  console.log(this);//window

  ES5中this的幾種情況

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

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

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

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

  //這裡我們寫兩個自執行函式

  ~function(){

  console.log(this); //->window

  }();

  (function (){

  console.log(this);//->window

  })();

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

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

  //定義一個函式

  function hello(){

  console.log(this);

  }

  hello();//this->window

  //定義一個物件設定屬性為hello值是對應的那個函式

  Var obj = {hello:hello};

  //我們再去呼叫的時候 發現是obj這個物件呼叫的這個函式 那麼obj就是當前行為執行的主體 和這個函式在哪裡定義是沒有關係的。

  Obj.hello(); //this->obj

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

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

  //定義一個函式

  function world(){

  console.log(this);

  }

  //定義一個物件

  Var obj = {name:”哈哈”};

  //將obj變為這個方法行為執行的主體

  World.call(obj);//this->obj

  //apply和bind同理只是傳遞引數和使用方式略有不同

  ES6中this的幾種情況

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

  let fn = () => {

  console.log(this);

  }

  fn();//this->window

  let obj = {

  name: "obj",

  sum: function () {

  fn(); //在widnow下定義的,所以它的宿主環境是widnow而不是sum

  }

  };

  2. ES6類構造器中的this是當前這個例項,而原型上的函式中的this指向呼叫者。

  //類中的this

  class Btn {

  constructor(tagName) {

  this.btn = document.querySelector(id);

  thisthis.btn.>

  console.log(this); //this->這個類的例項

  }

  click() {

  // 方法裡的this指向呼叫者

  console.log(this); //this->btn這個元素

  }

  }

  var btn = new Btn('input');


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996644/viewspace-2770565/,如需轉載,請註明出處,否則將追究法律責任。

相關文章