[Effective JavaScript 筆記]第23條:永遠不要修改arguments對象

来源:http://www.cnblogs.com/wengxuesong/archive/2016/06/02/5551962.html
-Advertisement-
Play Games

arguments對象並不是標準的Array類型的實例。arguments對象不能直接調用Array方法。 arguments對象的救星call方法 使得arguments可以品嘗到數組方法的美味,知道可以吃,下麵就是怎麼吃的問題了。不管怎麼吃,先吃一口試試。 感覺很棒的樣子,色香都具備了,拿筷子... ...


arguments對象並不是標準的Array類型的實例。arguments對象不能直接調用Array方法。

arguments對象的救星call方法

使得arguments可以品嘗到數組方法的美味,知道可以吃,下麵就是怎麼吃的問題了。不管怎麼吃,先吃一口試試。

function callMethod(obj,method){
    var shift=[].shift;
    shift.call(arguments);
    shift.call(arguments);
    return obj[method].apply(obj,argumetns);
}

感覺很棒的樣子,色香都具備了,拿筷子嘗一下吧。

var obj={
    add:function(x,y){return x+y;}
};
callMethod(obj,'add',17,25);//這裡應該是42,不運行我都知道

放到chrome控制台運行一下吧,哇,好鮮艷,有紅色。
//Uncaught TypeError: Cannot read property 'apply' of undefined(…)
為什麼會出錯呢,回去找找菜譜(高3),看哪裡不對。原來arguments對象並不是函數參數的副本。所有命名參數都是arguments對象中對應索引的別名。上節好像也有,回去看一下,下麵列出一個arguments對象索引對應命名參數的列表

arguments對象:
索引   形參    實參
0     obj     obj
1     method  'add'
2             17
3             25   

看著這個可以想一下,這個材料(arguments對象),經過加工(兩次shift)。
arguments對象變成下麵這個樣子了

arguments對象:
索引   形參    實參
0     obj     17
1     method  25 

此時我們吃到得已經是變了味的東西了,唉,這個味還能和預期一樣嘛。不出錯才怪,這個糟糕的過程在JS內部這樣執行。這時的obj['add']變成了17[25]。
17被轉化為Number對象,然後查找屬性"25",很明顯不存在,得到undefined值,然後查找undefined的'apply'屬性並將它當方法調用,最後我們的色香被味扼殺了。

這次的失敗,我們可以總結出,arguments對象和命名參數的關係是脆弱的。修改arguments對象也要小心命名參數的改變。ES5下情況更複雜。嚴格模式,函數參數不支持對其arguments對象取別名。到底如何,寫代碼看一下就知道了。代碼如下

function strict(x){
   "use strict";
   arguments[0]='我說還不行嘛';
   return x===arguments[0];
}
function nostrict(x){
   arguments[0]='我說還不行嘛';
   return x===arguments[0];
}
strict('我就不說');//false
nostrict('我就不說');//true

所以,不管說不說,我們還是不要動arguments對象了。惹不起我還躲不起嘛,我自己複製一份參數中的元素到新數組中,這樣可以吧。

var args=[].slice.call(arguments);

這是什麼,很牛的樣子。小朋友,我給你講講哈。當不使用額外的參數調用數組的slice方法時,它會複製整個數組,結果是一個真正的男人(數組)。要不我們來試試複製個數組試試。

var a=[1,2,3,4,5,6,7];
var b=a;
var c=a.slice();
a.shift();
b;//[2, 3, 4, 5, 6, 7]
c;//[1, 2, 3, 4, 5, 6, 7]

看到沒要真正獨立還是要複製一下的,要不會被影響的。
扯遠了,回到最初的那個問題,動手修正callMethod函數,把"味"補上。

function callMethod(obj,method){
    var args=[].slice.call(arguments,2);
    return obj[method].apply(obj,args);
}

運行一下

var obj={
    add:function(x,y){return x+y;}
};
callMethod(obj,'add',17,25);//42

對就是這個味(結果)。回味一下,這個過程要註意哪些。下麵是書里給的提示。

提示

  • 永遠不要修改arguments對象

  • 使用[].slice.call(arguments)將arguments對象複製到一個真正的數組中再進行修改

附錄一:Array隊列和操作方法

隊列方法

shift()方法

移除數組中的第一個項並返回該項,同時將數組長度減1。

var a=[1,2,3];
var b=a.shift();
b;//1
a;//[2,3]

push()方法

接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。

var a=[1,2,3];
var b=a.push(0);
var c=a.push(4,5,7);
var m=a.push([9,0])
a;//[1, 2, 3, 0, 4, 5, 7, [9,0]]
b;//4
c;//7
m;//8

