Question

有＆＃34;选项＆＃34;我发送一个对象作为参数的方法，我希望这个对象存储在变量answer中。代码是：

var Selectable = {
    create: function(type) {
        Object.create(this);
        this.type = type;
        this.id =  Math.random().toString(36).replace(/[^a-z]+/g, '').substring(0, 5);

        this.cacheDom();
        return this;
    },
    cacheDom: function(){
        this.$target = $('#selectable-target');
        this.$id = $('#selectable-' + this.id);
        this.$options = this.$id.find('.selectable-options');
        this.$revise = this.$id.find('a.revise');
    },
    options: function(values){
        this.answers = {};
        Object.keys(values).forEach(function(key) {
            this.answers[key] = values[key];
        });
    },
    render: function() {
        this.$target.append(
            $('<div>')
            .attr('id', 'selectable-'+this.id)
            .append(
                $('<div>')
                .addClass('selectable-options')
            )
        )

        this.cacheDom();
    }
};

在实例化并尝试将控制台中的对象插入answers属性时，我得到了这个：

var test = Selectable.create('img');
undefined

test.options({'foo': '1', 'foo2': '0'});
Uncaught TypeError: Cannot set property 'foo' of undefined(…)

要解决这个问题，我可以将对象复制到属性中，如下所示：

options: function(values){
            this.answers = values;
}

我想知道为什么会这样，以及如何解决它。

Answer 1

错误在

Object.keys(values).forEach(function(key) {
  this.answers[key] = values[key];
});

如果您查看the documentation，您会看到，在回调中使用forEach时，this为undefined，除非您传递自定义参数。解决方案是按如下方式重写它：

Object.keys(values).forEach(function(key) {
  this.answers[key] = values[key];
}, this);

此更改会强制回调中的值this等于调用者中this的值。

等效，但仅限ES6，您可以使用=>而不是function来捕获this，并且上次检查时速度更快（至少1年前））：

Object.keys(values).forEach(key => {
  this.answers[key] = values[key];
});

Answer 2

首先，您必须了解什么是对象以及哪些＆＃39;这个＆＃39;属于哪个实例。在下面的代码中：

1 options: function(values){ // outer function
2     this.answers = {};
3     Object.keys(values).forEach(function(key) { // inner function
4         this.answers[key] = values[key];
5     });
6 },

首先＆＃39;这个＆＃39; （第2行） - 链接到外部函数实例。但第二个＆＃39;这个＆＃39; - 与内部功能相关联。更重要的是 - 没有任何一个＆＃39; -es没有链接到Selectable。

要解决这样的问题 - 首先你必须将对象作为一个函数引入。

var Selectable = function() {

比保存＆＃39;这个＆＃39;在一些变量中。

var that = this;

使用＆＃39;那＆＃39;而不是这个＆＃39;在你所有的内在功能中。

最后，像这样使用Selectable：

var selectable = new Selectable();
selectable.options({'foo':'bar'});

希望有所帮助

使用foreach内部对象创建对象

2 个答案: