=>和this

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

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

比如說有這么一段代碼：

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],
  ...

第一個(gè)輸出的this是確實(shí)指向了對(duì)象O，但是第二個(gè)因?yàn)樘琢艘粋€(gè)function，所以這時(shí)候的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。不過前段時(shí)間看過別人講=>可以傳遞this。當(dāng)時(shí)不知道這有什么意義，現(xiàn)在看來確實(shí)是很好的一個(gè)特性。所以上面的程序可以改成這樣：

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借助一個(gè)變量把外面的this傳進(jìn)function(){}

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87052.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

3403771864 2022-09-14 22:01 評(píng)論0 收藏0