クラス class は es6 構(gòu)文であり、es6 の新機(jī)能です。 ES6 では、「クラス」をすばやく定義するために class キーワードが導(dǎo)入されましたが、クラスの本質(zhì)は関數(shù)です。これは構(gòu)文糖衣とみなすことができ、オブジェクト プロトタイプの記述をより明確にし、オブジェクト指向プログラミングの構(gòu)文に近づけます。 。 class を使用して、クラス メソッド「class Person{//クラス宣言}」または「const Person=class{//クラス式}」を定義します。

このチュートリアルの動(dòng)作環(huán)境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

クラス class は es6 構(gòu)文であり、es6 の新機(jī)能です。

ES6 では、「クラス」をすばやく定義するために class キーワードが導(dǎo)入されました。

JS では、「クラス」の本質(zhì)は糖衣構(gòu)文とみなすことができる関數(shù)であり、オブジェクト プロトタイプの記述方法をより簡(jiǎn)潔かつ明確にし、オブジェクト指向プログラミングの構(gòu)文に近づけます。

クラス定義 class

前述のコンストラクター形式に従って class を作成することは、通常のクラスを作成することとあまりにも似ているだけではないことがわかります。 function であり、コードは理解するのが簡(jiǎn)単ではありません。

ES6 の新しい標(biāo)準(zhǔn) (ECMAScript2015) では、class キーワードを使用してクラスを直接定義します; しかし、クラスは依然として本質(zhì)的には前述のコンストラクターとプロトタイプ チェーンの構(gòu)文糖です。 ;したがって、前のコンストラクターとプロトタイプ チェーンを?qū)Wぶことは、クラスの概念と継承関係を理解するのに役立ちます;

それでは、クラスを使用してクラスを定義する方法は何でしょうか? –クラスを宣言するには、クラス宣言とクラス式という 2 つの方法を使用できます。

class?Person{
????//類聲明
}

const?Person=class{
????//類表達(dá)式
}

クラスとコンストラクターの類似點(diǎn)と相違點(diǎn)

見てみましょうクラスのいくつかの特性を調(diào)べてください。実際にコンストラクターの特性と一致していることがわかります。

console.log(Person.prototype)
console.log(Person.prototype.__proto__)//Object?null?
console.log(Person.prototype.constructor)//Person
console.log(typeof?Person)?//?function

var?p?=?new?Person()
console.log(p.__proto__?===?Person.prototype)?//?true

クラスのコンストラクター

必要な場(chǎng)合 いつオブジェクトを作成するとき、いくつかのパラメータをクラスに渡しますが、このとき何をすべきでしょうか?

• 各クラスは獨(dú)自のコンストラクター (メソッド) を持つことができます。このメソッドの名前は固定コンストラクターです。
• 新しいシンボルを使用して操作する場(chǎng)合、クラスを操作すると、このクラスのコンストラクター コンストラクターが呼び出されます。
• 各クラスはコンストラクターを 1 つだけ持つことができます、複數(shù)のコンストラクターが含まれる場(chǎng)合、例外がスローされます ;

new キーワードでクラスを操作すると、このコンストラクター関數(shù)が呼び出され、次の操作が実行されます:

#1. メモリ內(nèi)に新しいオブジェクトを作成します (空のオブジェクト) );
• 2. このオブジェクト內(nèi)の [[prototype]] 屬性は、クラスのプロトタイプ屬性に割り當(dāng)てられます;
• 3. コンストラクター內(nèi)のこれは、作成された新しいオブジェクトを指します;
• 4. コンストラクターの內(nèi)部コード (関數(shù)本體コード) を?qū)g行します;
• 5. コンストラクターが null 以外のオブジェクトを返さない場(chǎng)合は、作成された新しいオブジェクトが返されます ;

クラスのインスタンス メソッド

class?Person?{
??constructor(name,?age)?{
????this.name?=?name
????this.age?=?age
????this._address?=?"廣州市"
??}

??//?普通的實(shí)例方法
??//?創(chuàng)建出來的對(duì)象進(jìn)行訪問
??//?var?p?=?new?Person()
??//?p.eating()
??eating()?{
????console.log(this.name?+?"?eating~")
??}

??running()?{
????console.log(this.name?+?"?running~")
??}
}

Accessor メソッドクラスの

前にオブジェクトのプロパティ記述子について説明したとき、オブジェクトはセッター関數(shù)とゲッター関數(shù)を追加できると述べましたが、クラスも可能です:

