Javascript中的this對象

来源:https://www.cnblogs.com/princess-knight/archive/2018/07/06/9274660.html
-Advertisement-
Play Games

對於this的使用，我們最常遇到的主要有，在全局函數中，在對象方法中，call和apply時，閉包中，箭頭函數中以及class中； 我們知道this對象是在運行時基於函數的執行環境綁定的，在調用函數之前，this的值並不確定，因此this會在代碼執行過程中引用不同的對象。哪個對象實例調用this所在 ...


       對於this的使用，我們最常遇到的主要有，在全局函數中，在對象方法中，call和apply時，閉包中，箭頭函數中以及class中；

我們知道this對象是在運行時基於函數的執行環境綁定的，在調用函數之前，this的值並不確定，因此this會在代碼執行過程中引用不同的對象。哪個對象實例調用this所在的函數，那麼this就代表哪個對象實例。

1.    全局函數

       在全局函數中，this等於window；

var name = "Tina";
function sayName() {
    alert(this.name);
}
person();//Tina

       在這裡，由於函數person()是在全局環境中執行的，也是在全局作用域中window對象調用的person()；故此時的this便指向window對象。而當把這個函數賦給對象o並調用o.sayName()時，this引用的是對象o，因此對this.name的求值就變成了對o.name求值。 

var name = "Tina";
var o={name: "Tony"};
function sayName() {
    alert(this.name);
}
o.sayName=sayName;
o.sayName();//"Tony"

2. 對象方法

       當函數被作為某個對象的方法調用時，this等於那個對象；

var name="Tina";
var obj={
      name="Tony",
      getName: function() {
            alert(this.name);
      }
};
obj.getName();//"Tony"

3.call()和apply()和bind()

      我們知道，call(ctx, parm1,parm2,parm3...)和apply(ctx,[parms])的用途都是在特定的作用域中調用函數，實際上等於設置函數體內this對象的值；

function sum(num1, num2)  {
      return num1+num2;
}
function callSum1(num1, num2) {
      return sum.apply(this, [num1, num2]);
}
function callSum2(num1,num2) {
      return sum.call(this, num1, num2);
}
alert(callSum1(10, 10)); //20
alert(callSum2(10, 10));//20

      在上面的例子中，callSum1()和callSum2()在執行函數sum()時傳入了this作為this值（因為是在全局作用域中調用的，所以傳入的就是window對象）；事實上，call和apply最強大之處是能夠擴充函數賴以運行的作用域；來看下麵的例子：

window.color="red";
var o={ color: "blue"};
function sayColor() {
      alert(this.color);
}
sayColor();//"red"
sayColor.call(this);//"red"
sayColor.call(window);//"red"
sayColor.call(o);//"blue"

      bind()方法會創建一個函數的實例，其this值會被綁定到傳給bind()函數的值。例如：

window.color="red";
var o={ color: "blue" };
function sayColor() {
    alert(this.color);
}
var objsayColor = sayColor.bind(o);
objsayColor();//"blue"

       另一個使用場景是函數綁定，函數綁定要創建一個函數，可以在特定的this環境中以指定參數調用另一個函數，該技巧常常和回調函數與事件處理程式一起使用，以便在將函數作為變數傳遞的同時保留代碼執行環境。

var handler = {
      message: "Event handled",
      handleClick : function(event) {
            alert(this.message);
      }
};
var btn = document.getElementById("my_btn");
btn.addEventListener("click", handler.handleClick, false);

      當按下該按鈕時，就調用該函數，顯示一個警告框，雖然貌似警告框應該顯示Event handled，然而實際上顯示的是undefined。原因在於沒有保存handler.handleClick()的執行環境，所以this對象最後指向了DOM按鈕而非handler(在IE8中，this指向window)。一種方法，可以使用一個閉包來修正這個問題。

var handler = {
      message: "Event handled",
      handleClick : function(event) {
            alert(this.message);
      }
};
var btn = document.getElementById("my_btn");
btn.addEventListener("click", function(event){
      handler.handleClick(event);
}, false);

      這個解決方案在onclick事件處理程式內使用了一個閉包直接調用handler.handleClick()，當然，這是特定與本段代碼的解決方案。我們知道，創建多個閉包可能會令代碼變得難以理解和調試。因此，很多JS庫實現了一個可以將函數綁定到指定環境的函數，這個函數一般叫bind()；ECMAScript 5為所有函數定義了一個原生的bind()方法，它的使用方式如下：

