簡單介紹JavaScript參數傳遞

Tommy Lin
林儀泰
FB/Email:tooto1985@gmail.com
 傳值參考(call by value)
◦ 複製內容到新的參照上。
 傳址參考(call by reference)
◦ 引用參考到新的參照上,修改或賦予新值都會改變原有參
照。
 共享參考(call by sharing)
◦ 複製參考到新的參照上,修改會改變原有參照,但賦予新
值則會產生新的參考。
 傳值參考(call by value)
◦ 複製內容到新的參照上。
 傳址參考(call by reference)
◦ 引用參考到新的參照上,修改或賦予新值都會改變原有參
照。
 共享參考(call by sharing)
◦ 複製參考到新的參照上,修改會改變原有參照,但賦予新
值則會產生新的參考。
 為什麼看起來像傳值?
◦ 原始(primitive)型別是不可變(immutable)的,無法修改
值,永遠只能賦予新值。
 為什麼看起來像傳址?
◦ 物件(object)型別雖然是可變(mutable)的,修改會改變原
本參考,但賦予新值會產生新的參考。
◦ 我們常常忽略了”賦予新值會改變原有參考”這個定義
◦ 感覺好像是傳址參考 (實際上並不是喔)!
簡單介紹JavaScript參數傳遞
var aaa = “string”; RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
aaa
“string”
AddressVariable
0x01
var aaa = “string”;
function run(xyz) {
xyz=“world”;
}
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
Address
run
function run…
Variable
aaa
“string”
0x01
0x03
var aaa = “string”;
function run(xyz) {
xyz=“world”;
}
run(aaa);
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
Address
xyz
Variable
run
function run…
aaa
“string”
0x01
0x03
0x01
var aaa = “string”;
function run(xyz) {
xyz=“world”;
}
run(aaa);
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
AddressVariable
xyz
run
function run…
aaa
“string”
0x01
0x03
0x06
“world”
var aaa = “string”;
function run(xyz) {
xyz=“world”;
}
run(aaa);
console.log(aaa);
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
AddressVariable
xyz
run
function run…
aaa
“string”
0x01
0x03
0x06
“world”
簡單介紹JavaScript參數傳遞
var aaa = {name:”john”}; RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
aaa
{name:“john”}
AddressVariable
0x01
var aaa = {name:”john”};
function run(xyz) {
xyz.name=“mark”;
}
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
Address
run
function run…
Variable
aaa
{name:“john”}
0x01
0x03
var aaa = {name:”john”};
function run(xyz) {
xyz.name=“mark”;
}
run(aaa);
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
AddressVariable
run
function run…
aaa
{name:“john”}
0x01
0x03
xyz 0x01
var aaa = {name:”john”};
function run(xyz) {
xyz.name=“mark”;
}
run(aaa);
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
AddressVariable
run
function run…
aaa
{name:“mark”}
0x01
0x03
xyz 0x01
var aaa = {name:”john”};
function run(xyz) {
xyz.name=“mark”;
}
run(aaa);
console.log(aaa);
RAM
0x01
0x02
0x03
0x04
0x05
0x06
0x07
0x08
0x09
AddressVariable
run
function run…
aaa
{name:“mark”}
0x01
0x03
xyz 0x01
 有一種類似傳值參考或傳址參考的錯覺
 但JavaScript中只有共享參考(call by sharing)一種
 http://www.ecma-international.org/ecma-262/5.1/#sec-8.7
 https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_sh
aring
 http://www.codeproject.com/Articles/882622/An-
Illustrated-Guide-to-Parameter-Passing-in-JavaS
 http://www.jstips.co/en/know-the-passing-mechanism/
 http://bosn.me/js/js-call-by-sharing/
1 of 18

Recommended

