JavaScriptはクラスベースのオブジェクト指向言語ではありません。 しかし、object oriented programming（OOP）を使用する方法はまだあります。このチュートリアルでは、OOPを説明し、その使用方法を示します。
Wikipediaによると、クラスベースのプログラミングは
オブジェクト指向プログラミング（OOP）のスタイルであり、継承はオブジェクトだけを介して行われるのではなく、オブジェクトのクラスを定義することによって行われる。
OOPの最も一般的なモデルはクラスベースである。しかし、私が言及したように、JavaScriptはクラスベースのlangaugeではありません-それはprototypeベースのlangaugeです。Mozillaのdocumentaionによると
:
プロトタイプベースの言語は、プロトタイプオブジェクト、新しいオブジェクトの初期プロパティを取得するテンプレートとしこのコードを見てみましょう：
let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// falseオブジェクト変数
namesfnamefnamelet names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false
lname。 方法は全くありません。では、hasOwnPropertyObjectプロトタイプから来ています。変数の内容をコンソールに記録してみてください。console.log(names);コンソールで結果を展開すると、次のようになります。
コンソール。log(names) 最後のプロパティに注意してください-
__proto__？ それを展開してみてください：名前の__proto__プロパティ
ObjectObjecthasOwnPropertyObjectのプロトタイプにアクセスできます。 これらのプロパティは所有していませんが、プロトタイプ内のプロパティへのアクセスが許可されます。__proto__プロパティ
これはプロトタイプとして使用されるオブジェクトを指します。これは、
Object prototypeプロパティへのアクセスを与えるすべてのオブジェクトのプロパティです。すべてのオブジェクトにはデフォルトでこのプロパティがあり、それ以外の場合（つまり、オブジェクトの
__proto__が別のプ__proto__プロパティの変更
このプロパティは、別のプロトタイプを参照する必要があることを明示的に示すことによって変更できます。 これを実現するには、次のメソッドが使用されます。
オブジェクト。コンソールでは、これはあなたが持っているものです：
コンソール。log(bingo)
__proto__speakメソッドに注意してください。p>
Object.create渡された引数を使用してプロトタイプになります。新しいキーワード
function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);
john__proto__DogObjectDogObject__proto__Objectプロトタイプ。この手法はプロトタイプ連鎖と呼ばれます。
newObject.create()newなどです。..Javascriptのすべてのオブジェクトは、デフォルトで
Objectprototype2prototype2DogObjectfunction DogObject(){}）であり、ドット表記でアクセスされたプロパティを持っているという事実に混乱しています。 これは、関数オブジェクトの組み合わせと呼ばれます。関数が宣言されているとき、デフォルトでは多くのプロパティが添付されています。 関数はJavaScriptデータ型のオブジェクトでもあることに注意してください。これで、Class
JavaScriptはecmascript2015で
classキーワードを導入しました。 それはJavaScriptをOOP言語のように見せます。 しかし、それは既存のプロトタイピング技術の上にちょうどsyntatic砂糖です。 これは、バックグラウンドでのプロトタイピングを続けますが、外側のボディはOOPのように見えます。 私たちは今、それがどのように可能であるかを見てみましょう。次の例は、JavaScriptでのclassの一般的な使用法です。class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);これはコンソールの結果です:
コンソール。log(bingo)
__proto__AnimalsObjectsing()dance()）がボーナス機能（プロトタイプ）である一方で、コンストラクタが主な機能を定義していることがわかります。バックグラウンドで、
newキーワードアプローチを使用すると、上記は次のように変換されます。function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");サブクラス化
これは、クラスが親クラスから機能を継承しますが、親にはない余分な機能を持っているOOPの機能です。
ここでのアイデアは、例えば、あなたが親クラスを作成したいと言うことです。猫のクラス。 クラスを最初から作成するのではなく、name、age、speciesプロパティを新たに指定すると、親animalsクラスからこれらのプロパティを継承します。このcatsクラスは、ひげの色のような余分なプロパティを持つことができます。
p>
サブクラスが
classでどのように行われるかを見てみましょう。ここでは、サブクラスが継承する親が必要です。 次のコードを調べます。
class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");上記では、次の出力が得られます。
console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"コンソールでclaraの内容をログに記録すると、次のようになります。
コンソール。log(clara)
clara__proto__Catswhiskers()__proto____proto__Animalssing()dance()nameageは、これから作成されたすべてのオブジェクトに存在するプロパティです。
Object.createメソッドアプローチを使用すると、上記は次のように変換されます。function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"
Object.setPrototypeOfAnimalsanimalConstructorCatscatConstructorcatConstructoranimalConstructoranimalConstructorcatConstructoranimalConstructorにアクセスできます。ラップアップ
JavaScriptは、oop開発者をエコシステムに歓迎するために、そのプロトタイプの性質を活用しています。 また、プロトタイプを作成し、関連するデータを整理する簡単な方法も提供します。
真のOOP言語は、バックグラウンドでプロトタイピングを実行しません-ちょうどそれに注意してください。
フロントエンドマスターに関するWill Sentanceのコースに大きな感謝-JavaScript：オブジェクト指向JavaScriptの難しい部分。 私はあなたが彼のコースからこの記事（プラス少し余分な研究）で見るすべてを学びました。 あなたはそれをチェックアウトする必要があります。あなたは、任意の質問や貢献のためにIamdillionでTwitterで私を打つことができます。
