10,000 ワードのグラフィック JavaScript メモの要約

変数

• は定義されていますが、デフォルト値を定義する
• 場合は、VARで定義する必要があります
。
• ただし、スコープの問題が発生します)

変数宣言の改善

• すべて
• のコードを実行する前に、js には事前解析フェーズがあり、すべての変数の定義が事前に読み込まれます。
• 注: 変数宣言の昇格では、定義のみが昇格されますが、値は昇格されません。

console.log (a); // 最初に変数を使用します。 // 次に、変数の

データ型

• 。

  • • すべての数値部分は

    数値

    です。
    • 大きいか小さいか、整数か浮動小数点数か、正か負かは関係ありません。これらはすべて数値型の大きいか小さい数です
    • (
    • 絶対値は小さいです)。 3e8は3^8
    • 2 進値は0bで始まり、8 進数は0で始まり、16 進数は0xで始まります。
    • NaNは数値ではありません。つまり、「数値ではありません」ですが、数値型の値です (算術演算では、結果が数値は指定できません。多くの場合、結果は NaN、NaN == NaN、結果は false になります)
    • Infinity Infinite または Infinitesimal

  • String

    • string 共通メソッドメソッド
    を抽出しますlice() ) 文字列を大文字に変更します

    function	charAt
    ()	指定された位置を取得します 文字 (範囲外) は空の文字列)
    部分文字列()	部分文字列を抽出します
    substr()	文字
    列	部分文字列を抽出します
    toUpperCase	(
    toLowerCase()	文字列を小文字に変更します
    indexOf()	文字列 (パターン マッチング) を取得します

    • substring(a, b) a から始まり b で終わる部分文字列 (b を除く)。2 番目のパラメータが省略された場合、返される部分文字列は文字列の末尾に移動します。a > b の場合は、
    • substr(a
    の前にある 10 進数に自動的に調整されます)。
    • , b)、長さ b の部分文字列は a から始まります。2 番目のパラメータが省略された場合、返される部分文字列は文字列の末尾に移動します。a は逆数の位置を示す、
    • slice(a, b ) A
    になります。
    • a から始まり b で終わる部分文字列 (b を除く)、両方のパラメータは負の値にすることができます。a は b より小さい必要があります。それ以外の場合は結果はありません (空の文字

  • 列

  • )

    • 。独自の値は 1 つだけです:

  • Null。

    • オブジェクトの破棄、配列の破棄、またはイベント リスナーの削除が必要な場合は、通常、それらを null に設定します

• :

  • オブジェクト
  • 配列
  • 関数
  • RegExp
  • Date
  • Map
  • Set
  • ...

Typeof 演算子は次

のとおりです

値または変数の検出に使用されます。 Type

typeof 5; // 文字列

データ型変換

では **Number ()**Function を使用します

// String --> Number Number('123') // 123.4Number('123 year'); ('2e3'); // 2000Number(''); // NaN// ブール値 --> 1Number(false); //未定義とnull  - >数字（未定義）; // 0

**

parseint（）**

文字

parseInt('3.14 '); // 3parseInt('3.14 は '); // NaNparseInt('3.99'); // 3

**parseFloat()** 関数文字列をフローティングポイントに変換して

、非数学的なポイント

パーセフロート（ '3.14'）の後にすべての文字を切り捨てます（ '3.14 is pi'）;

3.14

）

;

弦。科学的表記と非科学的数字は

、123 '123'（123.4）; // 'NaN'String(Infinity); // 'Infinity'String(true); // 'true'String(unknown); // 'undefined'String（null）; //' null '

** function

// numbers-> boolean values 0およびnanはfalseに変換され、他のものはTrueBoolean（123） ; // falseboolean（nan）;値はtrueに変換されます。 unknown); // falseBoolean(null) ; // false

**prompt()** 関数は入力ボックスをポップアップします

var num = prompt('最初の数字を入力してください'); // 戻り値は文字列式です

。演算子

暗黙的な型変換

オペランドが数値型でない場合、JavaScript は自動的にオペランドを数値型に変換します。

3 * '4' //

を呼び出すことです

12true + true // 2false + 2 // 23 * '2 Days' // nan

tofixed（a）メソッドは小数を保持します

。 ceil() // 切り上げ Math.floor () // 切り捨て

関係演算子

