向函数添加自定义属性

Question

由于存在许多与我的关键字相关的其他问题，搜索合适的答案很困难，所以我会在这里问这个问题。

众所周知，JavaScript 中的函数是对象，它们有自己的属性和方法（更准确地说，是函数实例，继承自 Function.prototype）。

我正在考虑为一个函数（方法）添加自定义属性，让我们跳过“为什么？”部分并直接进入代码：

var something = {
    myMethod: function () {
        if (something.myMethod.someProperty === undefined) {
            something.myMethod.someProperty = "test";
        }
        console.log(something.myMethod);
    }
}

当使用 Firebug 的 DOM 浏览器检查时，该属性已按预期定义。然而，由于我不认为自己是 JavaScript 专家，所以我有以下问题：

1. 这种方法可以被认为是“正确的”并且符合标准吗？它可以在 Firefox 中运行，但有很多东西在 Web 浏览器中可以按预期运行，但无论如何都不是标准。
2. 这种通过向对象添加新属性来改变对象是一种好的做法吗？

Answer 1

首先，重要的是要认识到标准函数属性（参数、名称、调用者和长度）不能被覆盖。因此，忘记添加具有该名称的属性吧。

可以通过不同的方式将您自己的自定义属性添加到函数中，这些方式应该适用于每个浏览器。

---

将您自己的自定义属性添加到函数

方法 1：在运行函数时添加属性：