var handler = {
      message: "Event handled",
      handleClick : function(event) {
            alert(this.message+":"+event.type);
      }
};
var btn = document.getElementById("my_btn");
btn.addEventListenr("click", handler.handleClick.bind(handler), false);

      一個簡單的bind()函數接受一個參數和一個環境，並返回一個在給定環境中調用給定函數的函數，並且將所有參數原封不動地傳遞過去。語法如下：

function bind(fn, context) {
      return function() {
            return fn.apply(context, arguments);
      };
}

      這個函數在bind()中創建了一個閉包，閉包使用apply調用傳入的函數，並給apply傳遞context對象個arguments對象數組，這裡的arguments對象是內部函數（匿名函數）的，而非bind()的參數。當調用返回的函數時，它會在給定環境中執行被傳入的函數並給出所有參數。

      原生的bind()方法和前面自定義的bind()方法類似，都是要傳入作為this值的對象。它們主要用於事件處理程式以及setTimeout()和setInterval()。bind綁定在react事件處理中也常常和箭頭函數一樣起到綁定this的效果。

4. 閉包

      有時候，由於編寫閉包的方式不同，在閉包中使用this對象可能會導致一些問題；

var name = "The window";
var object = {
      name: "My Object",
      getNameFunc: function() {
            return function() {
                  return this.name;
            };
      }
};
alert(object.getNameFunc()());//"The window"

      由於getNameFunc()返回一個函數，因此調用object.getNameFunc()()就會立即調用它返回的函數，結果就是返回一個字元串"The window"，即全局變數的值，此時匿名函數沒有取得其包含作用域（外部作用域）的this對象。原因在於內部函數在搜索兩個特殊變數this和arguments時，只會搜索到其活動對象為止，因此永遠不可能直接訪問外部函數中的這兩個變數。這時，只需把把外部作用域中的this對象保存在一個閉包能夠訪問到的變數里，就可以讓閉包訪問該對象了。

var name = "The window";
var object = {
      name: "My Object",
      getNameFunc: function() {
            var that = this;
            return function() {
                  return that.name;
            };
      }
};
alert(object.getNameFunc()());//"My Object"
//節流
function throttle(fn, delay) {
      var previous = Data.now();
      return function() {
             var ctx = this;
             var args = arguments;
             var now = Data.now();
             var diff = now-previous-delay;
              if(diff>=0) {
                    previous = now;
                    setTimeout(function() {
                         fn.apply(ctx, args);
                    }, delay);
              }
       };
}

5. 箭頭函數

      我們知道，箭頭函數有幾個需要註意的點：

      （1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象；

      （2）不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤；

      （3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用rest參數代替；

      （4）不可以使用yield命令，因此箭頭函數不能用作Generator函數；

      這裡我們只談論第一點；this對象的指向是可變的，但在箭頭函數中，它是固定的；

function foo() {
      setTimeout(() => {
          console.log('id: ', this.id);
      }, 100);
}
var id=21;
foo.call({id: 31});//id: 31

      上述代碼中，setTimeout是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它真正加入到執行棧後還要等到100毫秒後才會執行，如果是普通函數，此時的this應該指向全局對象window，這時應該輸出21。但是，箭頭函數導致this總是指向函數定義生效時所在的對象（本例是{id：31}）所以輸出的是id: 31；

      箭頭函數可以讓setTimeout裡面的this，綁定定義時所在的作用域，而不是指向運行時所在的作用域。下麵是另一個例子：

function Timer() {
      this.s1 = 0;
      this.s2 = 0;
      setInterval(() => this.s1++, 1000);
      setInterval(function() {
            this.s2++;
      }, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);//s1: 3
setTimeout(() => console.log('s2: ', timer.s2), 3100);//s2: 0

      上面代碼中，Timer函數內部設置了兩個定時器，分別使用了箭頭函數和普通函數。前者的this綁定定義時所在的作用域（Timer函數)，後者的this指向運行時所在的作用域(即全局對象)。所以，3100毫秒後，timer.s1被更新了3次，timer.s2一次都沒更新。

      箭頭函數可以讓this指向固定化，這種特性很有利於封裝回調函數。下麵代碼將DOM事件的回調函數封裝在一個對象裡面。

var handler = {
      id: '123456',
      init: function() {
            document.addEventListener('click',
                event => this.doSomething(event.type), false);
      },
      doSomething: funcition(type) {
            console.log('Handling ' + type + ' for ' + this.id);
      }
};

      上面代碼的init方法中，使用了箭頭函數，這導致這個箭頭函數裡面的this，總是指向handler對象。否則，回調函數運行時，this.doSomething這一行會報錯，因為此時this指向document對象。this指向的固定化，並不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼的this。正是因為它沒有this，所以也就不能用作構造函數。由於箭頭函數沒有自己的this，所以當然不能用call()、apply（）、bind()改變this的指向。

6. class

      類的方法內部如果含有this，它預設指向類的實例。

class Logger {
    /*constructor() {
        this.printName = this.printName.bind(this);
    }*/
    printName(name = 'Nicolas') {
        this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text);
    }
}
const logger = new Logger();
const { printName } = logger;
printName();

      上面代碼中，printName方法中的this，預設指向Logger類的實例。但是，如果將這個方法提取出來單獨使用，this會指向該方法運行時所在的環境，因為找不到print方法而導致報錯。一種簡單的解決方法就是在構造函數中綁定this。而另一種方法是使用箭頭函數：

class Logger {
    constructor() {
        this.printName = (name='Nicolas') => {
            this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text);
    }
}
const logger = new Logger();
const { printName } = logger;
printName();

      還有一種方法是使用Proxy，獲取方法的時候，自動綁定this。

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}
const logger = selfish(new Logger());

 

參考：

https://reactjs.org/docs/handling-events.html

http://es6.ruanyifeng.com/#docs/class


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS----------常用三方庫
    1.筆者常用三方庫 名稱作用說明 <small>AFNetworking <small>基於HTTP/HTTPS 聯網請求 <small> <small>SDWebImage <small>圖片非同步載入和緩存 <small> image圖像沒做壓縮處理 <small> FMDB <small>SQL ...
  • Android精通之AsyncTask與ListView講解
    版權聲明：未經博主允許不得轉載 AsyncTask 瞭解AsyncTask非同步，需要瞭解一下非同步任務（多線程），什麼是線程，可以這麼說線程好比邊吃飯邊看電視，AsyncTask是為了方便後臺線程中操作更新UI，本質為Handler非同步消息處理機制。 學習AsyncTask需要知道它的參數，它要實現的 ...
  • 直接通過Binder的onTransact完成跨進程通信
    1.具體代碼： 服務端實現： 可以看到onTransact有四個參數 code ， data ，replay ， flags code 是一個整形的唯一標識，用於區分執行哪個方法，客戶端會傳遞此參數，告訴服務端執行哪個方法; data客戶端傳遞過來的參數; replay伺服器返回回去的值; flag ...
  • android sdk下載找不到support library
    沒有android support library下載項。 找了很多資料，發現 android support library 被Google廢棄了，不推薦使用。代替使用的是 android support repository 這是一個倉庫。 然後我查看了一下這個倉庫找到sdk的安裝路徑，比如我的 ...
  • AIDL基本使用
    1、概述 Binder能幹什麼？Binder可以提供系統中任何程式都可以訪問的全局服務。這個功能當然是任何系統都應該提供的，下麵我們簡單看一下Android的Binder的框架 Android Binder框架分為伺服器介面、Binder驅動、以及客戶端介面；簡單想一下，需要提供一個全局服務，那麼全 ...
  • 自己封裝了的AlertController
    一直覺得使用系統這個東西寫起來特別麻煩，每次都要寫一大推東西，還是重覆的，今天抽了點時間自己重新封裝了一下，解決了自己的強迫症。。。，不多說，直接上代碼了。 1.自己定義了一個名為XBZ的UIAlertViewControllerde 分類，.h文件裡面 2.然後是.m文件 3.調用方法，就統一寫到 ...
  • Android--記錄莫名其妙的引用、依賴衝突解決辦法
    這幾天一直在忙於其他項目，打開之前的項目，我曹，代碼什麼都沒動，為何莫名其妙的的就出現衝突了。（我猜測是依賴的其它三方庫，庫裡面的依賴發生改變導致的） 全是這種錯誤，各種衝突導致的，記錄一下，以下指示其中一種。 感覺無從下手，偶然得知一句命令可以得到本項目的"依賴樹"，天助我也。 在Android ...
  • 通過ES6寫法去對Redux部分源碼解讀
    在Redux源碼中主要有四個文件createStore,applyMiddleware,bindActionCreators,combineRedures createStore.js export default function createStore(reducer, preloadedSta ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類