[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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...