3

我这样做了（使用版本 mootools-core-1.4.5.js）

Object.prototype.walkRecursive = function(callable, bindable) {
var p, val, retVal, _bind;

_bind = (typeof bindable === 'object') ? bindable : this;
for (p in this) {
    if (this.hasOwnProperty(p)) {
        if (!(this[p] instanceof Object)) {
            if (typeof callable === 'function')
            {
                retVal = callable.call(_bind, p, this[p]);
                if (typeof retVal !== 'undefined')
                {
                    this[p] = retVal;
                }
            }
            else {
                throw "Podaj funkcje jako drugi argument";
            }
        } else if (this[p] instanceof Object) {
            this[p].walkRecursive(callable, bindable);
        }
    }
}
return this;
};

然后

    var navigationEl = new Element('div', {
        'class' : 'wcag-navigation'
    }).inject(this._element);

当我检查 this._wcagButton.pausePlay HTML 元素在 Chrome 开发者工具中的样子时，我得到了：

奇怪的html属性

当我使用 Mootools 的工具时也会发生同样的事情：

 Object.implement({walkRecursive :function(callable, bindable) {....}.protect()});

怎么来的？请帮忙，如何处理这个问题

使用示例

var data = [
{
    id: 0, 
    name: 'Template 0', 
    subComponents: [
        {id: 1, name: 'Template 1', subItems:[
            {id: 2, name: 'Template 2', subComponents:[
                {id: 3, name: 'Template 3'}
            ], 
             subItems: [
                 {id: 4, name: 'Template 4',},
                 {id: '42'}
             ]
            }
        ]}
    ]}
];

var bindMe = {
  nothing:'special'
}

data.walkRecursive(function(key,value){
if(key === 'name')
{
    return value+' '+this.nothing;
}
},bindMe)
4

1 回答 1

3

呃。尽管您can扩展Object了 ，但仍然强烈认为这样做是一种不好的做法，因为在 JavaScript 中，所有内容都继承自该类型。要了解您为什么不应该这样做 - http://erik.eae.net/archives/2005/06/06/22.13.54/或谷歌extending object prototype is verboten- 关于这个主题的大量答案。如您所见，您添加的内容是可枚举的。

如果您只关心现代 JavaScript，您可以使用defineProperty将其设置为enumerable: false.

为了能够在 MooTools 中更轻松地使用对象，曾经有一个东西叫做Hash- http://mootools.net/docs/core125/core/Native/Hash - 现在可以在兼容的 MooTools 构建中使用 - 否则，它已被 1.4.x 弃用 - 请参阅http://mootools.net/docs/core/Types/Object#Deprecated-Functions:Hash

您可以只使用 Object 来托管方法并在对象上调用它们，这就是http://mootools.net/docs/core/Types/Object所做的。

这是您转换的代码：http: //jsfiddle.net/ZQ4Yh/3/

Object.extend({
    walkRecursive: function (object, callable, bindable) {
        var p, val, retVal, _bind;

        // this next bit is unsafe, 'object' also returned for Date or Array constructor
        _bind = (typeof bindable === 'object') ? bindable : object;
        for (p in object) {
            if (object.hasOwnProperty(p)) {
                if (!(object[p] instanceof Object)) {
                    if (typeof callable === 'function') {
                        retVal = callable.call(_bind, p, object[p]);
                        if (typeof retVal !== 'undefined') {
                            object[p] = retVal;
                        }
                    } else {
                        throw "Podaj funkcje jako drugi argument";
                    }
                    //also unsafe instanceof. 
                } else if (object[p] instanceof Object) {
                    // shouldn't you use _bind, not bindable?
                    Object.walkRecursive(object[p], callable, bindable);
                }
            }
        }
        return this;
    }
});


var data = [{
    id: 0,
    name: 'Template 0',
    subComponents: [{
        id: 1,
        name: 'Template 1',
        subItems: [{
            id: 2,
            name: 'Template 2',
            subComponents: [{
                id: 3,
                name: 'Template 3'
            }],
            subItems: [{
                id: 4,
                name: 'Template 4',
            }, {
                id: '42'
            }]
        }]
    }]
}];

var bindMe = {
    nothing: 'special'
};

Object.walkRecursive(data, function(key, value){
    if (key === 'name'){
        return value + ' ' + this.nothing;
    }
}, bindMe);

console.log(data);

// unsafe because.
console.log(new Date() instanceof Object, [] instanceof Object, function(){} instanceof Object);

// eg safer isObject
var isObject = function(what){
    return {}.toString.call(what).slice(8, -1) === 'Object';
};

console.log(isObject(new Date()), isObject([]), isObject(function(){}), isObject({}));

这包括一些不安全检查的示例以及如何以不同的方式进行检查以确保正确的逻辑。

在任何情况下——如果你想知道——DOM 元素也会返回一个元素对象，因此你可以看到你添加了什么。

有些人说如果你通过迭代可以使用它，hasOwnProperty但事实并非如此。例如一个字典对象：

var obj = Object.create(null);
obj.name = 'template 0';

for (var k in obj){
    console.log(obj.hasOwnProperty[k]); // throws, no method hasOwnProperty
    // if you omit hasOwnProperty here, you break jslint and jshint, confusing... 
}

当然，您可以使用以下方法修复它：

var obj = Object.create(null);
obj.name = 'template 0';

var hasOwnProperty = {}.hasOwnProperty;

for (var k in obj){
    console.log(k, hasOwnProperty.call(obj, k));
}

等等等等——但它让你的代码库过于防御只是因为你真正不需要的风格选择和简单的便利。

于 2013-05-11T21:48:03.473 回答