js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)
js的函數(shù)傳參的方式是按值傳遞，正常情況下，改變函數(shù)參數(shù)的值，并不會對函數(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í)，會生成一個(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ù)組不會改變
console.log(list); // [ 1, 2, 3 ]
但是當(dāng)函數(shù)的參數(shù)傳遞的是一個(gè)對象呢？
'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 } ]
那么為什么會產(chǎn)生這種情況呢？
由于js中對象屬于引用類型，var item = item 這一步相當(dāng)于把 list[i] 的地址賦值給了item，他們兩個(gè)指向的都是原對象的地址，所以通過其中的一個(gè)去修改值時(shí)其實(shí)是修改他們指向的那個(gè)對象。例子中通過 item.a++ 方法改變了原對象的值，因此最后應(yīng)該輸出 [ { a: 2, b: 2 } ]。
以上這篇js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇layui富文本編輯器前端無法取值的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中關(guān)于iframe滾動條的去除和保留
在開發(fā)中經(jīng)常遇到去掉全部的滾動條，去掉右邊的滾動條且保留底下的滾動條，去掉底下的滾動條且保留右邊的滾動條，大家基于js是怎么實(shí)現(xiàn)的呢？下面小編通過本文給大家詳細(xì)介紹下，對js iframe滾動條相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
JavaScript實(shí)現(xiàn)左側(cè)菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)左側(cè)菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
基于打包工具Webpack進(jìn)行項(xiàng)目開發(fā)實(shí)例
這篇文章主要介紹了基于打包工具Webpack進(jìn)行項(xiàng)目開發(fā)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
uniapp小程序?qū)崙?zhàn)之利用騰訊地圖獲取定位
使用uniapp是因?yàn)樗且粋€(gè)使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可以發(fā)布到ios,android,web以及各種小程序,快應(yīng)用等多個(gè)平臺,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序?qū)崙?zhàn)之利用騰訊地圖獲取定位的相關(guān)資料,需要的朋友可以參考下2023-02-02
prototype class詳解...2006-09-09
JavaScript實(shí)現(xiàn)數(shù)組對象轉(zhuǎn)換為鍵值對的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對象的數(shù)組轉(zhuǎn)換為鍵值對形式的四種方法,并從實(shí)現(xiàn)方式的簡潔性、可讀性和性能角度進(jìn)行了分析比較,感興趣的朋友可以參考下2024-02-02
這篇文章主要介紹了JS按字節(jié)截取字符長度實(shí)例，有需要的朋友可以參考一下2013-11-11
JS實(shí)現(xiàn)的適合做faq或menu滑動效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的適合做faq或menu滑動效果,結(jié)合實(shí)例形式分析了基于JS實(shí)現(xiàn)的頁面元素滑動漸變效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11
JavaScript創(chuàng)建對象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
這篇文章主要介紹了JavaScript創(chuàng)建對象方式,結(jié)合實(shí)例形式總結(jié)分析了工廠模式、構(gòu)造函數(shù)模式、原型模式等各種常見的javascript對象創(chuàng)建方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12