ホームページ  >  記事  >  ウェブフロントエンド  >  Javascriptコンストラクターの詳しい解説_基礎知識

Javascriptコンストラクターの詳しい解説_基礎知識

WBOY
WBOYオリジナル
2016-05-16 16:33:071364ブラウズ

1. コンストラクターとは

Java、C、PHP などの一部のオブジェクト指向言語では、コンストラクターが非常に一般的です。 Javascript では、コンストラクターはまず通常の関数であり、new 演算子を使用して呼び出すことができ、特殊な型のオブジェクトを生成します。

コードをコピーします コードは次のとおりです:

// 「Benjamin」はコンストラクターです
var benjamin = new Benjamin("zuojj", "male");

上記の例では、benjamin は Benjamin オブジェクトですが、どのようにインスタンス化されるのでしょうか?

コードをコピーします コードは次のとおりです:

function Benjamin(ユーザー名, 性別) {
This.username = ユーザー名;
This.sex = セックス;
}
var benjamin = new Benjamin("zuojj", "male");
//出力: Benjamin{性別: "男性",ユーザー名: "zuojj"}
console.log(ベンジャミン);

ご覧のとおり、「Benjamin」コンストラクターは単に渡されたパラメーターを受け取り、それを this オブジェクトに割り当てます。これは、コンストラクターが new 演算子によって呼び出されるときに、コンストラクターの this オブジェクトに new 演算によって返されるオブジェクトが割り当てられるためです。
これは、上記のコードが次と同等であることを意味します:

コードをコピーします コードは次のとおりです:

ベンジャミン = {
"ユーザー名": "zuojj",
"性別": "男性"
}

2. コンストラクター

を使用する理由

コンストラクターが使用される理由はいくつかあります。
1. コンストラクターを使用するということは、これらすべてのオブジェクトが同じ基本構造を使用して作成できることを意味します
2. コンストラクターを使用するということは、「benjamin」オブジェクトが「Benjamin」関数

のインスタンスとして明示的にマークされることを意味します。

コードをコピーします コードは次のとおりです:

function Benjamin(ユーザー名, 性別) {
This.username = ユーザー名;
This.sex = セックス;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {
"ユーザー名": "zuojj",
"性別": "男性"
}
//出力: true
console.log(ベンジャミンのベンジャミンインスタンス);
//出力: false
console.log(ベンジャミンのインスタンス);

3. コンストラクターを使用すると、プロトタイプにパブリック メソッドを定義して、複数のインスタンスで共有できるようになります。

コードをコピーします コードは次のとおりです:

function Benjamin(ユーザー名, 性別) {
This.username = ユーザー名;
This.sex = セックス;
}
Benjamin.prototype.getName = function() {
this.username を返す;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("レモン", "女性");
//出力: zuojj
console.log(benjamin.getName());
//出力: レモン
console.log(ben.getName());

3. 注意事項

1.新しいキーワード
コンストラクターをインスタンス化するときに new キーワードを使用することを忘れないでください。 new キーワードを使用するかどうかは this オブジェクトに大きな影響を与えます。 new キーワードを使用しないと、this オブジェクトはグローバル オブジェクト (ブラウザーのウィンドウとグローバル) を指します。ノード)。したがって、コンストラクターを定義するときは、関数名の最初の文字を大文字にすることをお勧めします。
2. 呼び出された関数に明示的な return 式がない場合、このオブジェクト、つまり新しく作成されたオブジェクトが暗黙的に返されます。それ以外の場合は、オブジェクト

を返す場合に限り、返される結果に影響します。

コードをコピーします コードは次のとおりです:

関数 Bar() {
2 を返します;
}
var bar = new Bar();
//新しく作成されたオブジェクトを返します
//出力: Bar {}
console.log(bar);
関数 Test() {
This.value = 2;
戻り値 {
foo: 1
};
}
var test = new Test();
//返されたオブジェクト
//出力: オブジェクト {foo: 1}
コンソール.ログ(テスト);

注意する必要があるのは次のとおりです:
a) new Bar() は、数値 2 のリテラル値ではなく、新しく作成されたオブジェクトを返します。 したがって、 new Bar().constructor === Bar ですが、数値オブジェクトが返される場合、結果は異なります;
b) ここで取得される新しい Test() は、以下に示すように、 new キーワードによって新しく作成されたオブジェクトではなく、関数によって返されるオブジェクトです。

コードをコピーします コードは次のとおりです:
関数 Bar() {
2 を返します;
}
var bar = new Bar();
関数 BarN() {
新しい数値を返します(2);
}
var barn = new BarN();
//出力: true
console.log(bar.constructor === Bar);
//出力: 数値 {}
console.log(納屋);
//出力: false
console.log(barn.constructor === BarN);
//出力: true
console.log(barn.constructor === 数値);
/*---------------------------------------------- */
関数 Test() {
This.value = 2;
戻り値 {
foo: 1
};
}
var test = new Test();
//出力: 未定義
console.log(test.value);
//出力: 1
console.log(test.foo);

上記はコンストラクター関数の概要です。記事内に不適切な点があれば、指摘して修正していただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。