Javascript原型與一般功能 - 性能/可讀性

Question

所以我寫了這些測試，看看使用原型會有多快...

function User() {
    return {
        name: "Dave",
        setName: function(n) {
            this.name = n;
        },
        getName: function() {
            return this.name;
        }
    };
}

function UserPrototype() {
    if (!(this instanceof UserPrototype)) return new UserPrototype();
    this.name = "Dave";
}
UserPrototype.prototype.getName = function() {
    return this.name;
};
UserPrototype.prototype.setName = function(n) {
    this.name = n;
};

function setName(obj,name)
{
    obj.name = name;
}
function getName(obj)
{
    return obj.name;
}

//Test 1
var c = 10000000;
var tstart = 0;
var tend = 0;
tstart = new Date().getTime();
for (var j = 0; j < c; j++) {
    var newUser = User();
    newUser.setName("michael");
    newUser.getName();
}
tend = new Date().getTime() - tstart;
console.log("Returning object with methods: " + tend / 1000.0 + " seconds");
//Test 2
tstart = new Date().getTime();
for (var j = 0; j < c; j++) {
    var newUser = new UserPrototype();
    newUser.setName("michael");
    newUser.getName();
}
tend = new Date().getTime() - tstart;
console.log("Using prototypes: " + tend / 1000.0 + " seconds");
//Test 3
tstart = new Date().getTime();
for (var j = 0; j < c; j++) {
    var newUser = {name:"dave"};
    setName(newUser,"michael");
    getName(newUser);
}
tend = new Date().getTime() - tstart;
console.log("Using general functions: " + tend / 1000.0 + " seconds");
​

我的結果：

Returning object with methods: 9.075 seconds
Using prototypes: 0.149 seconds 
Using general functions: 0.099 seconds 

我寫了前兩個測試，當我看到結果時，我想到了為什么我看到它們......我在想，原因是返回的對象很慢，因為每次都會創建兩個新的方法屬性實例在原型方法更快的情況下實例化對象，因為它只創建一次函數。 一般函數調用和原型之間的性能接近讓我覺得我的假設是正確的。

所以我的第一個問題是，我對我的假設是對的嗎？

我的第二個問題是，如何使原型的寫作更具可讀性，同時保持高性能？ 有沒有辦法以一種看起來像是在“類”中的方式對原型進行編碼（如果這樣做有意義的話）

*編輯 - 我忘了用Object.create（）做測試，只做了一個並發布了結果。 JSFiddle：（ http://jsfiddle.net/k2xl/SLVLx/ ）。

我現在得到：

Returning object with methods: 0.135 seconds fiddle.jshell.net:63
Using prototypes: 0.003 seconds fiddle.jshell.net:72
Using general functions: 0.002 seconds fiddle.jshell.net:81
Returning object.create version: 0.024 seconds 

看起來這可能是解決方案？

Answer 1

我同意你的假設。 如果代碼編寫如下：

function UserObject() {
    this.name = "Dave";

    this.getName = function() {
        return this.name;
    };
    this.setName = function(n) {
        this.name = n;
    };
}

在這種情況下，就像在“對象”方法中一樣，每次構造UserObject對象時都會創建getName和setName方法。

您的代碼在“原型”和“函數”方法之間存在細微差別。 刪除if (!(this instanceof UserPrototype)) return new UserPrototype(); （這是一個不必要的安全防護）剃掉了相當多的東西。 可以說，與......進行更密切的比較

var newUser = new UserPrototype();
[newUser].name = "Dave";

......是......

var newUser = new Object();
newUser.name = "dave";

......因為......

var newUser = {name:"dave"};

...在創建Object並添加name屬性時，在本機代碼上騎得很高。

在這種情況下，結果翻轉，“原型”方法更快。 在這里查看jsFiddle：

• http://jsfiddle.net/bcfPp/2/

關於如何使您的原型更具可讀性，我無能為力。 對我來說，它們是可讀的:-)

Answer 2

當你在構造函數中沒有使用這個值時，永遠不要在構造函數中使用它，而是作為原型使用它。 例如

UserPrototype.prototype.name =“Dave”;

當你這樣做時，原型在速度上獲勝。