(上)フルスタックエンジニアの知識ポイントの概要--javascript

#JSシニア日
## JSの基本的な導入
+ JSは使用しています。Javascriptがブラウザ、サーバ側(nodejsを)達成することができます。
:+ JSのブラウザは、3つの部分から構成
するECMAScript:基本的な構文(データ型、演算子、関数、...) -
- BOM(ブラウザオブジェクトモデル):ウィンドウ、場所、歴史、ナビゲーター。
- DOM(ドキュメントオブジェクトモデル):DIV、P、スパン。
:また、ESとして知られている+のECMAScriptは、次のメジャーバージョンがある
旧年齢: -
- ES 1.0を。ES3.1
-ニューエイジ:
- ES5
- ES6(ES2015)
- ES7(es2016)、ES8(es2017)

##データタイプ
+基本データ型-値型:(数値、文字列、ブール値、ヌル、未定義)
-未定義のタイプ?
デフォルト値が定義されていない1、変数宣言、ない割り当てが存在しないが、
図2に示すように、変数が宣言され、未定義の値が割り当てられ
、図3に示すように、オブジェクトの存在しないプロパティを取得し、値は不定であります

+複雑なデータ型- :(参照型のオブジェクト)
-配列
-機能
-正規表現
-日

##基本的なオブジェクトを使用すると、
###オブジェクト作成
`` `JSの
VaRの学生を= {
名: "白"、//学生は"白"のname属性値がある
グレード:"開始"、
// A、学生は、関数の値属性言う
// bを、学生は方法があると言うが
言う:機能(){
はconsole.log(「こんにちは」);
}、
RUN:機能(スピード){
はconsole.logを(「であります) "+スピード+"速度10m /秒のラン」で;
}
}
`

オブジェクトのプロパティとメソッドが構成されている:###オブジェクトは、キーと値のペアの集合である
(言っているがあります:この方法はまた、プロパティであることをオブジェクトのプロパティが存在します)

+ Name属性は、プロパティがグレードされている
+は、runメソッドがの方法であると言います

 

###操作オブジェクトのプロパティ

####取得のプロパティ:

####第一の実施形態:構文
name属性の+ student.name取得した値として「白」
+ student.say機能を取得しました

####第二の方法:[]構文
+学生[「名前」]はstudent.nameと同等です
+学生student.sayと同等です[「言います」]

臨時####:二つの方法の違い:

+構文の方が便利ですが、より多くのピット(制限)、例えば:
-バックは、JSのキーワードを使用することはできません、予約語(クラス、この、機能...)
-数字の背後には使用できません。
`` ` JSの
VAR OBJ = {};
obj.this = 5; //構文エラー
obj.0 = 10; //構文エラー
`

+ []より広く使用されています

- O1 [変数名]

- [ "クラス"]、[ "この"] OBJを`使用して自由である[ "この"] = 10 '

- [1] [0]、[2]を使用することができる
-` OBJ [3] = 50 = OBJ [ "3"] '= 50
-思考:なぜ、OBJ [3] = OBJ [ " 3"]

-あなたも、これを使用することができます:[「[オブジェクト配列]」]
- jQueryのような実装を持っているであろう

-これを使用することができる:[ "{ABC}"]
- {ABC}オブジェクトのプロパティに追加さ

 

####設定されたプロパティ

+ `学生[」性別『] =』 M「は"
と同等です: `student.gender =『M』`
-意味:オブジェクトがない場合は、ジェンダーの学生は、」M」の性別属性値を追加し、属性
-もし学生のオブジェクトは、男女が性別属性を変更する属性を持っていることは「男性」であります

+ケース1: `student.isFemale = true`を

+ケース2: `学生[ "子供"] = [1,2,5]`

+ケース3:

=関数student.toShanghai(){
にconsole.log( "上海方法を宛先とします")
}


####プロパティを削除します。

削除学生+ [「性別」]
+ [削除student.gender
(削除のみ削除対象の属性は変数を削除することはできません)


##オブジェクトリテラル方法作成することの欠点:
1は、冗長コードがたくさんあります。
図2に示すように、同一のプロパティとメソッドを有するオブジェクトのすべてのインスタンスは、メモリ(メモリリーク)の浪費につながります。


オブジェクト##を作成するためのコンストラクタ
、オブジェクトコンストラクタ作成する###例:
+ = VAR暁新新しいオブジェクト() - > VAR暁= {};
今日(+ =新しい新しいVAR)を
+ VAR部屋配列=新しい新しい(1。 、3,5) - > = VARルーム[1,3,5]
+ = 'VAR IsMale / 123 /; == `>` VAR = IsMale新しい新しい正規表現( "123") `
-コンストラクタ正規表現によってIsMaleオブジェクトから作成
- isMaleは、RegExpコンストラクタのインスタンスであります

+上記の例では、オブジェクト、日付、Arrayコンストラクタを内蔵してい

