Question

我还没有玩过Javascript一段时间，而且我在这里摸不着头脑......

我有一个我已定义的对象：

var attrs = {
    "charStats": {
        "hp": 500000,
        "speed": 1,
        "juice": 0,
        "nova": 0,
        "special": 1,
        "experience": 0,
        "level": 1
        }
    };

用HTML备份并显示数据：

<div class="block">
    <h2>Character Statistics</h2>
    <ul class="statistics">
        <li>HP: <span class="hp"></span></li>
        <li>Speed: <span class="speed"></span></li>
        <li>Juice: <span class="juice"></span></li>
        <li>Special: <span class="special"></span></li>
        <li>Nova: <span class="nova"></span></li>
        <li>Experience: <span class="experience"></span></li>
        <li>Level: <span class="level"></span></li>
    </ul>
</div>

<div class="block">
    <button class="addExp">Add Experience</button>
</div>

<button class="updateStats">Update</button>

所以我遇到的问题是我的功能之一，就像这样：

function addToStats(amount){
    attrs.charStats.experience += amount;
}
$('.addExp').on('click', function(){
    addToStats(15);
});

但由于某种原因试图使其更具可扩展性，设置2个参数似乎根本不起作用......

function addToStats(stat, amount){
    stat += amount;
}
$('.addExp').on('click', function(){
    addToStats(attrs.charStats.experience, 15);
});

我到底错过了什么？

工作： http://jsfiddle.net/wu61owt6/

不工作： http://jsfiddle.net/wu61owt6/1/

Answer 1

错误是你错过理解传递参考VS传递值。

您没有在通话中传递引用，而是传递了值。

所以实际上你正在做

20 += 1;

如果您将代码更改为这样，它将起作用。

function addToStats(stats, prop, amount){
    stats[prop] += amount;
}
$('.addExp').on('click', function(){
    addToStats(attrs.charStats,"experience", 15);
});

Answer 2

attrs.charStats.experience只是一个数字，所以当你这样做时：

addToStats(attrs.charStats.experience, 15);

就像你刚刚这样做：

addToStats(0, 15);

javascript中的原始值（如数字）按值传递。它们不会将指针或引用传递给对象中的字段，它们只传递值，因此在传递数字时无法更改原始属性。

您可以将对象引用传递给父对象。所以，你可以这样做：

function addToStats(obj, field, val) {
    obj[field] += val;
}

addToStats(attrs.charStats, "experience", 15);

简单参数Javascript函数

2 个答案: