js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)
js的函數(shù)傳參的方式是按值傳遞,正常情況下,改變函數(shù)參數(shù)的值,并不會(huì)對(duì)函數(shù)外部的變量造成影響。例如:
'use strict'; var list = [1, 2, 3]; list.forEach(function(item) { item ++; }); console.log(list); // [ 1, 2, 3 ]
這是因?yàn)閖s的函數(shù)在接收參數(shù)時(shí),會(huì)生成一個(gè)副本變量,該副本變量等于參數(shù)的值,可以分析js這樣運(yùn)行的:
'use strict'; var list = [1, 2, 3]; list.forEach(function(item, i) { // 第一個(gè)item是副本,第二個(gè)item是數(shù)組元素list[i] var item = item; // 副本item++ item ++; // 打印的是副本的值 console.log(item); // 2, 3, 4 }); // 原數(shù)組不會(huì)改變 console.log(list); // [ 1, 2, 3 ]
但是當(dāng)函數(shù)的參數(shù)傳遞的是一個(gè)對(duì)象呢?
'use strict';var list = [{a: 1, b: 2}]; list.forEach(function(item) { item.a ++; }); console.log(list); // [ { a: 2, b: 2 } ]
發(fā)現(xiàn)函數(shù)內(nèi)部居然改變了函數(shù)外部變量的值,那這又是為什么呢?
我們來分析js是如何運(yùn)行這段代碼的
'use strict'; var list = [{a: 1, b: 2}]; list.forEach(function(item, i) { // 第一個(gè)item是副本,第二個(gè)item是數(shù)組元素list[i] var item = item; // 此時(shí)item和list[i]指向的是同一地址,故兩者完全一樣 console.log(item === list[i]); // true // 此時(shí)item.a++ 亦即 list[i].a++ item.a ++; // list[i]的值已經(jīng)改變 console.log(list[i]); // { a: 2, b: 2 } }); console.log(list); // [ { a: 2, b: 2 } ]
那么為什么會(huì)產(chǎn)生這種情況呢?
由于js中對(duì)象屬于引用類型,var item = item 這一步相當(dāng)于把 list[i] 的地址賦值給了item,他們兩個(gè)指向的都是原對(duì)象的地址,所以通過其中的一個(gè)去修改值時(shí)其實(shí)是修改他們指向的那個(gè)對(duì)象。例子中通過 item.a++ 方法改變了原對(duì)象的值,因此最后應(yīng)該輸出 [ { a: 2, b: 2 } ]。
以上這篇js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS日期轉(zhuǎn)化指定格式及獲取月/周日期區(qū)間的方法
本文詳細(xì)介紹了JavaScript中Date類型的處理方法,包括日期的格式轉(zhuǎn)換和獲取特定月份或周的日期區(qū)間,本文介紹JS日期轉(zhuǎn)化指定格式及獲取月/周日期區(qū)間的方法,感興趣的朋友跟隨小編一起看看吧2024-09-09原生Javascript封裝的一個(gè)AJAX函數(shù)分享
這篇文章主要介紹了原生Javascript封裝的一個(gè)AJAX函數(shù)分享,本文是實(shí)際項(xiàng)目中提取出來的,簡單易用,需要的朋友可以參考下2014-10-10JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08javascript正則表達(dá)式之分組概念與用法實(shí)例
這篇文章主要介紹了javascript正則表達(dá)式之分組概念與用法,結(jié)合實(shí)例形式分析了javascript正則表達(dá)式分組的功能、定義與使用方法,需要的朋友可以參考下2016-06-06flash javascript之間的通訊方法小結(jié)
不用getURL和fsCommand方法個(gè)國外的通信方法,值得一看2008-12-12webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07