=== // すべて等しい!== // すべてが等しいわけではない // 2 つの等号 == 演算子は値の型を比較しません。暗黙的な変換後の値を比較します 等しいか? 1 == true // true1===true // false0 == false // true0 === false // false0 == 未定義 // false0 ===未定義// false undefined == null // true defined == = null // false

**関数変数値がnanであるかどうかを決定します

が、そのメカニズムは以下です数字（）に渡された変数の実行結果はnan、isnan（）関数は真の

短絡評価

a && baが真で、aはfals、値はa

|| baですtrue、値は a、a は false、値は b

論理演算の優先順位: 非--> および- -> または

総合演算 演算順序: 非--> 数学的演算 --> 関係演算 --> 論理演算の

流れ制御ステートメント

乱数関数Math.random()

区間 [a, b] の整数を取得します。式は parseInt(Math .random() * (b - a + 1)) + a; となり

ます

。

a '、' b '、' c '、' d ']; var array（' a '、' c '、' d '）;長さ4の項目は

未定義

です

今回は、サブスクリプトは範囲外であり、エラーは報告されませんが、配列は展開され、添え字6は4、中央は空の配列です

。isarray（）メソッドを使用して配列

関数

機能定義

////////通常の関数 fun() {
    // function bodyステートメント} //匿名関数var fun = function（）{{
    // function body statement}

関数宣言

fun（）;表現、プロモーション機能はありません（）;
    alert（ "function is exected"）;}

関数の優先順位のプロモーション

//機能宣言プロモーションの後、プロモートされた関数funを上書きすることはできません。
    アラート('A');}関数楽しい() {
    

1. Alert
2. （

'b'）

;

パラメーター

1. 正式
2. な

1. パラメーターをundefinedにしていません

1. 0から始まり、長さの属性と同様に、四角い括弧を使用して、オブジェクトの特定の属性値にアクセスできますが、Arrayのメソッドを呼び出すことはできませ

ん省略は

機能の外側です。変数はグローバル変数であり、VARが宣言さ

れた変数は

、

VARで宣言された変数です。

、両方とも、VARで宣言された変数の属性の1つであり、VARなしで宣​​言された変数を削除できます。

戻り値

関数 sum(a, b) {
    

b

;}var result = sum(3, 5); // 関数が値を返さ

ない場合、出力される結果は未定義です。

) この関数のメソッド

a

、 b は、それぞれ配列内の先頭と末尾の項目を表します。交換する必要がある場合は、正の数値が返されます。それ以外の場合は、負の数値が返されます。

55];
    if (a > b) {
        1を返します。
    }
    return -1;}）

;

アレイディープクローン

var arr1

= [1、2、3、[4、5]];
    var 結果 = [];
    for (var i = 0; i < arr.length; i++) {
        if（array.isarray（arr [i]））{
            result.push（deepclone（arr [i]））;
        } それ以外 {
            result.push(arr[i]);
        }
    }
    return result;}

関数内で定義されて

いる

ローカル関数は

（）{
    関数内（）{
        console.log（ 'hello'）;
    }
    内側（）は、

の

ネストである

スコープチェーンです

() {
    var c = 30;
    関数 inner() {
        var a = 40;
        var d = 50;
        console.log（a、b、c、d）;
    inner（）;} fun（）;

閉鎖

は、関数が宣言された環境

を「覚えている」ことができます

。

呼び出されると、それが定義された環境の変数にアクセスすることもできます。js

では、関数が作成されるたびにクロージャーが作成されますが、多くの場合、クロージャー機能ではその関数が必要になります。

閉鎖の関数を

1. 観察

できるように「別の場所で」

。

1. 外側の関数が呼び出された後にクリアされます。

   function fun（）{
       変数名 = 'niubi';
       関数innerfun（）{
           アラート(名前);
       }
       return innerfun;} var Inn = fun（）; inn（

2. ）

   ;
       変数 a = 0;
       戻り関数() {
           アラート(a);
       }}var getA = fun();getA();

関数 fun();
    変数 a = 0;
    戻る {
        getA: 関数 () {
            を返します。
        }、
        追加: 関数 () {
            a++;
        }、 
        pow: 関数 () {
            a *= 2;
        }
    };} var obj = fun（）; console.log（obj.geta（））; obj.add（）

;メモリリークにつながります。

すぐにIifeの

特別

な書き込み方法

を

