1. 程式人生 > >js的函式的按值傳遞引數(例項講解)

js的函式的按值傳遞引數(例項講解)

js的函式傳參的方式是按值傳遞,正常情況下,改變函式引數的值,並不會對函式外部的變數造成影響。例如:

?

1

2

3

4

5

6

'use strict';

var list = [1, 2, 3];

list.forEach(function(item) {

item ++;

});

console.log(list); // [ 1, 2, 3 ]

這是因為js的函式在接收引數時,會生成一個副本變數,該副本變數等於引數的值,可以分析js這樣執行的:

?

1

2

3

4

5

6

7

8

9

10

11

12

'use strict';

var list = [1, 2, 3];

list.forEach(function(item, i) {

// 第一個item是副本,第二個item是陣列元素list[i]

var item = item;

// 副本item++

item ++;

// 列印的是副本的值

console.log(item); // 2, 3, 4

});

// 原陣列不會改變

console.log(list); // [ 1, 2, 3 ]

但是當函式的引數傳遞的是一個物件呢?

?

1

2

3

4

5

'use strict';var list = [{a: 1, b: 2}];

list.forEach(function(item) {

item.a ++;

});

console.log(list); // [ { a: 2, b: 2 } ]

發現函式內部居然改變了函式外部變數的值,那這又是為什麼呢?

我們來分析js是如何執行這段程式碼的

?

1

2

3

4

5

6

7

8

9

10

11

12

13

'use strict';

var list = [{a: 1, b: 2}];

list.forEach(function(item, i) {

// 第一個item是副本,第二個item是陣列元素list[i]

var item = item;

// 此時item和list[i]指向的是同一地址,故兩者完全一樣

console.log(item === list[i]); // true

// 此時item.a++ 亦即 list[i].a++

item.a ++;

// list[i]的值已經改變

console.log(list[i]); // { a: 2, b: 2 }

});

console.log(list); // [ { a: 2, b: 2 } ]

那麼為什麼會產生這種情況呢?

由於js中物件屬於引用型別,var item = item 這一步相當於把 list[i] 的地址賦值給了item,他們兩個指向的都是原物件的地址,所以通過其中的一個去修改值時其實是修改他們指向的那個物件。例子中通過 item.a++ 方法改變了原物件的值,因此最後應該輸出 [ { a: 2, b: 2 } ]。