JavaScriptを詳細に理解する：それはクラス、関数、または変数ですか？

Question

私はJavaScriptの初心者です。私は非常に混乱している1つのコンセプトを見つけています。以下のコードを考えてみましょう：

var person = { 
    firstName :"Penelope", 
    lastName :"Barrymore", 
    // Since the "this" keyword is used inside the showFullName method below, and the showFullName method is defined on the person object,​ 
    // "this" will have the value of the person object because the person object will invoke showFullName()​ 
    showFullName:function() { 
     console.log (this.firstName + " " + this.lastName); 
    } 
​ 
} 
​ 
person.showFullName(); // Penelope Barrymore 

人はクラスか関数か単なる変数ですか？その人と仮定すると、クラスがある場合はC＃または他の任意の言語で、我々は

person perObj = new person(); 
perObj.showFullName(); 

を書くため

は、コードperson.showFullName();それを呼び出す正しい方法ですか？

Answer 1

personです。それは、firstName,lastName、およびshowFullNameという3つのプロパティを持っています。最初の2つのプロパティには文字列が含まれます。最後のプロパティには関数が含まれています。あなたは<expression>がオブジェクトに評価し、<function>は、関数が実行されている間、その後特殊変数thisがオブジェクトに設定され、そのプロパティの1つの名前である構文<expression>.<function>(<arguments>)、との関数を呼び出す

。つまり、this.firstNameとthis.lastNameは、オブジェクトのプロパティにアクセスできます。

変数がpersonの変数を使用するだけなので、この機能はオブジェクトが1つだけの場合はあまり役に立ちません。しかし、複数のオブジェクトに対して同じ関数を使うことができます。

function showFull() { 
    console.log(this.firstName + " " + this.lastName); 
} 
var person1 = { 
    firstName: "Penelope", 
    lastName: "Barrymore", 
    showFullName: showFull 
}; 
var person2 = { 
    firstName: "John", 
    lastName: "Smith", 
    showFullName: showFull 
} 
person1.showFullName(); // Penelope Barrymore 
person2.showFullName(); // John Smith 

Answer 2

JavaScriptにはクラスがないか、クラスベースの言語ではありません。代わりに、プロトタイプベースの言語であると言います。

Answer 3

だけBarmarに追加するには、（場合には、あなたがC＃にそれがもっと似て見つける。）だけでなく、このような何かを行っている可能性：

var person = function() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

person.prototype.showFullName = function() { 
    console.log (this.firstName + " " + this.lastName); 
} 

var perObj = new person(); 
perObj.firstName = "Penelope"; 
perObj.lastName = "Barrymore"; 
perObj.showFullName(); 

Answer 4

それはオブジェクトではなく、クラスです。

は、このよう考えてみましょう：他の古典的なオブジェクト指向言語で

、あなたがクラスをインスタンス化するとき、 あなたはインスタンスを取得します。このインスタンスはJavaScript オブジェクトと同等のオブジェクトです -

JavaScriptオブジェクトは動的なプロパティの "バッグ"です。これは、名前と値のペアのセットであり、これらの値は、関数またはオブジェクト自体の任意の型である可能性があります。

あなたのケースでは、firstName, lastName, and showFullNameは人物のオブジェクトのプロパティです。例えば

あなたは、ドットを使用してオブジェクトのプロパティにアクセス表記、 （。）：person.firstName, person.showFullName()

Answer 5

personが実際にJavaScriptでのオブジェクトリテラルです。オブジェクトリテラルは、

var obj = { 
    // Properties and methods 
}; 

と定義され、その型はobjectです。JavaScriptではクラスという名前のものはありません。

• すべてはオブジェクトです。 （偶関）

オブジェクトリテラル中括弧に包まれた名前と値のペアのコンマ区切りのリストです。オブジェクトリテラルはデータをカプセル化し、整然としたパッケージにまとめます。

http://www.dyn-web.com/tutorials/object-literal/

---

我々はECMAScriptの6のクラスを持っていますが、それらは他の言語のように実際のクラスではありません。

MDNは言う：

JavaScriptのクラスはECMAScriptの6で導入され、構文 のJavaScriptの既存のプロトタイプベースの継承を超える砂糖されています。 クラスの構文はで、ではなく、新しいオブジェクト指向の継承 モデルをJavaScriptに導入しました。 JavaScriptクラスは、オブジェクトを作成して継承を処理するために、はるかに簡単で の構文を明確にしています。