;+ function（）{
    アラート(1);}();-function() {
    Alert（1）;}（

1. ）

   ;
       if（<18）{
           「子供」を返します。
       } それ以外 {
           if（sex == 'male'）{
               'mr.'を返します。
           } それ以外 {
               'ms'を返します。
           }
       

}

1. ）

2. ;

i ++）{
    arr.push（function（）{
        アラート（i）;     
    }）;} arr [2]（）; //ポップアップ5

ソリューション：

var arr = []; for（var i <5; i ++）{
    （関数（i）{
        arr.push（function（）{
            アラート（i）;
        });
    }）（i）;} arr [2]（）; //ポップアップ2

dom

nodeType

の特定のタイプを表示できます

主

に

ドキュメントオブジェクトにカプセル化されている要素ノード

に

アクセスします

ノードツリーは、

な方法

document.getElementById()

ページ上に同じ ID を持つ要素がある場合、最初の

<p id = "box

">私はボックスです</p><p id = "para">私は段落です</p>

var box = document.getElementById('box'); var para = document.getElementById('para');

getElementsByTagname（）

アレイはトラバーサルに便利であるため、

ページノードに指定されたタグ名が1つしかない場合でも、

要素ノードをバッチで操作できます。 getElementsByTagname（）メソッドを呼び出して、その内部の特定のクラスの要素ノードを取得

<P>段落</p> <p>段落</p> <p>段落</p> <p>段落</p>

var

ps = document.getElementsByTagname（ 'P'

）

; /p> <class = "spec"> box </p>

var

spec_ps.getelementsbyclassname（ 'spec'）

;

条件、最初の要素のみを取得できます

<p id = "box1">
    <p>段落</p>
    <p class = "spec">段落</p>
    <p>段落</p>
    <p>段落</p> </p>

var

document.queryselector

（ '＃box1 .spec'）

;

セレクターを

実行するには、

window.onload = function（）{}イベントを使用します（ウィンドウオブジェクトにイベントリスナーを追加します。ページが読み込まれていることを示します）。実行

さ

れ

テキストノードもノードに属しているため、一般にテキストノード干渉（要素ノードのみを使用して）を除外して

、共通ノード関係関数

<body>
    <p id = "box1">
        <p>段落</p>
        <p class = "spec">段落</p>
        <p>段落</p>
        <p>段落</p>
	</p>
    <スクリプト>
        var box = document.getElementById（ 'box1'）;
        var spec = document.getElementsByClassName（ 'Spec'）;
        //子供の関数GetChildren（node）に似た、要素のすべての子要素ノードを返す関数をカプセル化する{
            var children = [];
            //ノードのすべての子ノードをトラバースし、各バイトのnodeType属性が1かどうかを判断します
            // 1の場合、結果配列を（var i = 0; i <node.childnodes.length; i ++）{
                if（node.childnodes [i] == 1）{
                    children.push（node.childnodes [i]）;
                }
            }
            子供を返す;
        }
       
        //以前のエレメント機能と同様に、以前の要素の兄弟ノードを要素の兄弟ノードを返すことができる関数をカプセル化しますgetElementPrevsibling（ノード）{
            var o = node;
            while（o.previoussibling！= null）{
                if（o.prebioussibling.nodetype == 1）{
                    // ループを終了し、return o.previousSibling; を見つけます。
                }
                o = o.previoussibling;
            }
            null を返します。
        }
        
        //要素関数のすべての要素兄弟ノードを返すことができる関数をカプセル化しますgetallelementionbling（node）{
            vars prevs = [];
            var nexts = [];
            var o = node;
            while（o.previoussibling！= null）{
                if（o.previoussibling.nodetype == 1）{
                    prevs.unshift（o.previoussibling）;
                }
                o = o.previoussibling;
            }
            o = node;
            while（o.nextsibling！= null）{
                if (o.nextSibling.nodeType == 1) {
                    nexts.push（o.nextsibling）;
                }
                o = o.nextsibling;
            }
            prevs.concat（nexts）;
        }
    </script> body>

要素ノードのコンテンツ

を使用して

• 、HTML構文のノードにコンテンツを

  設定

• でき

  ます

プレーン

• テキストの形のノード

    <p id = "box"> </p>
    <スクリプト>
        var obox = document.getElementById（ 'box'）;
        obox.innerhtml = '<ul> <li>ミルク</li> <li>コーヒー</li> </ul>';プレーンテキスト</script> </body>