Powershell勉強会 v3 (もっと新しいバージョンがあります) by
Powershell勉強会 v3 (もっと新しいバージョンがあります)Powershell勉強会 v3 (もっと新しいバージョンがあります)
Powershell勉強会 v3 (もっと新しいバージョンがあります)Tetsu Yama
698 views226 slides
AWS KMS를 활용하여 안전한 AWS 환경을 구축하기 위한 전략::임기성::AWS Summit Seoul 2018 by
AWS KMS를 활용하여 안전한 AWS 환경을 구축하기 위한 전략::임기성::AWS Summit Seoul 2018AWS KMS를 활용하여 안전한 AWS 환경을 구축하기 위한 전략::임기성::AWS Summit Seoul 2018
AWS KMS를 활용하여 안전한 AWS 환경을 구축하기 위한 전략::임기성::AWS Summit Seoul 2018Amazon Web Services Korea
1.9K views50 slides
JP1/AJS2オペレータ勉強会 by
JP1/AJS2オペレータ勉強会JP1/AJS2オペレータ勉強会
JP1/AJS2オペレータ勉強会mizuky fujitani
12.7K views38 slides
浸透するサーバーレス 実際に見るユースケースと実装パターン by
浸透するサーバーレス 実際に見るユースケースと実装パターン浸透するサーバーレス 実際に見るユースケースと実装パターン
浸透するサーバーレス 実際に見るユースケースと実装パターンAmazon Web Services Japan
17.4K views42 slides
AWS meets Android - "AWS SDK for Android"で開発を楽にしよう! by
AWS meets Android - "AWS SDK for Android"で開発を楽にしよう!AWS meets Android - "AWS SDK for Android"で開発を楽にしよう!
AWS meets Android - "AWS SDK for Android"で開発を楽にしよう!SORACOM, INC
5.5K views84 slides
AWS CloudFormation Best Practices by
AWS CloudFormation Best PracticesAWS CloudFormation Best Practices
AWS CloudFormation Best PracticesAmazon Web Services
27.9K views49 slides

More Related Content

What's hot

Ansible과 CloudFormation을 이용한 배포 자동화 by
Ansible과 CloudFormation을 이용한 배포 자동화Ansible과 CloudFormation을 이용한 배포 자동화
Ansible과 CloudFormation을 이용한 배포 자동화AWSKRUG - AWS한국사용자모임
6.7K views75 slides
Amazon DynamoDB 키 디자인 패턴 by
Amazon DynamoDB 키 디자인 패턴Amazon DynamoDB 키 디자인 패턴
Amazon DynamoDB 키 디자인 패턴Amazon Web Services Korea
824 views52 slides
2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ by
2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ
2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイEnpel
5.9K views15 slides
Awsのインフラをデザインパターン駆使して設計構築 by
Awsのインフラをデザインパターン駆使して設計構築Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築Monstar Lab Inc.
19.4K views99 slides
Les02 (restricting and sorting data) by
Les02 (restricting and sorting data)Les02 (restricting and sorting data)
Les02 (restricting and sorting data)Achmad Solichin
2.1K views38 slides
View, Store Procedure & Function and Trigger in MySQL - Thaipt by
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptFramgia Vietnam
9.7K views15 slides

What's hot(20)

2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ by Enpel
2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ
2 TomcatによるWebアプリケーションサーバ構築 第4章 Tomcatの構成(2)-デプロイ
Enpel5.9K views
Awsのインフラをデザインパターン駆使して設計構築 by Monstar Lab Inc.
Awsのインフラをデザインパターン駆使して設計構築Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築
Monstar Lab Inc.19.4K views
Les02 (restricting and sorting data) by Achmad Solichin
Les02 (restricting and sorting data)Les02 (restricting and sorting data)
Les02 (restricting and sorting data)
Achmad Solichin2.1K views
View, Store Procedure & Function and Trigger in MySQL - Thaipt by Framgia Vietnam
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
Framgia Vietnam9.7K views
SQL Server パフォーマンスカウンター by Masayuki Ozawa
SQL Server パフォーマンスカウンターSQL Server パフォーマンスカウンター
SQL Server パフォーマンスカウンター
Masayuki Ozawa5.1K views
Data Factoryの勘所・大事なところ by Tsubasa Yoshino
Data Factoryの勘所・大事なところData Factoryの勘所・大事なところ
Data Factoryの勘所・大事なところ
Tsubasa Yoshino4.5K views
Les07 (using the set operators) by Achmad Solichin
Les07 (using the set operators)Les07 (using the set operators)
Les07 (using the set operators)
Achmad Solichin1.6K views
HBase Schema Design - HBase-Con 2012 by Ian Varley
HBase Schema Design - HBase-Con 2012HBase Schema Design - HBase-Con 2012
HBase Schema Design - HBase-Con 2012
Ian Varley2.1K views
Jena by yuhana
JenaJena
Jena
yuhana2.6K views
AWS初心者向けWebinar 失敗例を成功に変える AWSアンチパターンのご紹介 by Amazon Web Services Japan
AWS初心者向けWebinar 失敗例を成功に変える AWSアンチパターンのご紹介AWS初心者向けWebinar 失敗例を成功に変える AWSアンチパターンのご紹介
AWS初心者向けWebinar 失敗例を成功に変える AWSアンチパターンのご紹介
Asp.net mvc 概觀介紹 by Alan Tsai
Asp.net mvc 概觀介紹Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai5.4K views
C# で Single Page Web アプリを 開発できる Blazor ― その魅力 by Jun-ichi Sakamoto
C# で Single Page Web アプリを開発できる Blazor ― その魅力C# で Single Page Web アプリを開発できる Blazor ― その魅力
C# で Single Page Web アプリを 開発できる Blazor ― その魅力
Jun-ichi Sakamoto3.9K views

