コンストラクタ
5253 ワード
クラス(コンストラクション関数)
コンセプト
JavaScriptはコンストラクション関数とも呼ばれます
クラスはオブジェクト向けプログラミングと密接に関連しています
オブジェクト向けプログラミングは、ある符号化を記述するスタイルの一つと見なすことができる。
例
スーパーマンが持つ様々な要素は他の英雄にも存在する可能性がある。
ヒーローはみな似たような形態(共通の要素)-name、age、性別、skills
var superMan = {
name: "슈퍼맨",
age: 30,
gender: "남성",
skills: ["레이저빔", "공중부양", "파워"]
}
var spiderMan = {
name: "스파이더맨"
age: 18,
gender: "남성",
skills: ["거미줄", "벽타기", "스파이더센서"]
}
var blackWidow = {
name: "블랙위도우"
age: 34,
gender: "여성",
skills: ["격투", "암살", "잠입"]
}
共通要素を集合体として管理すると効率的になりますか?これがオブジェクト向けプログラミングです
共通の要素を束ねた箱自体はクラス(構造関数)と見なすことができる。
先ほど作成したコードをコンストラクション関数で置き換えましょう
コンストラクタの作成
関数を使用して関数を作成するときに使用できるfunctionキーワードを使用して構造関数を作成できます。
機能の作成時に使用される一般的な関数と構造関数を区別するには、構造関数の最初のアルファベットを大文字にします。
パラメータnameとageの残りの部分は無視されます。なぜなら、それらは長すぎるからです。
function Heroes(name, age) {
this.name = name;
this.age = age;
}
nameとageはパラメータであり,これらは我々が作成した英雄のコンポーネント,すなわちフレームワークである.
模刻された行為を行う際には、中にHerosのnameとageを伝える
ヒーローの名前と年齢はそれぞれname, this.年齢に割り当てる
これは後で再説明します
Herosというフレームを持って使います。
作成した変数ごとにnewというキーワードを使用
呼び出し関数のような構造で、パラメータはnameとageの順序で作成されます。
コンストラクション関数を呼び出すと渡される値はage、nameにそれぞれ割り当てられます
var superMan = new Heroes('슈퍼맨', 30);
var blackWidow = new Heroes('블랙위도우', 34);
console.log(superMan);
console.log(blackWidow);
≪インスタンス|Instance|emdw≫
superManやblackWindowなどのnewキーワードを使用して、コンストラクション関数の結果を呼び出します。値が含まれます。
作成したフレームワークがnewキーワードで呼び出された結果をインスタンスと呼びます。
コンソールでこれを撮って
superMan,blackWindow,すなわちインスタンス自体を指す.
function Heroes(name, age) {
this.name = name;
this.age = age;
console.log(this);
}
フナ餅の例
フナ餅の型があり、フナ餅の型が印刷された結果はフナ餅だった。
ここの構造関数自体がフナ餅の型です。
そしてnewというキーワードでフナ餅の型を印刷しました。
撮影中に中身を一緒に入力(スーパーマン、30)
これらの結果はフナ餅とHeros情報を含む対象である。
コンストラクション関数を学習する際,コンストラクション関数自体をフナ餅の型と見なすことができるため,印刷された例をフナ餅と呼ぶ.
例-2
Personという名前のコンストラクション関数にfullNameという名前の関数を作成
firstNameとlastNameを追加する方法を作成します。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = function() {
console.log(this.firstName + " " + this.lastName);
}
}
キムとパークでPersonフナの型を使って
kimとparkにはfirstName、lastName、fullName関数があります
引数として渡される値が指定されています
var kim = new Person("Woosung", "Kim");
var park = new Person("David", "Park");
console.log(kim);
console.log(park);
作成したオブジェクトにフルネームメソッドが含まれている状態
金さん、公園のフルネームを呼んでください。
kim.fullName();
park.fullName();
私たちこれ。firstName, this.fullNameにlastNameに割り当てられたwoosung kimとdavid parkが追加されているため、kimでfullNameというメソッドを呼び出すと、kimインスタンスが渡す買収値(woosung,kim)が加算される形で画面に出力される
コンストラクション関数は、パラメータ(thi.firstName、thi.lastName)を配置できますが、インスタンスで使用するメソッド(fullName)を整理することもできます。
方法に注意点を与える
オブジェクト値を表示すると、kim、parkインスタンスには2つの異なるキー値がありますが、fullNameには同じ値があります。
整理後、関数自体(fullname=function(){console...}それぞれ佳金と公園で
中の結果が変わったのは,我々が伝達したパラメータを加算するだけで,関数自体はkimでもparkでも同じ状態である.
ここでの問題は,コードの全成分から見て,同じコードが繰り返し露出していることである.
不要なメモリを消費し、余分な容量を消費します。
kim、parkは同じなので、すべてのインスタンスに適した汎用メソッドを作成すればいいです。
コンストラクション関数の内部で記述するのではなく、「プロトタイプ」の概念付与方法を使用する必要があります。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype.fullName = function() {
console.log(this.firstName + " " + this.lastName);
}
var kim = new Person("Woosung", "Kim");
var park = new Person("David", "Park");
kim.fullName();
park.fullName();
同じ結果を出力
console.KimとParkをロゴで撮ると、KimとParkの中にはfullNameメソッドはありませんが、fullnameを使います
これはPersonコンストラクション関数の作成時にJavaScriptがPersonであるためである.プロトタイプオブジェクトを一緒に生成
person.prototypeオブジェクトという要素にfullnameという新しいメソッドを追加しました
Reference
この問題について(コンストラクタ), 我々は、より多くの情報をここで見つけました https://velog.io/@woosungkim0123/생성자-함수テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol