returnキーワードとnewキーワードのコンストラクタパターンの違いは何ですか？

Question

は、次のコードを考えてみましょう：

var Animal = function(name) { 
    return { 
    name: name, 
    speak: function() { return "My name is " + name; } 
    }; 
}; 

var cat = Animal("Kitty"); 

私の質問は：

var Animal = function(name) { 
    this.name = name, 
    this.speak = function() { return "My name is " + name; } 
}; 

var cat = new Animal("Another Kitty"); 

：差が上記のコードと次のコードの間で、パフォーマンス、規則、またはベストプラクティスの観点から、あるもの

どちらがお勧めですか？ newキーワードの使用例は何ですか？

Answer 1

プロトタイプ（および継承のように制御するすべて）を考慮すると、これらは完全に異なります。たとえば：

var SimpleAnimal = function(name) { 
 
    return { 
 
    name: name, 
 
    speak: function() { return "My name is " + name; } 
 
    }; 
 
}; 
 

 
var RealAnimal = function(name) { 
 
    this.name = name, 
 
    this.speak = function() { return "My name is " + name; } 
 
}; 
 

 
var simpleCat = SimpleAnimal("Kitty"); 
 
var realCat = new RealAnimal("Another Kitty"); 
 

 
console.log(simpleCat instanceof SimpleAnimal, realCat instanceof RealAnimal); // simple is not an instance of the constructor 
 
console.log(simpleCat.constructor, realCat.constructor); // because it uses the object literal constructor

プロトタイプ（および継承）の欠如は、あなたのオブジェクトは、クラスのプロトタイプに定義された任意のメソッドを受け取ることはありません意味：

var SimpleAnimal = function(name) { 
 
    return { 
 
    name: name, 
 
    speak: function() { 
 
     return "My name is " + name; 
 
    } 
 
    }; 
 
}; 
 

 
SimpleAnimal.prototype.roar = function() { 
 
    console.log("roar!"); 
 
}; 
 

 
var RealAnimal = function(name) { 
 
    this.name = name, 
 
    this.speak = function() { 
 
     return "My name is " + name; 
 
    } 
 
}; 
 

 
RealAnimal.prototype.roar = function() { 
 
    console.log("roar!"); 
 
}; 
 

 
var simpleCat = SimpleAnimal("Kitty"); 
 
var realCat = new RealAnimal("Another Kitty"); 
 

 
try { simpleCat.roar(); } catch (e) { console.error(e); } 
 
realCat.roar();

Answer 2

最初のバージョンは単純なObjectを返し、2番目のバージョンは単純なObjectを返します。 ew動物。

最初のバージョンは小さなデータオブジェクトに適しています。彼らは異なる値を格納することができ、それはかなりです。彼らは多くの記憶を必要としません。

もう1つは大きなオブジェクト用です。それらにプロトタイプを付けて、 "this"キーワードを使ってオブジェクトのプロパティに到達することができます。すべてのオブジェクトは同じプロパティを持つため、最初の方法よりもかなり大きな領域を占有します。

ここで、ベクトルオブジェクトを作成しましょう。最初の方法では、あなたがこのようなものだろう：

function createVector(x, y) { 
    return { 
     x: x, 
     y: y 
    }; 
} 

//Add to vectors together 
function add(vec1, vec2) { 
    return {x: vec1.x + vec2.x, y: vec1.y + vec2.y}; 
} 

add(createVector(1, 1), createVector(1, 2)); //return {x: 2, y: 3} 

をこれはかなり便利にすることができますが、ベクトルの複数の種類（など、4次元、3次元を...）持っているために何をしたい場合は？あなたは加算器関数のための別個の名前を与える必要がありますが、それはあまり良くありません。第二の方法の出番ですこれは、異なる名前空間に機能を分離することができます。

function Vector2(x, y) { 
    this.x = x; 
    this.y = y; 
} 

//Add vectors together: 
Vector2.prototype.add = function(vec) { 
    this.x += vec.x; 
    this.y += vec.y; 
}; 

new Vector2(1, 1).add(new Vector2(1, 2)); //{x: x, y: y} 

この方法で、あなたは複数のベクトル型を作成することができ、それらのそれぞれが互いに干渉することなく独立した追加機能を持つことができます。

達成したいことに基づいて両方を使用する必要があります。