要素ノードのCSSスタイルを変更することは、

インラインスタイルの属性を設定することと同等です

。 .backgroundimage = 'url（images/1.jpg）'; obox.style.fontsize = '32px

'

;

oimg.src = 'images/2.jpg'

を

変更

します

    <p id = "box"> </p>
    <スクリプト>
        var box = document.getElementById（ 'box'）;
        box.setattribute（ 'data-n'、10）;
        var n = box.getattribute（ 'date-n'）;
        アラート（n）;
    </script> </body>

ノード作成

、

var op = document.createelement（ 'p'）

を使用してHTML要素を作成します

また、DOMツリーにマウントされておらず、

appendChild（）またはinsertbe（）メソッドを使用して、DOMツリーに

既にあるノード

を挿入する必要があります。 AppendChild（

）

メソッドは、その内部にOrphanノードをマウントし、最後の子ノード

親ノード

になります。

は

その中に入り、「ベンチマークチャイルドノード」の前にノードの親ノードになり

ます

。

、新しい親ノードを持っているNode.InsertBefore（すでに親を持つノード、ベンチマークの子ノード）

に移動します

ノードは、2つの場所で
ノードを削除する
ことが

でき

ませ

ん

。

は、

ノードをクローン化できます

var orphan node = old node.cloneNode();

イベント

• 共通マウスイベント監視

の

onmouseenter はバブルしません、onmouseover バブリング

• 共通キーボードイベント監視イベント

• 共通フォーム イベント リスニング

• 共通ページイベントリスナー

ネストされたときにイベントリスニングのボックス実行順序を

。
    <p id = "box2">
        <p id = "box3"> </p>
    </p> </p> <スクリプト>
    var obox1 = document.getElementById（ 'box1'）;
    var obox2 = document.getElementById（ 'box2'）;
    var obox3 = document.getElementById（ 'box3'）;
    
    obox1.onclick = function（）{
        console.log（ 'box1'）;
    };
    
    obox2.onclick = function（）{
        console.log（ 'box2'）;
    };
    
    obox3.onclick = function（）{
        console.log（ 'box3'）;
    };
    //最も内側のボックスをクリックすると、伝播方向は内側から外側にあります</script>

イベント伝播

イベントの伝播は次のとおりです。最初から外側から内側に、次に内側から外側まで（最も内側のレイヤーは最初にキャプチャされず、次にバブルがかかりますが、コードを書く順序に基づいて決定されます。同じ名前のボックス同じ名前の2つ以上のイベントがある場合、同じ段階と順序に関連しています。

onxxxx（dom0レベルイベントモニタリング）はバブルステージのみを監視できます。そのため、観察された結果は内側から外側までの

addeventlistener（）メソッド（DOMレベル2イベント監視）

obox.addeventlistener（ 'click'、function（）{
 

イベント

処理

機能があります）

このイベントの詳細をカプセル化するオブジェクトである正式なパラメーターは、

通常、単語イベントまたは文字E

obox.onmousemove = function（e）{
 //オブジェクト e はこのイベントの「イベント オブジェクト」です};

オブジェクト関連属性

• マウス位置関連属性

このイベントがトリガーされたときのマウス位置の属性 属性

• e .charCode および e.keyCode 属性

e.charCode 属性は、通常、ユーザーが入力した文字の「文字コード」を表すために onkeypress イベントで使用されます。

文字	コード
番号 0 ～ 数字 9	48 ～ 57
大文字 A ～ Z	65 ～ 90
小文字 a ～ z	97 ～ 122

e.keyCode 属性は通常、押され

た

キーの「キーコード」を表すために onkeydown イベントと onkeyup イベントで使用されます。ユーザーによる

キー	コード
番号 0 ～ 数字 9	48 ～ 57
文字部分の大文字と小文字 a ～ z	65 ～ 90
四方向キー ← ↑ → ↓	37、38、39、40
Enter キー	13
スペースキー	32

デフォルトイベントの防止

e .preventDefault() メソッドは、イベントによって生成される「デフォルト アクション」を防止するために使用されます

e.stopPropagation() メソッドは、イベントが伝播し続けることを防止するために使用され

• ます

。

• イベントをバッチで追加すると、モニターが多すぎてメモリが大量に消費されます。

委任により

、一定量のシステム メモリが消費されます。また、イベントをバッチで追加すると、リスナーが多すぎてメモリが大量に消費されます。メモリ消費（バッチに追加する必要がある同様の要素が多数ある場合、イベントの委任はメモリオーバーヘッドを削減することができます

）

。祖先の要素への泡立ちイベント。

ツリーに新しく追加された要素を使用して、イベントリスニング

関連の

タイマー

setinterval（function（）{{function（）{

functionの固定間隔を繰り返し呼び出すことができます。

    //この関数は、固定間隔で自動的に呼び出されます}、2000）;関数 setInterval(function (a, b) {
    //正式なパラメーターAの値は88で、正式なパラメーターBの値は66}、2000、88、66）。また、setintervalvar a = 0;
    

（

++ a）;}; setinterval（fun、1000

）

;

) {
    }、2000）; //ボタンをクリックしたら、タイマーをクリアobl.onclick = function（）{{
    

ClearInterval

（

タイマー

）;

さ

、

ClearTimeOut（タイマー）;

「実行されます。（コールバック）

setInterval（）とsetimeout（）は2つの非同期ステートメント

setimeout（function（）{
    

（

'a'）;}、2000）

;関数最後に、2回目の実行は、実行された

[strotling（）{）{trueの関数

    //ロックが閉じている場合、（！ロック）が実行されない場合、戻ります。
    //関数のコアステートメント// lock lock = false;
    
    //指定されたミリ秒数が経過した後にロックを開きます setTimeout(function () {
        lock = true;
    }、2000）;}

BOM

は

、

JSがブラウザウィンドウと対話するインターフェイスです。

1. を

備え

た

ブラウザーです

var a

1. =

2. 10

   ;

3. setinterval（）、alert（）、その他の組み込み関数などの

   方法は

   、一般にウィンドウのメソッドウィンドウのメソッド

ウィンドウサイズ関連プロパティ

スクロールバーなしでウィンドウの幅を取得するには、document.documentlement.clientwidthththを使用します。

が

後

、ウィンドウでのイベントがトリガーされます

。

document.scrolltopの順になったdocumentelementは、

より

良いブラウザの互換性

を

表します。

documentlement.scrolltopは読み取り専用ではありません。Scrollyは、

窓

をスクロールした後、windol.oscroll.addeventlistener（ 'scroll'）を使用できますイベントハンドラー機能

ナビゲーターオブジェクトをバインドします。Navigator

識別属性を含むナビゲーターを取得できます。

履歴

ウィンドウ.historyオブジェクトは、ブラウザ

の

を操作

（

-1

（

）;

= 'http：//www.baidu.com';

• windoce.location

  。 . The parameter true means that

  window.location.reload(true) is forced to load from the server;

• GET request query parameters

  The window.location.search attribute is the current browser's GET request query parameter

offsetTops attribute.

This attribute indicates the vertical distanceこの要素から先祖の要素

を

配置

する

まで

値

の間のマッピング関係を表す「キー価値ペア」のコレクション。

    名前：「Xiao Ming」、
    年齢：12、
    セックス：「男性」、
    

• 趣味

• ：

」

、「プログラミング」};

• 属性名はJS識別子命名規則に準拠していません。

• 属性名が変数の形式で保存される場合は、

  var obj = {

  形式の角括弧を使用する必要があります。

      A：1、
      B：2、
      

;

（

• obj.key）;

    A：10}; obj.b

=

40

;

    A：1、
    b：2}; obj.aを削除

し

ます

。

    名前：「Xiao Ming」、
    年齢：12、
    セックス：「男性」、
    趣味：[「フットボール」、「水泳」、「プログラミング」]、
    「お気に入りの本」：「Shuke and Beta」、
    sayhello：function（）{
        console.log（ 'hello'）;
    }};

オブジェクト

は、... in ... loopを使用する必要がありますが、オブジェクトの各キーを通過します

（var k in obj）{
    console.log（ ''属性 ' + k +'の値は ' + obj [k]）;}

オブジェクトの深いクローン

var obj1 = {
    A：1、 
    B：2、 
    C：[33、44、{
        M：55、
        n：66、
        P：[77、88]
    }]}; function deepclone（o）{
    if（array.isarray（o））{
        var result = [];
        for（var i = 0; i <o.length; i ++）{
            result.push（deepclone（o [i]））;
        }
    } else if（typeof o == 'object'）{
        var result = {};
        for（var k in o）{
            result [k] = deepclone（o [k]）;
        }
    } それ以外 {
        var result = o;
    }
    

の

結果は、

関数のコンテキスト関数

で

使用

関数

は

、

）

;

​
    アラート（this.c + this.m + this.e + b1 + b2）;} sum.call（xiaoming、5、3）; 3];

1. （
   

   この）このオブジェクト
2. は、関数ボディの
3. ステートメントが機能を実行し、function function

fun（）{ / / {}これは、この空のオブジェクトを指しますthis.a = 3;
    this.b = 5; // {A：3、B：5}
    // return this;} var obj = new Fun（）; console.log（

obj

）

;
    this.name = 名前;
    this.age = 年齢;
    this.sex = sex;} var xiaoming = new People（ '小明'、12、 'male'）; var xiaoming = new people（ '小红'、10、 'female'）; var xiaogang = new People（ '小「ギャング」、「MALE」を

• 使用して、この関数はコンストラクターを
• 使用する
必要があります。
• 新しいオブジェクトを構築する」、その内部のステートメントは、新しいオブジェクトにいくつかのプロパティとメソッドを追加し、オブジェクトの初期化を完了し

、関数

担当者（名前、年齢、性別）を追加します{
    this.name = 名前;
    this.age = 年齢;
    this.sex = sex;
    this.sayhello = function（）{
        console.log（ 'i am' + this.name）;
    

xiaoming

=

new People（ 'xiaoming'、 'male'）; xiaoming.sayhello（）

デフォルトでは、コンストラクター属性が関数に戻る

コンストラクターのプロトタイプは、インスタンスのプロトタイプです

プロトタイプチェーン検索

インスタンスは、プロトタイプのプロパティとメソッドにアクセスできます

。
    this.name = 名前;
    this.age = 年齢;
    this.sex = sex;} people.NETIONALITY = 'China'; （xiaoming .nationality）;

hasownProperty（）

このメソッドは、オブジェクトが特定のプロパティまたはメソッド

xiaOmperty（ 'name'）

（

'

'

）;

'

//

xiaomingのtrue'sex' // xiaomingのtrue'national性 '

メソッドの関数は、メモリの無駄を引き起こします。これは、プロトタイプにメソッドを記述することで解決できます。

関数担当者（名前、年齢、性別）{
    this.name = 名前;
    this.age = 年齢;
    this.sex = sex;} people.prototype.sayhello = function（）{
    

（

'xiaoming'、 'male'）; xiaoming.sayhello（）;

配列プロトタイプチェーン

継承は

1. 、プロトタイプチェーンの助けを借りて実装され、

学生のプロトタイプ属性を親クラスのインスタンスに指しさせ、学生のプロトタイプに学生方法を追加します。

• を
• 介し

た継承の問題。

• スーパークラスによって定義された多くの属性。

• サブクラスの

2. コンストラクターは

、プロトタイプの参照型値とサブクラスの不可能なコンストラクターによって引き起こされる問題を十分に解決するために

、

「偽のオブジェクト」または「古典的な継承」として使用されます

。
    this.name = 名前;
    this.sex = sex;
    this.age = 年齢;
    this.arr = [1、2、3];}関数の学生（名前、性別、年齢、学校、SID）{
    people.call（これ、名前、性別、年齢）;
    this.school = school ';
    

new

3. ming

'、 'male'、 'school'、123456）。

継承と呼ばれる相続財産の

欠点：

継承を組み合わせた最大の問題は、状況に関係なく、スーパークラスコンストラクターが2回呼び出されることです。

プロトタイプは、

オブジェクトを継承します。これは、指定されたオブジェクトに基づいてプロトタイプ（ie9）

var obj2 = object.create（obj1）

、{//いいえ。2つのパラメーターはオブジェクトであり、追加する属性はd：{//属性の値はまだオブジェクト値です：99 //値は99です
    } // 可以遮蔽原型上的同名属性});

When there is no need to "spend a lot of effort" to create a constructor, but you just want the new object to be "similar" to the existing object, you can use Object.create(), which is called the compatibility of prototypal inheritance

Object.create() The unique writing method

implements Object.create() in lower version browsers

// A function written by Douglas Crockford // The function function is to use o as the prototype to create a new object function object(o ) {
    // 创建一个临时构造函数function F() {}
    // 让这个临时构造函数的prototype指向o, 这样它new出来的对象，__proto__指向了o
    F.prototype = o;
    return new F();}

寄生式继承

编写一个函数，它可以“增强对象”，只要把对象传入这个函数，这个函数将以此对象为“基础” 创建出新对象，并为新对象赋予新的预置方法

function f(o) {
    var p = Object.create(o);
    p.display = function () {
        console.log(111);
    }
    return p;}

缺点：

由于不能做到函数复用而降低效率（方法没有写到prototype上）

寄生组合式继承

通过借用构造函数来继承属性，通过原型链的混成形式来继承方法

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype);
    subType.prototype = prototype;
}

