Javascript命名空间污染问题

Question

我刚接触 Javascript，所以我第一次尝试命名空间最终看起来像这样：

var myNameSpace = {};
var myNameSpaceProto = myNameSpace.__proto__;

myNameSpaceProto.SomeFunc = function()
{
    alert("SomeFunc()");
};

myNameSpaceProto.SomeObject = function()
{
    alert("SomeObject constructor");
};

var instance = new myNameSpace.SomeObject();

我认为我可以安全地跳过原型步骤，只需使用 myNameSpace.SomeFunc = function...，因为只有一个 myNameSpace 对象实例，因此原型不会保存任何内容。

问题 1：这是正确的吗？我想从几个单独的 .js 文件中添加到命名空间，所以这种方式看起来很方便。

问题 2： 使用上面的代码 sn-p 我发现了一个奇怪的命名空间污染副作用，如下 SomeObject 正文所示：

myNameSpaceProto.SomeObject = function()
{
    // As expected NonexistantFunc is not a member of this and returns "undefined"
    alert("typeof this.NonexistantFunc = " + typeof this.NonexistantFunc);

    // Returns 'function'. How has SomeFunc made it to this.SomeFunc?  It's supposed to be under myNameSpace.SomeFunc
    alert("typeof this.SomeFunc = " + typeof this.SomeFunc);

    // Turns out it's in the prototype's prototype.  Why?
    alert("this.__proto__.__proto__.SomeFunc = " + this.__proto__.__proto__.SomeFunc);
};

这是在 Chrome 8 上测试的，我不知道 SomeObject 是如何让 SomeFunc 成为成员的。这似乎是我有限的原型知识中的一个漏洞。谁能解释一下？

Answer 1

让我们从基础开始。

不要碰__proto__。这是一个潘多拉的盒子。你不想惹麻烦。它不仅不支持跨浏览器，而且你可以编写一些可怕的代码，并且不需要使用它。

var Constructor = new Function;
Constructor.fn = Constructor.prototype;

Constructor.fn.someFunc = function() { 
    alert("someFunc");
}

var obj = new Constructor;

var namespace = {};
namespace.someStaticFunc = function() {
   alert("someStaticFunc");
}    

您需要区分命名空间和构造函数。为什么需要将命名空间的方法写入原型而不是作为对象的属性，有什么真正的原因吗？

所以对于回答一个是的，你可以跳过原型。

至于问题二，因为您最初对原型的写入实际上是在直接编辑对象上的方法。

将.prototype 视为Class 定义。如果您正在编辑obj.__proto__，您在运行时编辑Class 的Object。您破坏了从该Class 派生的所有其他对象。动态类很好。但是从对象内部编辑类是一种非常好的创建隐蔽错误的方法。

问题2：很奇怪。

这是发生了什么：

var o = {}; // Ok o is an object
var o.__proto__.property = 5; // Ok I changed o's class and it now has a property = 5.

var o.__proto__.construct = function() { }; // Ok I changed the class again it now has a constructor

var p = new o.construct(); // we create an object from my constructor.

(p.__proto__ === o.construct.prototype) // true! the proto object is o.c.prototype. Because 
// p is created from o.c so the prototype is that of o.c

(o.construct.__proto__ === Object.prototype) // true! Oh-uh. Now look what we've been doing! 
// When you created `var o = {}` and edited o.__proto__ you've been editing Object.prototype

你看到警钟了吗？您一直在动态编辑 Object 类。你周围的所有代码都崩溃了。

函数是对象吧？

Function.property === 5 // oh dear!

我们找到了全部原因。我们一直在将这些方法写入 Object.prototype。所以 EVERY 对象上定义了该方法。包括.__proto__，因为那也是一个对象。

我是否发现与.__proto__ 打交道是个坏主意？我想我应该再说一遍。

如果您想知道this 是instance，this.__proto__ 是Object.prototype.SomeObject.prototype 和this.__proto__.__proto__ 是Object.prototype

这是garden 的链接，去阅读吧。

Answer 2

答案 2： SomeObject 可以通过这种方式访问​​ SomeFunc，因为 this 指的是 myNameSpaceProto，而 不是 SomeObject。 p>

Quirksmode has a decent explanation of why.

Here's a much better article explaining it.

所以，您可能已经猜到了，答案 1： 是的。