[TIL]JavaScriptクラス、継承、拡張
7949 ワード
今日は、JavaScriptのクラス、継承、拡張について簡単に説明します.なぜ継承と名付けられたのか、この継承はJavaScript言語に何の意味があるのか.目的が何なのか簡単に議論したい.
CLASS _ ECMAScript 6
classは実際にjavascriptが初期からサポートしている文法ではなく、他の言語で良好な機能を持つために拡張されたsyntex糖類(甘い文法)である.クラスを追加する前に、JavaScriptはfunctionキーワードを使用してクラスに似た機能を実装し、関数オブジェクトとプロトタイプを使用してクラス(類似していますが異なる)を強制的に使用します.ECMAScript 6の導入に伴い、この強制的に使用される機能は、文法的に直接使用できる機能と命名される.ただし、Class構文はES 6から適用される構文であるため、下位バージョンでは使用できない.ブラウザのバージョンを使用して、現在作成されているWebにES 6が含まれているかどうかを確認できます.
https://caniuse.com/ - caniuse,
これは、私が使用するバージョンがどのブラウザに適しているかを統計的に決定できるサイトです.
https://babeljs.io/ - babel,
これは私が使っている言語がどんな言語でも使えるように変換コンパイルするサイトです.
ClassはInstance生産工場です
実際、クラスの辞書の意味は
過去のJavaScriptを関数で実装したクラスのサンプルコードを見てみましょう.
javascript ES5 _ function Class
javascript ES6 _ class syntex
基本的に,両者とも内部メソッド定義領域とProperty初期化領域を区別した.functionキーワードを使用する場合は、その関数内でpropertyを定義し、関数外でプロトタイプにアクセスしてメソッドを追加することでメソッドを定義します.class構文を使用する場合は、コンストラクション関数の内部(クラスフィールド)でpropertyを初期化し、class内でメソッドを定義します.
クラス継承
クラス継承という他のものよりも重要な概念は
クラス概念の中で最も重要なのは
次のコードを見てみましょう.
CLASS _ ECMAScript 6
classは実際にjavascriptが初期からサポートしている文法ではなく、他の言語で良好な機能を持つために拡張されたsyntex糖類(甘い文法)である.クラスを追加する前に、JavaScriptはfunctionキーワードを使用してクラスに似た機能を実装し、関数オブジェクトとプロトタイプを使用してクラス(類似していますが異なる)を強制的に使用します.ECMAScript 6の導入に伴い、この強制的に使用される機能は、文法的に直接使用できる機能と命名される.ただし、Class構文はES 6から適用される構文であるため、下位バージョンでは使用できない.ブラウザのバージョンを使用して、現在作成されているWebにES 6が含まれているかどうかを確認できます.
https://caniuse.com/ - caniuse,
これは、私が使用するバージョンがどのブラウザに適しているかを統計的に決定できるサイトです.
https://babeljs.io/ - babel,
これは私が使っている言語がどんな言語でも使えるように変換コンパイルするサイトです.
ClassはInstance生産工場です
実際、クラスの辞書の意味は
등급, 급을 나누는 것
です.これは、領域を拡大して区別するためにclassと命名することを意味します.基本的に、類はこれらの副次的な物語よりも、工場で撮ったとき、その原型を考えると気持ちがいいです.ある機能を持つオブジェクト(Object)を作成するには、クラスに基づいてオブジェクト(Class)を作成する必要があります.このときClassは、作成するInstance(Object)形式のテンプレートです.ここではnew {Class 이름}
を通じて、Instanceが誕生します.これにより、複数のインスタンスの工場を生産することができます.過去のJavaScriptを関数で実装したクラスのサンプルコードを見てみましょう.
javascript ES5 _ function Class
function Player(nickName, hp, mp, str){ //생성자 함수 Player(arguments)
this.nickName = nickName; //property 초기화
this.hp = hp;
this.mp = mp;
this.str = str;
}
Player.prototype.hit = function(){
this.hp--;
}
Player.prototype.levelUp = function(){
this.hp += 100;
this.mp += 250;
this.str += 20;
}
では、Classを使用してこのコードを作成する方法をもう一度見てみましょう.javascript ES6 _ class syntex
class Player{
constructor(nickName, hp, mp, str){ //생성자 함수, property 초기화
this.nickName = nickName;
this.hp = hp;
this.mp = mp;
this.str = str;
}
hit(){
this.hp--;
}
levelUp(){
this.hp += 100;
this.mp += 250;
this.str += 20;
}
}
二人はほとんど同じ顔をしているが、違う.上はfunction実装クラスのような機能を使用し、下はclass構文を使用してclassを明示的に作成します.functionを使用すると、その名前を持つ関数自体がコンストラクション関数となり、class構文ではconstructorと別名を持つ関数がコンストラクション関数となります.基本的に,両者とも内部メソッド定義領域とProperty初期化領域を区別した.functionキーワードを使用する場合は、その関数内でpropertyを定義し、関数外でプロトタイプにアクセスしてメソッドを追加することでメソッドを定義します.class構文を使用する場合は、コンストラクション関数の内部(クラスフィールド)でpropertyを初期化し、class内でメソッドを定義します.
クラス継承
クラス継承という他のものよりも重要な概念は
기능 확장
です.たとえば、クラスを定義して使用している場合は、追加の機能がある場合にコードを全面的に変更するのではなく、追加の機能をインポートしたり、いくつかの機能を変更したりする必要がある場合に継承を使用します.メソッドまたはプロパティを継承する他のクラスを作成し、メソッドまたはプロパティを操作して新しい機能を作成し、メソッドとして定義し、必要なプロパティを追加して使用できます.クラス概念の中で最も重要なのは
확장성
です.Syntexの基本概念自体が機能を拡大するためである.次のコードを見てみましょう.
class Cal_essen(){
constructor(){
}
}
Reference
この問題について([TIL]JavaScriptクラス、継承、拡張), 我々は、より多くの情報をここで見つけました https://velog.io/@brian_kim/TIL-JavaScript-Class-상속-확장テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol