JavaScript：爲什麼要獲取最後插入的值？

Question

我越來越熟悉JavaScript的原型世界和this關鍵字。我是網絡世界的新手。今天，當我開始玩原型時，我看到一些奇怪的行爲，但我無法弄清爲什麼會發生這種情況。我創建了一個構造函數Group如下：

// Code goes here 
function Group(config) { 
    this.config = config; 
    this.getId = function() { 
    return this.config.id; 
    }; 
    this.setId = function(id) { 
    this.config.id = id; 
    }; 
} 

我用它在一個MyGroup構造是這樣的：

function MyGroup(config) { 
    var myAttrs = ['id', 'name']; 
    this.g = new Group(config); 
    addGetterSetter(MyGroup, this.g, myAttrs) 
} 

addGetterSetter是我寫的getter和setter添加到動態的屬性功能MyGroup。

var GET = 'get', 
    SET = 'set'; 

function capitalize(str) { 
    return str.charAt(0).toUpperCase() + str.slice(1); 
} 

function addGetterSetter(constructor, target, attrs) { 

    function addGetter(constructor, target, attr) { 
    var method = GET + capitalize(attr); 
    constructor.prototype[method] = function() { 
     return target[method](); 
    }; 
    } 

    function addSetter(constructor, target, attr) { 
    var method = SET + capitalize(attr); 
    constructor.prototype[method] = function(value) { 
     return target[method](value); 
    }; 
    } 
    for (var index = 0; index < attrs.length; index++) { 
    addGetter(constructor, target, attrs[index]); 
    addSetter(constructor, target, attrs[index]); 
    } 
} 

現在，當我使用MyGroup，Group這樣的：

var items = [{ 
    id: 123, 
    name: 'Abc' 
}, { 
    id: 131, 
    name: 'Bca' 
}, { 
    id: 22, 
    name: 'bc' 
}]; 
var groups = []; 
items.forEach(function(item) { 
    var g = new MyGroup(item); 
    groups.push(g); 
}); 

groups.forEach(function(g) { 
    console.log(g.getId()); //don't know why this logs 22 three times instead of all ids 
}); 

在group.forEach我不知道爲什麼最後一個項目的id是越來越記錄。我無法理解發生了什麼問題。我將如何獲得g.getId()被調用的組。這是plunkr

Answer 1

這是因爲你正在向原型中添加方法，並且每當前一個函數在循環中覆蓋時，函數會在forEach循環結束時保持對最後一個對象的引用。你需要的是增加功能到該對象：

function MyGroup(config) { 
    var myAttrs = ['id', 'name']; 
    this.g = new Group(config); 
    addGetterSetter(this, this.g, myAttrs) 
} 
function addGetterSetter(object, target, attrs) { 

    function addGetter(object, target, attr) { 
    var method = GET + capitalize(attr); 
    object[method] = function() { 
     return target[method](); 
    }; 
    } 

    function addSetter(object, target, attr) { 
    var method = SET + capitalize(attr); 
    object[method] = function(value) { 
     return target[method](value); 
    }; 
    } 
    for (var index = 0; index < attrs.length; index++) { 
    addGetter(object, target, attrs[index]); 
    addSetter(object, target, attrs[index]); 
    } 
} 

JSFIDDLE