Answer 6

人はクラスか関数か単なる変数ですか？

JavaScriptにはクラスがありません。変数personは、オブジェクトを保持するメモリ位置を指す変数です。

オブジェクト自体にはいくつかの側面があります。添付された一連のプロパティがあり、すべてがpersonオブジェクトに関連付けられています。これらのプロパティの1つに、関数オブジェクトである値が含まれています。この関数オブジェクトには、実行コンテキストが含まれています。

Execution Context^ECMAには、ローカル環境、レキシカル環境、およびこのバインディングがあります。このバインディングはpersonオブジェクトを指します。関数のローカル環境は関数内の宣言にスコープされ、関数のレキシカル環境はPersonオブジェクトで使用可能な宣言にスコープされます。

Answer 7

personは、objectです。 、などhasOwnProperty()

// Object initialiser or literal 
person = { 
    some methods and properties 
} 

// Called as a constructor 
person = new Object({some methods and properties}) 

あなたperson目的は、プロトタイプから特定のメソッドをオブジェクト継承することを意味する。換言すれば、personはObjectのインスタンスであり、personプロトタイプは{}イニシャライザによって作成され、他のオブジェクト内のプロトタイプと同じですtoString(),valueOf()など

最後に書かれたObject constructorは、ハッシュのようなオブジェクトだけでなく、他のタイプのオブジェクト（配列、文字列など）も作成できます。 javascriptのすべては、オブジェクト、プリミティブさえあります（ラッパーオブジェクトを持ち、独自のコンストラクタを持っています）。

例：

persons  = new Object([person_1, person_2, person_3])  
person_age = new Object(18) 
person_name = new Object('John') 

我々は他の構文で上記の式のすべてを書くことができます

persons  = new Array(person_1, person_2, person_3) //or  
persons  = [person_1, person_2, person_3] 

person_age = new Number(18) //or  
person_age = 18 

person_name = new String('John') //or  
person_name = 'John' 

文字列と数値はnew

Page on MDNことなく、適切なグローバルオブジェクトを使用して作成することができます

新しいオブジェクト型

に新しいタイプのオブジェクトを作成する必要がある場合、（ECMAScriptの5.1）新しいコンストラクタ関数を定義し、プロトタイプを定義する必要があります

NewObjectType = function(arg1, arg2){ 
    this.arg1 = arg1 //define object's property arg1 
    this.arg2 = arg2 //define object's property arg2 

    private_function = function(){} 
    this.public_function = function(){} //this function can't be inherited, because not in prototype 
} 

NewObjectType.prototype = { 
    constructor : NewObjectType, 
    public_inheritable_function_1 : function(){}, 
    public_inheritable_function_2 : function(){} 
} 

//creating new instance of NewObjectType: 

my_new_object = new NewObjectType(arg1, arg2) 

my_new_object instanceof NewObjectType //true 
my_new_object instanceof Object  //true, because prototype was created with {} literal, and Object's prototype built into the prototype chain 

説明：

new NewObjectTypeがある場合にはNewObjectTypeの新しいインスタンスが作成されます。 NewObjectTypeコンストラクタ関数のPrototypeプロパティは、新しいインスタンスのhiddenプロパティ__proto__とリンクされます。プロトタイプなし

オブジェクト

オブジェクトのメソッドずに明確なオブジェクトを作成する必要がある場合は、メソッドを作成して使用してプロトタイプせず、それを作成する必要があります。

person = Object.create(null) 

これは、単純なキーと値のストレージとして有用である可能性がありますObjectから継承されていないことを

タイプ、

プロトタイプチェーン内のオブジェクトのプロトタイプせずにオブジェクトの新しいタイプを作成する必要がある場合、あなたは構文の下に使用することができます。

NewObjectType = function(arg1, arg2){} 
NewObjectType.prototype = Object.create(null) 
NewObjectType.prototype.constructor = NewObjectType 
NewObjectType.prototype.public_inheritable_function = function(){} 

my_new_object = new NewObjectType(arg1, arg2) 

my_new_object instanceof NewObjectType //true 
my_new_object instanceof Object  //false