// 父类function People(name, sex, age) {
    this.name = 名前;
    this.sex = sex;
    this.age = 年齢;
}

People.prototype.sayHello = function() {
    console.log("hello");
}
People.prototype.sleep = function () {
    console.log("sleep");
}

// 子类function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school;
    this.sid = sid;
}

inheritPrototype(Student, People); // 让Student类的Prototype指向以People.prototype为原型的一个新对象Student.prototype.exam = function () {
    console.log("exam");
};

var xiaoming = new Student('小明', '男', 12, '学校', 123456);

instanceof运算符

用来检测”某对象是不是某个类的实例“

xiaoming instanceof Student// 底层机理：检查Student.prototype属性是否在xiaoming的原型链上（多少层都行，只要在就行）

内置构造函数

JavaScript有很多内置构造函数，比如Array就是数组类型的构造函数，Function就是函数类型的构造函数，Object就是对象类型的构造函数

内置构造函数非常有用，所有该类型的方法都是定义在它的内置构造函数的prototype上的，我们可以给这个对象添加新的方法，从而拓展某些类型的功能

内置构造函数的关系

Object.prototype是万物原型链的终点，JavaScript中函数数组皆为对象。

任何函数都可以看做是Function “new出来的”，Object是函数，所以它也是Function类的对象

