函數參數按值傳遞

對於函數的參數都是按值傳遞的理解，經常會令人難以理解，特別參數是對象的時候，老是看起來像是引用傳遞；下面用幾個例子來解釋：

1、函數參數的幾種數據類型：

一、 參數是基本數據類型，這個按值傳遞，比較容易理解

// 參數是基本數據類型，這個按值傳遞，比較容易理解

let num = 1;

function changeNum(arg1) {

  ++arg1;

}

changeNum(num);

console.log(num); // 打印出1

複製代碼

二、參數是對象，乍一看覺得是引用傳遞

let person = {

  name: 'xl',

  skill: ['js', 'css', 'html']

};

function changeObj(obj) {

  obj.name = 'otherName';

}

changeObj(person);

console.log(person); // {name: 'otherName', skill: ['js', 'css', 'html']}

複製代碼

三、參數是對象的另外一種狀況，讓人又摸不到頭腦了

let person = {

  name: 'xl',

  skill: ['js', 'css', 'html']

};

function changeObj(obj) {

  obj = {

    name: 'otherName'

  };

}

changeObj(person);

console.log(person); // {name: 'xl', skill: ['js', 'css', 'html']}

// 若是參數是按引用傳遞的，那麼執行changeObj(person) 的時候：

person  = {

  name: 'otherName'

};

// person豈不是變成另外一個對象了，爲何實際又是原對象呢？

複製代碼

四、參數是函數（對象）的狀況

let color = 'blue';

let obj = {

  color: 'red',

  sayColor() {

    console.log(this.color);

  }

};

function fn(callback) {

  callback();

}

fn(obj.sayColor); // 'blue'

// 上面的運行結果，真的是超乎想象，打印出的居然是'blue'

複製代碼

2、函數參數傳遞的理解

一、到底函數的參數是怎麼傳遞的呢？下面是一種看起來比較合理的猜測

function fn(arg1, arg2) {

  // 在函數裏面，一開始就執行：申明並賦值操做

  let arg1 = arguments[0],

      arg2 = arguments[1];

}

複製代碼

3、驗證猜測 ：

一、參數是對象的另外一種狀況，讓人又摸不到頭腦了

let person = {

  name: 'xl',

  skill: ['js', 'css', 'html']

}

function changeObj(obj) {

  let obj = argument[0];

  // 讓obj從新指向另外一個對象

  obj = {

    name: 'otherName'

  };

}

changeObj(person);

// 實際函數執行分析：

// function changeObj(obj) {

  let obj = person;

  obj = {

    name: 'otherName'

  };

// }

// 最後person沒有變化，合理

複製代碼

二、參數是函數（對象）的狀況

let color = 'blue';

let obj = {

  color: 'red',

  sayColor() {

    console.log(this.color);

  }

};

function fn(callback) {

  callback();

}

fn(obj.sayColor); // 'blue'

// 實際函數執行分析：

// function fn(callback) {

  let callback = function () {

    console.log(this.color);

  }

  callback();

  // 函數中的this指向widow，所以this.color是blue

// }

複製代碼