簡單介紹JavaScript參數傳遞

  • 2.  傳值參考(call by value) ◦ 複製內容到新的參照上。  傳址參考(call by reference) ◦ 引用參考到新的參照上,修改或賦予新值都會改變原有參 照。  共享參考(call by sharing) ◦ 複製參考到新的參照上,修改會改變原有參照,但賦予新 值則會產生新的參考。
  • 3.  傳值參考(call by value) ◦ 複製內容到新的參照上。  傳址參考(call by reference) ◦ 引用參考到新的參照上,修改或賦予新值都會改變原有參 照。  共享參考(call by sharing) ◦ 複製參考到新的參照上,修改會改變原有參照,但賦予新 值則會產生新的參考。
  • 4.  為什麼看起來像傳值? ◦ 原始(primitive)型別是不可變(immutable)的,無法修改 值,永遠只能賦予新值。  為什麼看起來像傳址? ◦ 物件(object)型別雖然是可變(mutable)的,修改會改變原 本參考,但賦予新值會產生新的參考。 ◦ 我們常常忽略了”賦予新值會改變原有參考”這個定義 ◦ 感覺好像是傳址參考 (實際上並不是喔)!
  • 6. var aaa = “string”; RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 aaa “string” AddressVariable 0x01
  • 7. var aaa = “string”; function run(xyz) { xyz=“world”; } RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 Address run function run… Variable aaa “string” 0x01 0x03
  • 8. var aaa = “string”; function run(xyz) { xyz=“world”; } run(aaa); RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 Address xyz Variable run function run… aaa “string” 0x01 0x03 0x01
  • 9. var aaa = “string”; function run(xyz) { xyz=“world”; } run(aaa); RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 AddressVariable xyz run function run… aaa “string” 0x01 0x03 0x06 “world”
  • 10. var aaa = “string”; function run(xyz) { xyz=“world”; } run(aaa); console.log(aaa); RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 AddressVariable xyz run function run… aaa “string” 0x01 0x03 0x06 “world”
  • 12. var aaa = {name:”john”}; RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 aaa {name:“john”} AddressVariable 0x01
  • 13. var aaa = {name:”john”}; function run(xyz) { xyz.name=“mark”; } RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 Address run function run… Variable aaa {name:“john”} 0x01 0x03
  • 14. var aaa = {name:”john”}; function run(xyz) { xyz.name=“mark”; } run(aaa); RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 AddressVariable run function run… aaa {name:“john”} 0x01 0x03 xyz 0x01
  • 15. var aaa = {name:”john”}; function run(xyz) { xyz.name=“mark”; } run(aaa); RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 AddressVariable run function run… aaa {name:“mark”} 0x01 0x03 xyz 0x01
  • 16. var aaa = {name:”john”}; function run(xyz) { xyz.name=“mark”; } run(aaa); console.log(aaa); RAM 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 AddressVariable run function run… aaa {name:“mark”} 0x01 0x03 xyz 0x01
  • 18.  http://www.ecma-international.org/ecma-262/5.1/#sec-8.7  https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_sh aring  http://www.codeproject.com/Articles/882622/An- Illustrated-Guide-to-Parameter-Passing-in-JavaS  http://www.jstips.co/en/know-the-passing-mechanism/  http://bosn.me/js/js-call-by-sharing/