2017/04/15

Javascirpt pass by value 和 pass by reference

本篇例子參考：http://bit.ly/2nOr0Y0
關於Javascirpt傳值與傳址的紀錄
當輸入給函數的參數型態為Number、String、Boolean等非Object類型，
也就是說記憶體會再複製一份。
<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>標題</title>
    <script type="text/javascript">
        var paramA = 'original';
        document.write(paramA + '<br />'); //輸出 original
        function changeParamA(paramA) {
            paramA = 'changed';
            document.write(paramA + '<br />'); //輸出 changed
        }
        changeParamA(paramA); //在函數中運作，輸出 changed
        document.write(paramA + '<br />'); //輸出 original
    </script>
</head>
<body>
</body>
</html>
輸出結果：
original
changed
original

看到第15行，在外面再輸出一次還是original。

傳物件進去
<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>標題</title>
    <!--引入javascript檔<script src="jquery-2.1.4.min.js" type="text/javascript"></script>-->
    <!--jQueryCDN<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>-->
    <!--引入CSS檔<link rel="stylesheet" type="text/css" href="table_CSS.css" />-->
    <!--內嵌CSS碼<style type="text/css"></style>-->
    <script type="text/javascript">
        //宣告變數，資料類型為物件
        var paramB = {
            attr: 'original'
        };
        document.write(paramB.attr + '<br />');    //輸出 original
        function changeParamB(paramB){
            paramB.attr = "changed";
            document.write(paramB.attr + '<br />');    //輸出 changed
        }
        changeParamB(paramB);    //在函數中運作，輸出 changed
        document.write(paramB.attr + '<br />');    //輸出 changed
    </script>
</head>
<body>
</body>
</html>
輸出：
original
changed
changed
從頭到尾記憶體只有一份！ 第18行，直接對物件的屬性做修改，所以改的是同一份內容。

再看一個比較範例： 
<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>標題</title>
    <!--引入javascript檔<script src="jquery-2.1.4.min.js" type="text/javascript"></script>-->
    <!--jQueryCDN<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>-->
    <!--引入CSS檔<link rel="stylesheet" type="text/css" href="table_CSS.css" />-->
    <!--內嵌CSS碼<style type="text/css"></style>-->
    <script type="text/javascript">
    var paramAry = ["original"];

    document.write("一開始原始的輸出："+paramAry[0] + "<br />"); //輸出 original

    function changeParamAry1(paramAry) {
        paramAry = ["changed"];
        document.write("changeParamAry1函式中的輸出："+paramAry[0] + "<br />"); //輸出 changed
    }

    function changeParamAry2(paramAry) {
        paramAry[0] = "changed";
        document.write("changeParamAry2函式中的輸出："+paramAry[0] + "<br />"); //輸出 changed
    }
    changeParamAry1(paramAry); //在函數中運作，輸出 changed
    document.write("呼叫changeParamAry1後再印出"+paramAry[0] + "<br />"); //輸出 original

    document.write("<br/>");

    changeParamAry2(paramAry); //在函數中運作，輸出 changed
    document.write("呼叫changeParamAry2後再印出"+paramAry[0] + "<br />"); //輸出 changed
    </script>
</head>
<body>
</body>
</html>
輸出結果：
一開始原始的輸出：original
changeParamAry1函式中的輸出：changed
呼叫changeParamAry1後再印出original

changeParamAry2函式中的輸出：changed
呼叫changeParamAry2後再印出changed
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)