var doSomething = function() {
    doSomething.name = 'Tom';
    doSomething.name2 = 'John';
    return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

---

方式 1（替代语法）：

function doSomething() {
    doSomething.name = 'Tom';
    doSomething.name2 = 'John';
    return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

---

方式 1（第二种替代语法）：

var doSomething = function f() {
    f.name = 'Tom';
    f.name2 = 'John';
    return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

此策略的一个问题是您需要至少运行一次函数来分配属性。对于许多功能来说，这显然不是您想要的。因此，让我们考虑其他选项。

---

方式 2： 在定义函数后添加属性：

function doSomething() {
    return 'Beep';
};
    
doSomething.name = 'Tom';
doSomething.name2 = 'John';

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

现在，您无需先运行函数即可访问属性。然而，一个缺点是你的属性感觉与你的功能脱节。

---

方式 3： 将函数包装在匿名函数中：

var doSomething = (function(args) {
    var f = function() {
        return 'Beep';
    };
    for (var i in args) {
        f[i] = args[i];
    }
    return f;
}({
    'name': 'Tom',
    'name2': 'John'
}));

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

将函数包装在匿名函数中，您可以将属性收集到对象中，并使用循环在匿名函数中一一添加这些属性。这样，你的属性就会感觉与你的功能更加相关。当需要从现有对象复制属性时，此技术也非常有用。然而，缺点是您在定义函数时只能同时添加多个属性。此外，如果您经常想要向函数添加属性，那么它并不完全会产生 DRY 代码。

---

方法 4： 在函数中添加一个“扩展”函数，将对象的属性一一添加到自身：

var doSomething = function() {
    return 'Beep';
};
    
doSomething.extend = function(args) {
    for (var i in args) {
        this[i] = args[i];
    }
    return this;
}

doSomething.extend({
    'name': 'Tom',
    'name2': 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

这样，您可以随时扩展多个属性和/或从另一个项目复制属性。但是，如果您经常这样做，那么您的代码就不是 DRY。

---

方法 5： 创建一个通用的“扩展”函数：

var extend = function(obj, args) {
    if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
        for (var i in args) {
            obj[i] = args[i];
        }
    }
    return obj;
}
    
var doSomething = extend(function() {
    return 'Beep';
}, {
    'name': 'Tom',
    'name2': 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

遗传扩展功能允许采用更 DRY 的方法，允许您将对象或任何项目添加到任何其他对象。

---

方式6：创建一个extendableFunction对象并使用它来将扩展函数附加到函数上：

var extendableFunction = (function() {
    var extend = function(args) {
        if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
            for (i in args) {
                this[i] = args[i];
            }
        }
        return this;
    };
    var ef = function(v, obj) {
        v.extend = extend;
        return v.extend(obj);
    };

    ef.create = function(v, args) {
        return new this(v, args);
    };
    return ef;
})();

var doSomething = extendableFunction.create(function() {
    return 'Beep';
}, {
    'name': 'Tom',
    'name2': 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

该技术允许您生成附加有“扩展”方法的函数，而不是使用通用的“扩展”函数。

---

方法 7： 将“扩展”函数添加到 Function 原型：

Function.prototype.extend = function(args) {
    if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
        for (i in args) {
            this[i] = args[i];
        }
    }
    return this;
};

var doSomething = function() {
    return 'Beep';
}.extend({
    name : 'Tom',
    name2 : 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

这种技术的一个很大的优点是，它使得向函数添加新属性变得非常容易、DRY 以及完全 OO。而且，它对记忆非常友好。然而，它的缺点是它不太适合未来。如果未来的浏览器向函数原型添加本机“扩展”函数，这可能会破坏您的代码。

---

方式 8： 递归运行一次函数，然后返回它：

var doSomething = (function f(arg1) {
    if(f.name2 === undefined) {
        f.name = 'Tom';
        f.name2 = 'John';
        f.extend = function(args) {
            if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
                for (i in args) {
                    this[i] = args[i];
                }
            }
            return this;
        };
        return f;
    } else {
        return 'Beep';
    }
})();

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

运行一个函数一次并让它测试其属性之一是否已设置。如果未设置，则设置属性并返回自身。如果设置，则执行该函数。如果您包含“扩展”函数作为属性之一，则可以稍后执行该函数来添加新属性。

---

将您自己的自定义属性添加到对象

尽管有所有这些选项，我仍然建议不要向函数添加属性。给对象添加属性要好得多！

就我个人而言，我更喜欢具有以下语法的单例类。

var keyValueStore = (function() {
    return {
        'data' : {},
        'get' : function(key) { return keyValueStore.data[key]; },
        'set' : function(key, value) { keyValueStore.data[key] = value; },
        'delete' : function(key) { delete keyValueStore.data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in keyValueStore.data) l++;
            return l;
        }
    }
})();


console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }
keyValueStore.set("name", "Tom");
keyValueStore.set("name2", "John");
console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }

这种语法的一个优点是它允许公共和私有变量。例如，这就是将“data”变量设置为 private 的方法：

var keyValueStore = (function() {
    var data = {};
    
    return {
        'get' : function(key) { return data[key]; },
        'set' : function(key, value) { data[key] = value; },
        'delete' : function(key) { delete data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in data) l++;
            return l;
        }
    }
})();

console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }
keyValueStore.set("name", "Tom");
keyValueStore.set("name2", "John");
console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }

但您说您想要多个数据存储实例？没问题！

var keyValueStore = (function() {
    var countKVS = 0;
    
    return (function kvs() {
        return {
            'data' : {},
            'create' : function() { return new kvs(); },
            'countInstances' : function() { return countKVS; },
            'get' : function(key) { return this.data[key]; },
            'set' : function(key, value) { this.data[key] = value; },
            'delete' : function(key) { delete this.data[key]; },
            'count' : function() {
                var l = 0;
                for (p in this.data) l++;
                return l;
            }
        }
    })();
})();

kvs = keyValueStore.create(), console.warn('-- KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs.set("Tom", "Baker"), console.warn('-- ADDING KEY VALUE PAIR "Tom, "Baker" --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs2 = keyValueStore.create(), console.warn('-- SECOND KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.set("Daisy", "Hostess"), kvs2.set("Daisy", "Hostess"), console.warn('-- ADDING KEY VALUE PAIR "Daisy", "Hostess"  TO BOTH STORES --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.delete('Daisy'), console.warn('-- DELETING KEY "Daisy" FROM FIRST STORE --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);

最后，您可以分离实例和单例属性，并为实例的公共方法使用原型。这会产生以下语法：

var keyValueStore = (function() {
    var countKVS = 0; // Singleton private properties
        
    var kvs = function() {
        countKVS++; // Increment private properties
        this.data = {};  // Instance public properties
    };
    
    kvs.prototype = { // Instance public properties
        'get' : function(key) { return this.data[key]; },
        'set' : function(key, value) { this.data[key] = value; },
        'delete' : function(key) { delete this.data[key]; },
        'count' : function() {
            var l = 0;
            for (p in this.data) l++;
            return l;
         }
    };
        
    return  { // Singleton public properties
        'create' : function() { return new kvs(); },
        'countInstances' : function() { return countKVS; }
    };
})();

kvs = keyValueStore.create(), console.warn('-- KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs.set("Tom", "Baker"), console.warn('-- ADDING KEY VALUE PAIR "Tom, "Baker" --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs2 = keyValueStore.create(), console.warn('-- SECOND KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.set("Daisy", "Hostess"), kvs2.set("Daisy", "Hostess"), console.warn('-- ADDING KEY VALUE PAIR "Daisy", "Hostess"  TO BOTH STORES --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.delete('Daisy'), console.warn('-- DELETING KEY "Daisy" FROM FIRST STORE --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);

使用这种语法，您可以拥有：

• 对象的多个实例
• 私有变量
• 类变量

Answer 2

对你的问题给出一个非常有意义的答案有点困难，因为你已经说过“这是我的解决方案，可以吗？”没有解释您要解决的问题（您甚至明确表示您不会解释“为什么”）。您的代码看起来是可以运行的有效 JavaScript，但它看起来也不是最佳的执行方式。

如果你解释你真正想要实现的目标，你可能会得到一些关于更好的方法来构建代码的好建议。不过，我还是会给你一些答案：

这种方法可以被认为是“正确的”并且符合标准吗？它可以在 Firefox 中运行，但有很多东西在网络浏览器中可以按预期运行，但绝不是标准。

函数是对象（正如您所说），因此可以向它们添加属性。这实际上并不是一个标准问题，因为它是所有浏览器都支持的 JavaScript 的核心部分。

这种通过向对象添加新属性来更改对象是一种好的做法吗？

这是你的对象，你可以添加任何你喜欢的属性。对象的全部要点在于它们具有可以操作的属性。我真的无法想象一种使用对象而不涉及更改对象的方法，包括添加、删除和更新属性和方法。

话虽如此，对我来说，向 myMethod 函数添加属性并没有什么意义，更常见的是向 something 对象添加其他属性（您的如果调用正确，myMethod 函数将可以通过 this 关键字访问 something 的其他属性。

如果您将函数用作构造函数，则通常可以将方法添加到关联的原型并向每个实例添加（非方法）属性，但您可以这样做适当时采用其中一种或两种方式。 （请注意，“方法”本质上只是一个碰巧引用函数的属性。）

您显示的特定代码不会添加属性，它会测试 someProperty 属性是否已经 /em> 存在，如果存在则为其分配一个新值。

您可能会受益于阅读 MDN 上的一些文章：

• 使用对象
• < a href="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript" rel="noreferrer">面向对象 JavaScript 简介

Answer 3

“necromancing”在这里，但我认为每个伟大的问题都需要简单的答案：

是和是*

通过将属性附加到函数，您可以清理范围，改进可读性并增加逻辑凝聚力。另一个好处是您可以记录函数和变量之间的关系。我认为这是一个优秀的设计，比在作用域上添加变量要好得多

在这里和这里创建了一些有趣的示例。
此处
这里

---

* 我认为值得注意的是，您可能不会经常看到这种情况。大多数开发人员可能没有意识到这是可能的。有些人对每一点性能下降都着迷... “JavaScript 引擎基于以下内容进行优化物体的‘形状’……” 等等等等......
但我认为你可以遵循对象的规则，你会做得很好。

Answer 4

将属性附加到函数是一种重载 () 运算符的漂亮（可以说是缓慢/hack-ish）方式，而该方式通常用于实现 函子：具有一项非常重要的工作的对象类型，而其所有其他功能（如果有的话）只是一堆的帮手。您还可以将这些函子基本上解释为“有状态”函数，其中状态是公共的（例如，大多数内联函数具有私有状态，即来自本地范围的状态）。

这个 JSFiddle 演示了如何将具有自定义属性的函数用于 translator 函数附加实用程序：

/**
 * Creates a new translator function with some utility methods attached to it.
 */
var createTranslator = function(dict) {
    var translator = function(word) {
        return dict[word];
    };

    translator.isWordDefined = function(word) {
        return dict.hasOwnProperty(word);
    };

    // Add more utilities to translator here...

    return translator;
};


// create dictionary
var en2deDictionary = {
    'banana': 'Banane',
    'apple': 'Apfel'
};

// simple use case:
var translator = createTranslator(en2deDictionary);
var pre = $('<pre>');
$("body").append(pre);

pre.append(translator('banana') + '\n');
pre.append(translator('apple') + '\n');
pre.append(translator.isWordDefined('w00t') + '\n');

如您所见，这对于以翻译为唯一目的的翻译人员来说是完美的。当然，这些类型的对象的例子还有很多，但到目前为止，它们并不像功能多样化的类型那么常见，例如经典的 User、Animal 汽车等类型。对于这些类型，您只想在极少数情况下添加自定义属性。通常，您希望将它们定义为更完整的类，并通过 this 及其 prototype 访问它们的公共属性。

Answer 5

我意识到我已经晚了好几年了，但我想我应该添加这个例子——requirejs在define()函数上设置了一个名为“amd”的属性，这非常方便，因为UMD模式使用它来检测define () 作用域内的函数实际上是 AMD Define() 函数。

RequireJS 来源： http://requirejs.org/docs/release/2.1 .9/comments/require.js

显示此用法的 UMD 模式： https://github.com/umdjs/umd/blob/master/templates/amdWeb.js

Answer 6

如果您只想向函数添加自定义属性，则只需将这些属性添加到 Function.prototype 即可。例如：

Function.prototype.SomeNewProperty = function () {//Do something awesome here...}

Answer 7

向函数对象添加属性或方法是完全可以接受的。这种事经常发生。 jQuery/$ 对象就是一个例子。这是一个附加了很多方法的函数。

当属性添加到构造函数时，它们被称为“静态”属性，并且可以在没有类实例的情况下调用。例如对象.create。

我没有足够的代表来写评论，所以我会在这里说：扩展内置对象的原型通常被认为是不好的做法，特别是当您的代码必须与其他人的代码一起使用时。它可能会产生难以预测且难以追踪的后果。

Answer 8

我同意这是一个可能有多个答案的难题，所以我更喜欢做一个不同的例子：

让我们假设有一个由生成器填充的 JavaScript Array：

var arr = [...new Array(10).keys()];

那就是

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

现在我们想要映射这到一个新数组 - 相同的长度，应用一些函数，因此我们可以使用本机 map 函数属性：

arr = arr.map((value,index) => ++value)

我们刚刚完成了 value=value+1 并返回，所以现在数组看起来像

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

好的，现在应该有一个 JavaScript像这样的 Object 的

var obj=new Object()

定义与前面的数组类似（出于某些疯狂的原因）：

arr.forEach((value,index) => obj[value]=value)

即

{0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9}

此时我们无法应用相同的 map 方法，因为它不是为 定义的Object 因此我们必须将其定义为 Object 的新 prototype：

Object.defineProperty(Object.prototype, 'mapObject', {
      value: function(f, ctx) {
          ctx = ctx || this;
          var self = this, result = {};
          Object.keys(self).forEach(function(k) {
              result[k] = f.call(ctx, self[k], k, self);
          });
          return result;
      }
    });

此时我们可以像之前的数组一样进行操作：

obj=obj.mapObject((value,key) => ++value )

这样我们就有：

{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 5: 6, 6: 7, 7: 8, 8: 9, 9: 10}

您可以看到我们只更新了值：

[...Object.keys(obj)]
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

然后我们可以转回输出数组：

[...Object.keys(obj).map(k=>obj[k])]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

它正在工作：

// Array.map
var arr = [...new Array(10).keys()];
console.log("array", arr)
arr = arr.map((value, index) => ++value)
console.log("mapped array", arr)
// new property
Object.defineProperty(Object.prototype, 'mapObject', {
  value: function(f, ctx) {
    ctx = ctx || this;
    var self = this,
      result = {};
    Object.keys(self).forEach(function(k) {
      result[k] = f.call(ctx, self[k], k, self);
    });
    return result;
  }
});

// Object.mapObject
var obj = new Object()
arr = [...new Array(10).keys()];
arr.forEach((value, index) => obj[value] = value)
console.log("object", obj)
obj = obj.mapObject((value, key) => ++value)
console.log("mapped object", obj)
console.log("object keys", [...Object.keys(obj)])
console.log("object values", [...Object.keys(obj).map(k => obj[k])])

Answer 9

约翰·斯莱格斯的可能补充很好的答案

在约翰·斯莱格斯之后是否有可能：

方式2：定义函数后添加属性

添加方式2.5

function doSomething() {
    doSomething.prop = "Bundy";
    doSomething.doSomethingElse = function() {
        alert("Why Hello There! ;)");

    };

    let num = 3;
    while(num > 0) {
        alert(num);
        num--;  
    }
}

sayHi();
sayHi.doSomethingElse();
alert(doSomething.prop);

var ref = doSomething;

ref();
ref.doSomethingElse();
alert(ref.prop);

为了完整起见，直接在函数声明中放入“变量”属性和函数属性。从而避免它被“断开”。保留函数的内部默认工作方式（一个简单的循环）以表明它仍然有效。不？

Answer 10

test = (function() {
  var a = function() {
    console.log("test is ok");
  };
  a.prop = "property is ok";
  a.method = function(x, y) {
    return x + y;
  }
  return a
})()

test();
console.log(test.prop);
console.log(test.method(3, 4));

或者你必须使用 getter 和 setter

var person = {
  firstName: 'Jimmy',
  lastName: 'Smith',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(name) {
    var words = name.toString().split(' ');
    this.firstName = words[0] || '';
    this.lastName = words[1] || '';
  }
}
console.log(person.firstName);
console.log(person.lastName);
console.log(person.fullName);
person.fullName = "Tom Jones";
console.log(person.fullName);