我正在开发一个非常丑陋的库，让你做一些奇怪的事情。 有了图表，您可以以类似链的样式映射一组集合，并在您更改时 要在整个系统中改变的价值。
当结束类型是JS原语时出现问题。
在使用值和对象制作图表后，我可以做类似的事情：
CHAIN.components[0].value = 20;
components是使用setter和getter在图形节点上的过滤函数。
如果在组件中只有一个节点被过滤，则用户设置的默认值将不可用，而不执行此操作：
CHAIN.components.value = 20;
而是这个：
CHAIN.components = 20;
现在的问题是，除了默认设置之外，节点还可以有其他方法或属性（在我的情况下，它设置在value上。
我如何在Number对象上使用setter和getter而不攻击Number.prototype，因为CHAIN.components现在是一个数字（如果它不是一个原语我已经让它以一种不引人注目的方式工作），但是当我想调用CHAIN.components.func()时会出现问题，因为每次我创建一个集合或者func然后我就必须将components附加到Number.prototype删除它。
你对完成这种行为有其他想法吗？
你想要代码，所以这里是：
/*jslint nomen: true, sloppy: true*/
GRID.modules.OHM || Object.extend(GRID.modules, ( function() {
var Node, Nodes, Ohm, num_proto = Number.prototype.__clone(), str_proto = String.prototype.__clone();
Node = function(uid) {
var UID = uid;
this.getUID = function() {
return UID;
};
};
Nodes = function() {
var stack = [];
this.add = function(id, val) {
var n = new Node(stack.length);
val.id = id;
Object.extend(n, val);
stack.push(n);
return n.getUID();
};
this.getById = function(id) {
return stack.filter(function(v) {
var a = id || v.id;
return (v.id === a);
});
};
this.getByUID = function(UID) {
return stack[UID];
};
this.get = function(callback) {
!Object.isString(callback) || ( callback = [callback]);
var f = Object.isFunction(callback) ? callback : (Object.isArray(callback) ? function(k) {
return (callback.indexOf(k.id) >= 0);
} : function(k) {
return true;
});
return stack.filter(f);
};
};
Ohm = function(n) {
var graph = n || (new Nodes()), filters = {}, __nodes = {}, addGS = function(obj, name, conf, binder) {
var alfa = {};
Object.extend(alfa, conf);
if (!alfa.get) {
alfa.get = function() {
var a = this.g.getById(this.p);
return a.length === 1 ? a[0] : a;
}.bind(binder);
} else {
alfa.get = alfa.get.bind(binder);
}
if (!alfa.set) {
alfa.set = function(value) {
this.g.getById(this.p).forEach(function(k) {
Object.extend(k, value);
return true;
});
}.bind(binder);
} else {
alfa.set = alfa.set.bind(binder);
}
Object.defineProperty(obj, name, alfa);
}, add = function(id, node) {
if (__nodes.hasOwnProperty(id)) {
addGS(__nodes, id, {
enumerable : true
}, {
t : this,
p : id,
g : graph
});
}
return graph.add(id, node || {});
};
Object.extend(this, {
add : function() {
add.apply(this, arguments);
},
map : function(name, f, that) {
var n = name, filterer = ['add', 'map', '__all'];
n = Object.isFunction(n) ? name.apply(that, arguments.slice(3)) : n;
if (filterer.indexOf(n.toLowerCase()) >= 0) {
console.log("You can't map over a basic property of object !!! Please read the freakin' manual.");
return null;
}
if (!filters.hasOwnProperty(n)) {
filters[n] = new Ohm(graph);
addGS(this, n, {
get : function() {
this.g.get(this.f).forEach(function(v, key, arr) {
var temp, binder;
if (arr.length !== 1) {
if (!this.filt.hasOwnProperty(v.id)) {
addGS(this.filt, v.id, {
set : function(value) {
this.t.g.getById(this.p).filter(this.t.f).forEach(function(k) {
Object.extend(k, value);
});
},
get : function() {
var a = this.t.g.getById(this.p).filter(this.t.f);
return a.length === 1 ? a[0] : a;
}
}, {
t : this,
p : v.id
});
(key !== arr.length - 1) || Object.extend(this.filt, this.g.get(this.f));
}
} else {
if (Object.isFunction(v.__new__)) {
v.__default = function() {
return Object.extend((new this.__new__(arguments)), this);
};
}
if (!Object.isUndefined(v.__default)) {
temp = this.filt;
this.filt = Object.isFunction(v.__default) ? v.__default.bind(v) : v.__default;
if (Object.isNumber(this.filt) || Object.isString(this.filt)) {
var prot = Object.isNumber(this.filt) ? Number : String;
for (var i in temp) {
if (temp.hasOwnProperty(i) && !prot.prototype.hasOwnProperty(i)) {
var bin = {
t : temp,
m : i,
p : prot,
};
Object.defineProperty(prot.prototype, i, {
set : function(value) {
Object.defineProperty(this.p.prototype, this.m, {
configurable : true, // defaults to false
writable : false,
value : 1
});
delete this.p.prototype[this.m];
this.t[this.m] = value;
}.bind(bin),
get : function() {
Object.defineProperty(this.p.prototype, this.m, {
configurable : true, // defaults to false
writable : false,
value : 1
});
delete this.p.prototype[this.m];
return this.t[this.m];
}.bind(bin),
enumerable : true,
configurable : true
});
}
}
} else {
Object.extend(this.filt, temp);
}
}
if (Object.isNumber(this.filt) || Object.isString(this.filt)) {
var prot = Object.isNumber(this.filt) ? Number : String;
for (var i in v) {
if (v.hasOwnProperty(i) && !prot.prototype.hasOwnProperty(i)) {
var bin = {
t : v,
m : i,
p : prot,
};
Object.defineProperty(prot.prototype, i, {
set : function(value) {
Object.defineProperty(this.p.prototype, this.m, {
configurable : true, // defaults to false
writable : false,
value : 1
});
delete this.p.prototype[this.m];
this.t[this.m] = value;
}.bind(bin),
get : function() {
Object.defineProperty(this.p.prototype, this.m, {
configurable : true, // defaults to false
writable : false,
value : 1
});
delete this.p.prototype[this.m];
return this.t[this.m];
}.bind(bin),
enumerable : true,
configurable : true
});
}
}
} else {
Object.extend(this.filt, v);
}
}
}, this);
return this.filt;
},
set : function(value) {
this.g.get(this.f).forEach(function(k) {
Object.extend(k, value);
});
}
}, {
t : this,
f : f,
g : graph,
filt : filters[n]
});
}
}
}, true, true);
addGS(this, '__all', {
get : function() {
var a = this.g.getById();
Object.extend(__nodes, a.length === 1 ? a[0] : a);
return __nodes;
},
enumerable : true
}, {
t : this,
p : null,
g : graph
});
};
window['Ω'] = Ohm;
return {
OHM : Ohm,
};
}()));
现在演示：
var c = new Ω();
c.add('ann', {
__default : 58,
blah : 98,
ceva : function()
{
console.log('asd');
}
});
c.add('ann2',{
__default: function(){
console.log('hello');
},
abc: 78,
dce: function(){
console.log(' world');
}
};
c.add('b2', {
__new__ : function() {
this.init = function() {
this.id = 86;
};
this.mer = function() {
console.log(this);
};
},
els : 'asadar'
});
c.map('b2', function(k) {
return k.id === 'b2';
});
c.map('ann', function(k) {
return k.id === 'ann';
});
c.map('ann2', function(k) {
return k.id === 'ann2';
});
console.log(c.ann); // returns 58 ( the __default value )
console.log(c.ann.blah); // returns 98
console.log(c.ann.blah.blah); // undefined
console.log(c.ann2); // function()
c.ann2(); // prints out 'hello'
c.ann2.cde(); // prints out 'world'
c.ann2 = 60;
console.log(c.ann2); // 60
console.log(c.ann2.cde()); // prints out 'world'
此代码有效，但我必须使用数字或字符串原型的部分困扰我。你有另一种方法吗？
原因是要做一些事情，有人说它可以用PHP而不是JS完成，这家伙最近一直在与我合作开发WebGL着色器，并且讨厌他必须编写700行代码才能使用多种效果结合使用FBO而不是100，这将使用类似的工具，就像用PHP编写的那样。所以，是的，我知道原始原型上的访问器是一个黑客，但如果链终端对象是原始的话，如何在不使用valueOf的情况下使其变得不同？
答案 0 :(得分：4)
好的，现在我已经阅读了附加的代码（但不能完全遵循它）。缺乏一些评论，但我不会喋喋不休，我自己的代码并不是更好，因为我不希望任何人阅读或理解它们： - ）
你是对的，扩展原生原型的部分是可怕的。根据我的理解，在返回数字/字符串之前，在Number或String原型上定义一个访问器属性。在获取和设置时，访问者属性被数据属性（???）覆盖，然后在存储/返回值之前删除整个属性。这似乎是一个聪明的黑客，允许原始值的自定义属性，但是：
this值用作查找表中的键（以区分(5).x与(3).x）来降低这一点，但仍然无法完全避免。< / LI>
如果你确实需要这个（我仍然没有得到你的理由），我会使用带有查找表的变体。它应该减少冲突（不确定你的代码如何处理它们），不会改变它们定义的访问者属性，因此更持久（尽管它可能会泄漏）：
// Let's call this
// PRIMITIVE PROXIES
// as they proxy real objects behind primitive values
var proxy = _.map( { // some map that works on Objects
string: String.prototype,
number: Number.prototype
}, function closure(type, proto) {
var table = {};
function setupProperty(prop) {
if (prop in proto) return; // ah, we already proxied this kind of object
Object.defineProperty(proto, prop, {
configurable:true, // for deleting
get: function getter() {
// "this" is the primitive value
if (!this in table)
return undefined;
return table[this][prop]; // get prop from obj
},
set: function setter(val) {
if (this in table)
table[this][prop] = val; // pass val to obj
}
});
}
return {
create: function createProxy(prim, obj) {
if (prim in table) // we already did create a proxy on this primitive
return; // let's abort. You might continue to overwrite
table[prim] = obj;
Object.getOwnPropertyNames(obj).forEach(setupProperty);
return prim; // the new "proxy"
},
move: function moveName(from, to) {
if (to in table) return false;
table[to] = table[from];
delete table[from];
return true;
}
};
});
proxy.create = function(prim, obj) {
return proxy[typeof prim].create(prim, obj);
};
proxy.move = function(from, to) {
return proxy[typeof from].create(from, to);
};
// USAGE:
// proxy.create works just like Object.extend
> var c = {ann: 58},
> o = {blah: 98};
> proxy.create(c.ann, o);
> 58..blah
98
> c.ann.blah
98
> (58).blah = 60;
> o
{blah: 60}
> var num = c.ann; // 58
> c.ann.blah = function(){return "Hello"};
> num.blah()
"Hello"
> proxy.move(c.ann, c.ann = 78);
> c.ann
78
> (58).blah
undefined
> c.ann.blah()
"Hello"
> // getters/setters for properties are global:
> c.ann.blub = "something"; // does not work, there is no getter
> c.ann.blub
undefined
> proxy.create(58, {blub: "foo"})
> c.ann.blub // still returns
undefined
> c.ann.blub = "bar"; // but can be set now
> (58).blub + (78).blub
"foobar"
> // infinite lookup loops are possible:
> proxy.create("loop", {x:"loop"});
> "loop" === "loop".x
true
> "loop".x.x.x.….x
"loop"
然而，有一件事你永远无法解决：
与对象不同，原始值不是唯一的;他们没有身份。
您永远无法区分c.ann与58或"loop"与"loop".x，因此两者都将拥有属性。这不是构建API的好前提。
所以，我仍然建议使用Number和String个对象。你不需要对它们进行子类化（如我之前的答案所示），因为你似乎没有（m）它们的任何方法，所以你可以轻松地构建它们：
c.ann = new Number(58);
c.ann.blah = 98;
return c;
typeof运算符应该没什么区别。您是否可以添加一些使用__default值的示例？
但如果链端对象是原始的话，如何在不使用valueOf的情况下使其变得不同？
回答这个简单的问题：那个人是对的，如果不破解原生原型，就无法在JavaScript中完成。你是对的，黑客很难看： - ）
答案 1 :(得分：1)
不要使它成为原始数字，使其成为一个行为像数字的对象。您可以使用Number对象并使用自定义属性对其进行扩展（请参阅https://stackoverflow.com/a/9338486/1048572），但为什么不将Number作为子类进行扩展？它只需要保留一个返回数字的valueOf method：
function MyNumber(n) {
this.value = Number(n);
}
MyNumber.prototype = Object.create(Number.prototype, {constructor:{value:MyNumber}});
MyNumber.prototype.valueOf = function() {
return this.value;
};
// OK, we have to overwrite those methods as they don't work on subclasses of Number
["toExponential", "toFixed", "toLocaleString", "toPrecision", "toString"].forEach(function(name) {
MyNumber.prototype[name] = function() {
return Number.prototype[name].apply(new Number(this.value), arguments);
};
});
// now extend the prototype with other properties, e.g. chaining methods
当然，您可能需要将components设置为将给定数字（或数字）转换为MyNumber的设置器：
var actualNumber = new MyNumber;
Object.defineProperty(MyFabulousChainingThing, "components", {
get: function() { return actualNumber; },
set: function(x) { actualNumber.value = Number(x); }
});