包装类

包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

Math对象

Math.pow()
Math.sqrt()
Math.ceil() // 向上取整Math.floor() // 向下取整Math.round() // 四舍五入Math.max() // 参数列表的最大值Math.min()

// 计算arr数组的最大值var arr = [3, 6, 9, 2];
var max = Math.max.apply(null, arr);

Date对象

new Date() // 得到当前时间的日期对象newDate(2020, 11, 1) // 第二个参数从0开始算new Date('2020-12-01')

常见方法

时间戳

通过getTime()方法或者Date.parse()函数可以将日期对象变为时间戳

通过new Date(时间戳)的写法，可以将时间戳变为日期对象

var d = new Date();var timestamp1 = d.getTime();var timestamp2 = Date.parse(d);

正则表达式

正则表达式（regular expression）描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求创建正则表达式

1. 使用/内容/的语法形式

var str = '123456';var regxp = /^d{6}$/;if (regxp.text(str)) {
	alert('符合规则');} else {
	alert('不符合规则');}

2. new RegExp('内容')的形式

var regxp2 = new RegExp('^\d{6}$')

元字符

不管一个符号有没有特殊意义，都可以在其之前加上一个以确保它表达的是这个符号本身

方括号表示法

使用方括号，如[xyz]，可以创建一个字符集，表示匹配方括号中的任意字符

/^[by]d{7}$/

使用短横-来指定一个字符范围， ^表示否定

量词

修饰符

也叫标志（flags），用于使用正则表达式实现高级搜索

var re = /m/gi;var re = new RegExp('m', 'gi');

正则表达式相关方法

字符串的相关正则方法

var str = 'abc123def4567ghi89';
     
// search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
var result1 = str.search(/d+/g);
var result2 = str.search(/m/g);
console.log(result1); // 3
console.log(result2); // -1

// match()方法，返回查找到的数组，找不到就是null
var result3 = str.match(/d+/g);
console.log(result3); // ["123", "4567", "89"]

// replace()方法，进行替换var result4 = str.replace(/[az]+/g, '*'); // 注意+表示贪婪的，尽可能多的连续匹配小写字母console.log(result4); // *123*4567*89

// split()方法，进行字符串拆为数组var result5 = str.split(/d+/g);
console.log(result5); // ["abc", "def", "ghi", ""]