DAY 14
1
Modern Web

# 認知歷程

「人類是如何知覺現實生活中的複雜形體呢？」

# 函式 function

``````var catsInfo = [{
name: 'Orange',
type: 'Orange Tabby',
age: 3
},{
name: 'Black',
type: 'Black',
age: 5
}]

var intro = 'There are ' + catsInfo.length +' cats.'

for(var i = 0; i < catsInfo.length; i++) {
intro += '\nOne of them is the '+ catsInfo[i].type +' cat, it is '+ catsInfo[i].age +' years old.'
}

console.log(intro)
// There are 2 cats.
// One of them is the Orange Tabby cat, it is 3 years old.
// One of them is the Black cat, it is 5 years old.
``````

## 函式宣告 function declaration

``````var catsInfo = [{
name: 'Orange',
type: 'Orange Tabby',
age: 3
},{
name: 'Black',
type: 'Black',
age: 5
}]

function introCatsInfo() {
var intro = 'There are ' + catsInfo.length +' cats.'

for(var i = 0; i < catsInfo.length; i++) {
intro += '\nOne of them is the '+ catsInfo[i].type +' cat, it is '+ catsInfo[i].age +' years old.'
}

return intro
}

introCatsInfo()
// There are 2 cats.
// One of them is the Orange Tabby cat, it is 3 years old.
// One of them is the Black cat, it is 5 years old.
``````

## 函式參數（function parameter）與函式引數（function argument）

``````var catsInfo = [{
name: 'Orange',
type: 'Orange Tabby',
age: 3
},{
name: 'Black',
type: 'Black',
age: 5
}]

function introCatsInfo(info) { // 將資料來源改由函式參數
var intro = 'There are ' + info.length +' cats.'

for(var i = 0; i < info.length; i++) {
intro += '\nOne of them is the '+ info[i].type +' cat, it is '+ info[i].age +' years old.'
}

return intro
}
``````

``````introCatsInfo(catsInfo) // 傳入 catsInfo 內的資料到 introCatsInfo 函式中
// There are 2 cats.
// One of them is the Orange Tabby cat, it is 3 years old.
// One of them is the Black cat, it is 5 years old.

introCatsInfo([{ // 你也可以選擇直接放入資料
name: 'Subordi',
type: 'White',
age: 2
},{
name: 'Sai',
type: 'Siamese',
age: 1
}])
// There are 2 cats.
// One of them is the White cat, it is 2 years old.
// One of them is the Siamese cat, it is 1 years old.
``````

``````var catsInfo = [{
name: 'Orange',
type: 'Orange Tabby',
age: 3
},{
name: 'Black',
type: 'Black',
age: 5
}]

function introCatsInfo(info, customIntro) { // 新增一個 customIntro
var intro = 'There are ' + info.length +' cats.'

for(var i = 0; i < info.length; i++) {
intro += '\nOne of them is the '+ info[i].type +' cat, it is '+ info[i].age +' years old.'
}

if (customIntro) { // 若有 customIntro
intro += customIntro
}

return intro
}

introCatsInfo(catsInfo, '\nSo cute!')
// There are 2 cats.
// One of them is the Orange Tabby cat, it is 3 years old.
// One of them is the Black cat, it is 5 years old.
// So cute!
``````

### 延伸閱讀：函式傳送參數與記憶體

1. 若將值直接賦值給變數時，不論其資料型別為何，都會指向到新的記憶體。
2. 若透過變數賦值，如果來源資料為原始型別，則指向新的記憶體。
3. 若透過變數賦值，如果來源資料為物件型別，則會將變數的參考地址改為賦值變數的記憶體地址。

``````var source = 1;
function change(target) {
target = 2
}

change(source)

console.log(source)
``````

``````function change(target) {
var target = source // 隱性建立
target = 2
}
``````

``````var source = 1; // 0x00 => undefined, 0x01 => 1
function change(target) {
var target = source // 隱性建立，此時 target: 0x02 => undefined, 0x03 => 1
console.log(source) // 0x03 => 1
target = 2 					// 0x04 => 2
console.log(source) // 0x04 => 2
}

change(source)
console.log(source) // 找到 0x01 中的 1
``````

``````var sourceA = {source: 'A'};
var sourceB = {source: 'B'};
function change(targetA, targetB){
targetA = {source: 'change by function'}
targetB.source = 'change by function'
}
change(sourceA, sourceB)

console.log(sourceA) // {source: 'A'}
console.log(sourceB) // {source: 'change by function'}
``````

``````var sourceA = {source: 'A'}; // 0x00 => undefined, 0x02 => {source: 'A'}
var sourceB = {source: 'B'}; // 0x01 => undefined, 0x03 => {source: 'B'}

function change(targetA, targetB){
var targetA = sourceA // 0x04 => undefined, 0x02 => {source: 'A'}
var targetB = sourceB // 0x05 => undefined, 0x03 => {source: 'B'}
targetA = {source: 'change by function'} // 0x06 => {source: 'change by function'}
targetB.source = 'change by function' // 先找到 0x03 中的 source，並修改裡面的值
}

change(sourceA, sourceB)

console.log(sourceA) // 找到 0x02 中的 {source: 'A'}
console.log(sourceB) // 找到 0x03 中的 {source: 'change by function'}
``````