class?Person?{
??constructor(name,?age)?{
????this.name?=?name
????this.age?=?age
????this._address?=?"廣州市"
??}

??//?類的訪問器方法
??get?address()?{
????console.log("攔截訪問操作")
????return?this._address
??}

??set?address(newAddress)?{
????console.log("攔截設(shè)置操作")
????this._address?=?newAddress
??}
}

クラスの靜的メソッド

靜的メソッドは、通常、クラスを使用して直接実行されるメソッドを定義するために使用されます。クラスのインスタンスは必要ありません。次を定義するには、static キーワードを使用します。

class?Person?{
??constructor(name,?age)?{
????this.name?=?name
????this.age?=?age
????this._address?=?"廣州市"
??}
??//?類的靜態(tài)方法(類方法)
??//?Person.createPerson()
??static?randomPerson()?{
????var?nameIndex?=?Math.floor(Math.random()?*?names.length)
????var?name?=?names[nameIndex]
????var?age?=?Math.floor(Math.random()?*?100)
????return?new?Person(name,?age)
??}
}

ES6 クラスの継承 - extends

ES5 での継承の実裝については、多くの時(shí)間を費(fèi)やして議論しました。最終的には比較的満足のいく継承メカニズムが実現(xiàn)しましたが、そのプロセスはまだ非常に面倒でした。 ES6 では、継承の実裝に簡(jiǎn)単に役立つ extends キーワードが追加されました。

class?Person{
????
}

class?Student?extends?Person{
????
}

上記で見つかります。コードでは、スーパー キーワードを使用しました。このスーパー キーワードにはさまざまな使用方法があります: 注: これを子 (派生) クラスのコンストラクターで使用する前、またはデフォルト オブジェクトを返す前に、最初に super を渡す必要があります。親クラス！

#スーパーを使用できる場(chǎng)所は 3 つあります: サブクラスのコンストラクター、インスタンス メソッド、および靜的メソッドです。

#組み込みクラスの継承

配列などの組み込みクラスからクラスを継承させることもできます:

class?HYArray?extends?Array?{
??firstItem()?{
????return?this[0]
??}

??lastItem()?{
????return?this[this.length-1]
??}
}

var?arr?=?new?HYArray(1,?2,?3)
console.log(arr.firstItem())
console.log(arr.lastItem())

JavaScript クラスは単一継承のみをサポートします。つまり、存在できる親クラスは 1 つだけです。では、開発中に同様の関數(shù)をクラスにさらに追加する必要がある場(chǎng)合、どうすればよいでしょうか?現(xiàn)時(shí)點(diǎn)では、mixin を使用できます;

JavaScript中的多態(tài)

//?多態(tài):?當(dāng)對(duì)不同的數(shù)據(jù)類型執(zhí)行同一個(gè)操作時(shí),?如果表現(xiàn)出來的行為(形態(tài))不一樣,?那么就是多態(tài)的體現(xiàn).
function?calcArea(foo)?{
??console.log(foo.getArea())
}

var?obj1?=?{
??name:?"why",
??getArea:?function()?{
????return?1000
??}
}

class?Person?{
??getArea()?{
????return?100
??}
}

var?p?=?new?Person()

calcArea(obj1)
calcArea(p)

//?也是多態(tài)的體現(xiàn)
function?sum(m,?n)?{
??return?m?+?n
}

sum(20,?30)
sum("abc",?"cba")

//?傳統(tǒng)的面向?qū)ο蠖鄳B(tài)是有三個(gè)前提:
//?1>?必須有繼承(是多態(tài)的前提)
//?2>?必須有重寫(子類重寫父類的方法)
//?3>?必須有父類引用指向子類對(duì)象

//?Shape形狀
class?Shape?{
??getArea()?{}
}

class?Rectangle?extends?Shape?{
??getArea()?{
????return?100
??}
}

class?Circle?extends?Shape?{
??getArea()?{
????return?200
??}
}

var?r?=?new?Rectangle()
var?c?=?new?Circle()

//?多態(tài):?當(dāng)對(duì)不同的數(shù)據(jù)類型執(zhí)行同一個(gè)操作時(shí),?如果表現(xiàn)出來的行為(形態(tài))不一樣,?那么就是多態(tài)的體現(xiàn).
function?calcArea(shape:?Shape)?{
??console.log(shape.getArea())
}

calcArea(r)
calcArea(c)

export?{}

以上がクラス class は es6 構(gòu)文ですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。