=>和this

lordharrd 發布于2019-08-21 11:44 / 1839人閱讀

摘要：比如說有這么一段代碼輸出的結果是第一個輸出的是確實指向了對象，但是第二個因為套了一個，所以這時候的就指向了函數本身。不過前段時間看過別人講可以傳遞。當時不知道這有什么意義，現在看來確實是很好的一個特性。

比如說有這么一段代碼：

var O = function(data){
  this.data = data
}
O.prototype.selfCall = function(data){
  if(data.length>1){
    data.forEach(function(e){console.log(this)})
  }else{
    console.log(this);
  }
}
var o = new O("test")
o.selfCall([1])
o.selfCall([1,2])

輸出的結果是：

O { data: "test" }
{ DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  DTRACE_HTTP_SERVER_REQUEST: [Function],
  DTRACE_HTTP_SERVER_RESPONSE: [Function],
  DTRACE_HTTP_CLIENT_REQUEST: [Function],
  DTRACE_HTTP_CLIENT_RESPONSE: [Function],
  ...

第一個輸出的this是確實指向了對象O，但是第二個因為套了一個function，所以這時候的this就指向了函數本身。
如果想用this指向O的話，可以這么寫：

O.prototype.selfCall = function(data){
  n = this
  if(data.length>1){
    data.forEach(function(e){console.log(n)})
  }else{
    console.log(this);
  }
}

就是在函數外面用n存一下this，之后靠著函數的lexical（是這么說的么？）關系，拿外層的n來引用O。不過前段時間看過別人講=>可以傳遞this。當時不知道這有什么意義，現在看來確實是很好的一個特性。所以上面的程序可以改成這樣：

O.prototype.selfCall = function(data){
  if(data.length>1){
    data.forEach(e=>{console.log(this)})
  }else{
    console.log(this);
  }
}

總結：

function(){}里面的this指代的是function本身

可以通過lexical scope借助一個變量把外面的this傳進function(){}

=>不僅僅讓匿名函數的書寫更簡單，還有一個非常好的特性：this的傳遞

=>同時還會避免arguments指向匿名函數：參見回調+遍歷

GPU云服務器云服務器 html&ltbr&gt和 this[] this _this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87052.html

vue用element來實現上傳圖片和修改圖片功能

　　項目要求上傳圖片的模塊，這個簡單，但是要在保存圖片后需要編輯就不怎么好處理了，現在就和大家一起分享。　　一、應用場景　　1.上傳圖片并進行放大預覽　　2.圖片上傳代碼　　就是直接將圖片上傳到接口，成功后返回圖片路徑，表單提交時，后臺要路徑拼成的字符串格式，類似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads...

3403771864 2022-11-28 22:07 評論0 收藏0
JavaScript隊列數據結構詳解

　　今天我們講講JavaScript隊列數據結構詳解。什么是隊列？　　隊列是一種先進先出的數據結構，隊列有兩種操作：插入和刪除；入隊和出隊。簡單來說就是允許插入的一端稱為隊尾、允許刪除的一端稱為隊頭；　　如下圖展示了棧這個數據結構：　　JavaScript中的隊列　　要知道JavaScript中沒有有關隊列的數據模型，因此我們需要通過數組進行模擬，當數組中提供的push()和shift()選...

3403771864 2022-09-21 22:28 評論0 收藏0
演示Vue實現記住賬號密碼功能的思路和代碼

　　實現思路：　　情景：在用戶登錄時若勾選記住我功能選項，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁面加載時自動獲取保存好的賬號和密碼（需解密），回顯到登錄輸入框中。　　在本地緩存可以用cookies、localStorage、sessionStorage，但這些都有很多不同的差異，不多說廢話。直接說使用我們的，在未設置過期時間，關閉瀏覽器窗口后就被清除了，顯然是符合我們開發需求的，loc...

3403771864 2022-10-23 14:40 評論0 收藏0
JS手寫bind之處理new的情況詳解

　　你有遇見過給bind返回的函數做new操作的場景，本篇主要講述的就是實現一下兼容new操作的bind寫法，順便學習一下new操作符，為大家提供下參考。　　大家可以去看下關于 JS 中 bind 方法的實現的文章，并給出了實現：　　Function.prototype.myBind=function(thisArg,...prefixArgs){ 　　constfn=this; 　　return...

3403771864 2022-11-19 22:09 評論0 收藏0
匯總有關JS對象的創建與繼承

　　之前也有和大家講過有關JS的對象創建和對象繼承，本篇文章主要為大家做個匯總和梳理。　　JS中其實就是原型鏈繼承和構造函數繼承的毛病，還有就是工廠、構造、原型設計模式與JS繼承。 JS高級程序設計4：class繼承的重點，不只是簡簡單單的語法而已。　　對象創建　　不難發現，每一篇都離不開工廠、構造、原型這3種設計模式中的至少其一！　　那JS為什么非要用到這種3種設計模式了呢？？　　我們先從對...

3403771864 2023-03-27 18:33 評論0 收藏0
React父組件調用子組件中的方法實例詳解

　　本文主要講述ref 的應用僅為父組件調用子組件場景下的應用方式1　　Class組件　　1. 自定義事件　　Parent.js　　importReact,{Component}from'react'; 　　importChildfrom'./Child'; 　　classParentextendsComponent{ 　　componentDidMount(){ ...

3403771864 2022-09-14 22:01 評論0 收藏0