=>和this

lordharrd 發(fā)布于2019-08-21 11:44 / 1840人閱讀

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

比如說有這么一段代碼：

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])

輸出的結(jié)果是：

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就指向了函數(shù)本身。
如果想用this指向O的話，可以這么寫：

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

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

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

總結(jié)：

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

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

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

=>同時還會避免arguments指向匿名函數(shù)：參見回調(diào)+遍歷

云服務(wù)器 GPU云服務(wù)器 html&ltbr&gt和 this[] this _this

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87052.html

相關(guān)文章

vue用element來實現(xiàn)上傳圖片和修改圖片功能

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

3403771864 2022-11-28 22:07 評論0 收藏0
JavaScript隊列數(shù)據(jù)結(jié)構(gòu)詳解

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

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

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

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

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

3403771864 2022-11-19 22:09 評論0 收藏0
匯總有關(guān)JS對象的創(chuàng)建與繼承

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

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

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

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