JavaScript：原型函数在控制台中显示

Question

我刚刚注意到，当我记录当前正在工作的对象的实例时，我看到它的属性（只有一个）后面是原型函数。这让我觉得我做错了什么。

这是我如何设置原型的方式。

MF = function(x){
    if(!(this instanceof MF)) return new MF(x);
    this.node = x;
}
MF.prototype = {
    show: function(display){
        display ? this.node.style.display = display : this.node.style.display = 'block';
    },
    hide: function(){
        this.node.style.display = 'none';
    }
}

console.log(MF(window));

我还尝试使用Object.create()进行设置，如此答案中建议的那样，但在我的情况下并没有太多意义，但绝望的时候需要不择手段。

为什么我会在实例中看到原型方法，如何解决这个问题？

编辑：

例如，这是一个jQuery对象的外观，日志中没有显示原型函数。

- php_nub_qq

---

它对我有效。MF 节点：窗口 __proto__：对象 hide：function（）{ 显示：function（显示）{ __proto__：对象 - Hoijof

我并没有说它不工作 :/ - php_nub_qq

它显示原型下的函数。 - Hoijof

但是为什么它们会在属性之后显示，我注意到其他本地JavaScript对象不会以这种方式行动，以及jQuery对象，参考问题编辑。 - php_nub_qq

jQuery类似于数组，即*.Prototype = []，但这并不是您想要的。调试器如何表示对象真的很重要吗？您可以使用Object.getOwnPropertyNames确定属于对象本身的属性-这不足够吗？ - Emissary

你正在使用哪个浏览器？控制台输出可能因浏览器而异。 - Jeff Parker

Answer 1

你的代码似乎没有任何问题。我相信原型属性只是在实例属性很少的情况下作为方便而列出的。展开日志对象会显示所有属性都在它们应该在的地方。

- John Sterling

---

那真是一种解脱！但我仍然想知道如何摆脱这种便利？我知道它并没有任何实际的区别，但它仍然让我感到烦恼，我想你也能理解这种感觉:D - php_nub_qq

我知道你的意思。不幸的是，除了添加更多的属性之外，我没有为你提供答案。 :( - John Sterling

Answer 2

展示原型对象是一种常见的做法。使用jQuery也是如此。只需调用console.dir（$（'div'）），您将看到下面的__proto__对象。您无法隐藏控制台中显示的原型函数。

这就是我在我的库中实现原型扩展类的方法：

Pinch.$ = function(selector, parent) {
    if (!(this instanceof arguments.callee)) {
        var callee = arguments.callee,
            newObject = Object.create(callee.prototype);
        callee.apply(newObject, callee.arguments);
        return newObject;
    }

    // --- logic ---

    return this;
}
Pinch.prototype = Object.create({
    is: function() {},
    // --- methods ---
    empty: function() {}
});

然后，如果您想使用新方法扩展原型：

Pinch.$.prototype = Pinch.Util.extend(Pinch.$.prototype, {
    newMethods: function() {}
}, {
    oneMoreMethod: function() {}
});

“extend（）”的实现可以在许多库中找到，只需搜索“extend javascript”。

第二种方法是使用“Object.create”作为扩展：

Pinch.$.prototype = Object.create(Pinch.$.prototype, {
    newMethods: function() {}
});

但实际上，您无法在控制台中隐藏原型对象。除非您开始使用基于本地范围和更多技巧的黑客攻击。

更新： 您可以使用Object.defineProperties()来隐藏元素 - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

例如：

var MF = function () {};

MF.prototype = Object.create({});

Object.defineProperties(MF.prototype, {
    thisWillShow: {
        value: function () {},
        enumerable: true
    },
    thisWillNotShow: {
        value: function () {},
        enumerable: false
    }
});
console.log(new MF());

这里有一个工作示例 - http://jsfiddle.net/uRVFW/

- Eugene Obrezkov

---

感谢详细的解释。我没有隐藏原型方法的意图，我只是认为如果它们不在实例的日志中显示出来会很好。这不是什么重要的事情，但是... :D - php_nub_qq

我不确定，但我认为你可以使用Object.defineProperties()来隐藏它们 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties只需使用Object.defineProperties(MF, {})并将需要隐藏的方法设置为enumerable: false即可。 - Eugene Obrezkov

一个小的工作示例 - http://jsfiddle.net/uRVFW/它仍然在控制台中显示，但现在您可以在循环和其他操作中枚举此属性。 - Eugene Obrezkov

那真是太棒了！现在问题来了，我是否应该为了好看而过度复杂化代码，还是保持原样xD。谢谢！ - php_nub_qq