操作方法

concat()方法

基於當前數組中的所有項創建一個新數組。具體來說,先創建一個數組的副本,然後將接收的參數添加到這個副本的尾部,最後返回新構建的數組。
不傳參可以當複製數組來使用

var a=[2,3,4];
var b=a.concat();
a.push(2,1);
a;//[2,3,4,2,1]
b;//[2,3,4]

傳參是一個或多個數組,將這些數組的第一項複製到新數組後,如果不是數組則簡單添加。

var a=[1,2,3,4,6];
var b=[1,[2,3],4];
var c="good";
var d=a.concat(b,c);
d;//[1, 2, 3, 4, 6, 1, [2,3], 4, "good"]

上面的代碼說明數組複製,不進行遞歸。

slice()方法

可以基於當前數組中的一或多個項創建一個新數組。(不影響原始數組)

不傳參可以用來複制數組

var a=[2,3,4];
var b=a.slice();
a.push(2,1);
a;//[2,3,4,2,1]
b;//[2,3,4]

傳一個或兩個參數時

var a=[2,3,4];
var b=a.slice(1);
var c=a.slice(1,2);
a;//[2,3,4]
b;//[3,4]
c;//[3]

註意:

  • 參數為索引位置,範圍為[arg1,arg2),產生的新數組包括arg1位置項,不包括arg2位置的項。

  • 參數可以為負數,當為負數時,對應的索引位置為數組長度加上該數來確定。

splice()方法

最強大的數組方法,主要用途是向數組中部插入項,有3種使用方式:

  • 刪除:可以刪除任意數量的項,只需指定2個參數:要刪除的第一項的位置和要刪除的項數。
    splice(0,2);刪除數組中的前兩項。範圍為[arg1,arg1+arg2)

  • 插入:可以指定位置插入任意數量的項,只需要提供3個參數:起始位置,0,和要插入的項。
    splice(2,0,'good','morning');會從當前數組的位置2開始插入"godd","morning";

  • 替換:可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需要指定3個參數:起始位置,要刪除的項數和要插入的任意數量的項。splice(2,1,'good','morning');刪除位置2項並添加"godd","morning"

splice()方法返回一個數組,該數組中包含從原始數組中刪除的項。註意:會影響原數組。


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

-Advertisement-
Play Games
更多相關文章
  • FastDFS是一個開源的輕量級分散式文件系統,由跟蹤伺服器(tracker server)、存儲伺服器(storage server)和客戶端(client)三個部分組成,主要解決了海量數據存儲問題,特別適合以中小文件(建議範圍:4KB < file_size <500MB)為載體的線上服務。 S ...
  • SOLID 是面向對象設計5大重要原則的首字母縮寫,當我們設計類和模塊時,遵守 SOLID 原則可以讓軟體更加健壯和穩定。那麼,什麼是 SOLID 原則呢?本篇文章我將談談 SOLID 原則在軟體開發中的具體使用。 單一職責原則(SRP) 單一職責原則(SRP)表明一個類有且只有一個職責。一個類就像 ...
  • 微服務與微服務之間通信。 一、通信協議 我們選用的通信協議是http,其實現工具是retrofit。 特點:實現簡單,但是速度相較於tcp協議是慢一些 如果對速度要求很高,可以使用tcp協議,實現產品可選用mina2/netty 特點:實現簡單,但是速度相較於tcp協議是慢一些 二、服務路由 說明: ...
  • 一、首先編寫微服務基礎項目framework 1、pom.xml 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
  • 在頁面中的鏈接除了常規的方式以外,如果使用javascript,還有很多種方式,下麵是一些使用javascript,打開鏈接的幾種方式: 1.使用window的open方法打開鏈接,這裡可是在制定頁面中打開鏈接,也可以定製打開頁面的尺寸等等。<a href=”javascript:window.op ...
  • angular.js 從來沒有接觸過 現在大家一起來學習 ng-app 指令定義一個 AngularJS 應用程式。 ng-model 指令把元素值(比如輸入域的值)綁定到應用程式。 ng-bind 指令把應用程式變數 name 綁定到某個段落的 innerHTML。 ...
  • 1.創建一個添加按鈕,listeners事件中button的單擊事件,{ id:'button1', xtype : 'button', margin : '6', text : '添加', name : 'btn-add', iconCls: 'btn-add', listeners:{ clic ...
  • /* @@截取字元串長度,漢字算2個字元 @@return [string]+'...' */ var subString = function(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\x ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...