##カスタムオブジェクトを作成するためのコンストラクタ
+コンストラクタ
`のJSは
人機能(名前、年齢){
this.name =名;
this.age =年齢;
}
VAR新しい新規P1 =人物( "趙"、18)
``
+説明: `P1が`からオブジェクトを作成するために[人]コンストラクタに基づいています

コンセプトコンストラクタ###
+任意の関数はコンストラクタとして使用することができます
`CreateFunc機能(){}`
+として長い道のりで呼ばれる新しい機能として、私たちは関数が呼び出され、この時間を置いが呼び出されます。構造関数呼び出し
-新しいCreateFuncを();今回はCreateFuncは、コンストラクタ(新新でなければならない)である
- CreateFunc();この時点でコンストラクタCreateFuncではありません

約###新しい新しい()オブジェクト
+新しい新しいオブジェクトが(){}リテラルオブジェクトと等価です

実行コンストラクタ###
`varが= P1新しい新規人物(); '
+ 1、(我々はPersonオブジェクトのコンストラクタのインスタンスを呼び出す)オブジェクトを作成する- ` _p1。
+ 2、内部オブジェクトを作成し、 `this`は、このインスタンス(_p1)を指す
。+ 3、動作例(_p1)のこの動作の一部である内部機能コード行う
。+ 4、値を返す:
- 、関数は値を返さない場合(ノーリターンステートメント)、それがインスタンスコンストラクタ(P1)を返します
-関数は、基本データ型の値を返す場合、Bは、この例の戻り値がないことをコンストラクタ(_p1)

FN関数(){

}
VAR新しい新しいF1 = FN(); // F1はFN例であります

FN2関数(){
リターン"ABC";
}
新しい新しいFN2 = F2(VAR); // F2は、インスタンスコンストラクタFN2あります

- 複合データ型は、この関数の戻り値が値である場合、Cは、関数は、値を返します

FN3関数(){
戻り[1,3,5];
//配列オブジェクト・タイプは、値である
配列が複雑なデータ型の値であるので、//
// - >このコンストラクタは、戻りの真値でありますアレイ
// - >は、もはやFN3インスタンスコンストラクタではない
}
新しい新しいFN3 = F3 VAR(); //例F3のFN3それは?エラー
// f3がある[1,3,5]


##継承
、継承の概念に### JSを:
オブジェクトが別のオブジェクトのプロパティとメソッドにアクセスすることができるように、[特定の方法]で+
私たちは「このアプローチを呼び出すが継承されていない、いわゆるxxxは拡張yyy`。

なぜ継承を使用するには###?

+一部のオブジェクトは、同じ方法(アクション、挙動)を有するであろうが、これらの方法が機能している、
これらの方法および機能は、コンストラクタの宣言内に配置されている場合、メモリの浪費につながります。

例子:
関数人(){
this.say =関数(){
にconsole.log( "你好")
}
}
VARのP1 =新しい人()。
VaRのP2 =新しい人();
console.log(p1.say === p2.say)。//偽

分析:方法と同様の機能を言うことができる
同じ方法(メモリの同じ部分を指していない、メモリの浪費になります)ではありません。

ソリューション:で、それらの共通(親)に書き込むように言うの方法。
実際には、彼らの共通の親オブジェクトは、Person.prototypeによって得ることができます。

結論:ちょうど、コンストラクタに、プロトタイプオブジェクトのメソッドをプロパティを追加する
方法は、コンストラクタのすべてのインスタンスで共有することができ、そのような性質その後。

==>プロトタイプオブジェクト[プロトタイプオブジェクトコンストラクタは、本明細書で呼ばれます]。

// Person.prototypeは、オブジェクトのプロトタイプであるP1 P2 P3
// Person.prototype人コンストラクタのプロトタイプオブジェクト[インスタンス]であります

何を思いますか?
プロトタイプオブジェクトだ人はそれを何ですか?
- >一人称コンストラクタが知っている必要があります: - >機能
- >だから、人のプロトタイプオブジェクトは、次のとおりです。Function.prototype


実施例###継承:プロトタイプ継承チェーン1
'JS
Person.prototype.say =関数(){
にconsole.log( "こんにちは")
}
`
+欠点:1,2を添加する方法あまりにも多くの方法は、冗長性をコーディングにつながるかどうかは重要ではなく、ありません

第二の実施形態###継承:継承プロトタイプチェーン2
`JS
Person.prototypeが= {
コンストラクタ:人、
言う:機能(){
にconsole.log( "こんにちは");
}、
RUN:()関数{
にconsole.log(「スプリント進捗」);
}
}
`
+注意点:
+ Aは、通常の状況下で、それが最初のプロトタイプオブジェクトを変更し、オブジェクトを作成する必要があり
、一般的に、+ Bを、新たなプロトタイプ、オリジナルのプロトタイプオブジェクト構造を破壊しないように私たちは、コンストラクタのプロパティを追加します

###継承第三の方法は:(混合継承)継承されたコピー
時々プロパティでオブジェクトを使用したいが、あなたは、オブジェクトのコピーを作成することができますので、それを直接変更することはできません:+シーン
1を達成するために+を:
JS `
VAR {名前=出典: "白"、年齢:15}
VAR対象= {};
target.name = source.name
target.age = source.age;
`

+上記方法は明らかに再利用することができない、それらの機能を書き込むことができる再利用するために非常に多くの場合、コピー継承方法を使用して、実際のコード・プロセスの準備は、カプセル化:
`` `JSの
関数(ターゲット、ソース){拡張
のため(キーのソースで){
標的[キー] = [キー]ソース;
}
戻り対象;
}
拡張(ターゲット、ソース)
`` `

+ライブラリのように多くの実際の開発には非常に多くのコピー継承された使用シナリオは、この実現に持っているので
- jqueryの:$を拡張します。

+ ES6対象とオペレータ拡張子が具体的に健康の連続コピーするように設計されている場合:
`` `JSの
VAR {名=出典:「白」、年齢:15}
のvar対象= {} ...ソースを
` ``

###継承4番目の方法:原型継承
+シナリオ:
-純粋なオブジェクトを作成します
-親オブジェクトの子を継承するクラスを作成するために
+使用:
-空のオブジェクト:Object.create(ヌル)
-
` JS `
VAR = {O1は言う:機能(){}}
VAR = Object.create O2(O1);
`

継承の第五の実施形態###:コンストラクタは継承借りる
+シナリオ:論理は似たような状況の二種類の間コンストラクタに適用

関数動物(名){
this.name =名。
}
関数人(名前、年齢){
this.name =名。
this.age =年齢;
}

+実現上記コンストラクタと借用コード
`JSの
関数動物(名前、年齢){
this.name =名;
this.age =年齢;
}
機能人(氏名、年齢、住所){
Animal.call(この名前);
//this.name=name;
//this.age=age;
this.address =アドレス;
}
`

##プロトタイプチェーン

##クロージャ
###可変範囲
+概念の可変範囲:範囲を使用することができる変数である
というグローバルスコープ:最初の最も外側のスコープでJS +
+もJSで機能することができます関数はネストすることができるので、また、スコープを入れ子にすることができる別のスコープを作成します

###スコープチェーン
+起因スコープ変数相対的な用語であり、からマルチレベルスコープ、その変数とがある場合?我々は良い外観を探求する必要がある、と私たちは変数のスコープチェーンと呼ばれるこのプロセス変数を探し、質問
から変数を決定:簡単に言えば+、スコープチェーンは、それを合計する次の単語を使用することができます:(または、ここで範囲は)
-あなたは変数の現在のスコープを宣言した場合、結果を決定するために、現在のスコープを見る
と宣言していない、より高いレベルの機能を見て、優れた機能の現在の機能である優れた範囲の現在のスコープを見つけること-
-その後、グローバルスコープまで、高機能の優れた機能を発見
-グローバルなスコープが存在しない場合、我々は、この宣言されていない変数(xxxには定義されていない)ことを信じています

+実施例1:
`` `JSの
VAR名= "ジョン・ドウ"
関数F1(){
VAR名=" ABC";
はconsole.log(名前);
}
F1();
`

+実施例2:
`` `JSの
VAR名= "ジョン・ドウ"
関数F1(){
にconsole.log(名前);
VAR名=" ABC";
}
F1();
`

+実施例3:
`` `JSの
VAR名= "ジョン・ドウ"
関数F1(){
にconsole.log(名前);
VAR名=" ABC";
}
F1();
`

+举例4:
`` `のJSの
VAR名= "张三"。
関数f1(){
return関数(){
にconsole.log(名);
}
VAR名= "ABC";
}
VARは、fn = F1()。
FN();
`` `

+举例5:
`` `のJSの
VAR名= "张三"。
関数f1(){
リターン{
発言:機能(){
はconsole.log(名);
VAR名= "ABC";
}
}
}
VARは、fn = F1()。
`` `

クロージャ###の問題
`JSの
関数fn(){
VARのA = 5;
リターン機能(){
++;
にconsole.log(A);
}
}
VARのFn = F1();
F1()、
F1( )、
F1();
`

問題の原因となる###の閉鎖
+機能が終了した後に、最新の変数値の範囲を保持

クロージャアプリケーションシナリオ###
+モジュラー
+変数破壊を防止


### ES6コンテンツ
+ 1、解体の割り当て
+ 2、機能の残りのパラメータ
+ 3、矢印機能
-矢印機能と正常な機能の違いは何ですか?(4時00分)
+ 4、Object.assignオブジェクト
+を5、プロミス
+。6、発電
+。7、非同期
+。8、クラス
+。9、Module1が

###プロトタイプ
多くの人々と+プロトタイプの開発はできないのですか?
- ES6 / 7/8発展とともに多くの人々は、あまり使用してい
ます(IE8、IE7を...)ES5を使用している場合、毎日、プロトタイプ記述する必要があり、前のコードの開発バージョンを-
-理解を理解することで、プロトタイプをオブジェクト指向のコアJS、プロトタイプを理解せずに、あなたはオブジェクト指向のコアを理解していません

おすすめ

転載: www.cnblogs.com/kathyhong/p/11229502.html