7.機能を拡張

拡張機能

パラメータ機能のデフォルト値

1.基本的な使い方

  1. ES6ため、関数のパラメータのデフォルト値を設定することはできません前に、機能は、デフォルト値のみにインビボで決定し、それを割り当てることができます

    //判断y是否存在,不存在则给它默认值 'world'
    function func(x,y){
        y ? y : 'world';
        console.log(x + y);
    }
  2. ES6 **は定義された書き込みパラメータの後に、すなわち直接、関数のパラメータのデフォルト値を可能にします

    • 注意:
    • 関数のパラメータは、デフォルトで宣言され、再度のconstを使用しないようにしましょう
    • デフォルトのパラメータ値は遅延評価され、それらが必要とされた場合にのみ、再計算されます
    function func(x,y = 'world'){
        console.log(x + y);
    }
    func('hello');           //helloworld
    func("hello","");        //hello

2.割り当てのデフォルト値と解体の組み合わせ

  1. パラメータとデフォルト値のデフォルト値は、解体割当と組み合わせて使用​​することができます

  2. 思考:以下の二つの方法、違いは何ですか

    function m1({x = 0,y = 0} = {}){
        console.log(`[${x},${y}]`)
    }
    
    function m2({x,y} = {x:0,y:0}){
        console.log(`[${x},${y}]`)
    }
    • 書かれた最初の、関数パラメータのデフォルト値は空のオブジェクトである、しかし、オブジェクト解体のデフォルト値を設定します
    • 二言葉遣い、関数パラメータのデフォルト値を設定するが、オブジェクトの解体のデフォルト値を設定しないでください
    m1();                //[0,0]
    m2();                //[0,0]
    
    m1({x:3});           //[3,0]
    m2({x:3});           //[3,undefined]
    
    m1({x:3,y:5});       //[3,5]
    m2({x:3,y;5});       //[3,5]
    
    m1({});              //[0,0]
    m2({});              //[undefined,undefined]

3.位置パラメータのデフォルト値

  1. 次の例を参照してください。

    function func(x=0,y){
        console.log(`[${x},${y}]`);
    }
    
    func();                  //[0,undefined]
    func(1);             //[1,undefined]
    func(,3);                //报错
    func(undefined,3);       //[0,3]
  2. 第二の例

    function func(x,y=0,z){
        console.log(`[${x},${y},${z}]`)
    }
    
    func();                  //[undefined,0,undefined]
    func(1)                  //[1,0,undefined]
    func(1,,2)               //报错
    func(1,undefined,2)      //[1,0,2]
  3. 二つの例上記に要約を求めることができます

    • パラメータが非尾のデフォルト値に設定されている場合は、実際には、このパラメータが省略されている方法は、少なくとも、未定義を指定するには、それ以外の場合はエラーを持っていません
    • 最終的な位置にあるデフォルトのパラメータは、次のように指定できない場合
  4. 要約すると、パラメータは、一般的に、最終的な表面のパラメータリストでは、デフォルト値を持っています

4.機能lengthプロパティ

  1. デフォルトパラメータ指定された条件、唯一のデフォルト値がない返されます長さ属性関数はパラメータの数であります

    (function func(x,y){}).length;           //2
    (function func(x=0,y){}).length;     //1

デフォルトパラメータの範囲

  1. 設定パラメータのデフォルト値たら、宣言した初期化関数は、パラメータが初期化が終了するまで、スコープが消え、別の範囲を形成します。それが表示されていないときに、この動作の構文は、デフォルトのパラメータ値を設定しないでください

    • 次の例:
    var x = 1;
    function foo(x,y=function(){x=2;}){
        var x = 3;
        y();
        console.log(x);
    }
    foo();                   //3
    console.log(x);          //1
    • 分析例:上記の例では、関数のパラメータは、単一のスコープを形成し、範囲内で、変数xを宣言し、yは変数を宣言し、デフォルト値はyの関数であり、点同じ内部関数xに最初の引数xの範囲。機能だけでなく、文Xの内側に、可変内部パラメータxは同じスコープではないので、同じ変数ではないので、Yを行った後、内部機能およびX変数の関数の外部変数が変更されないxは
    • 除去した後varが関数内で宣言した場合、内部変数xとxの最初のパラメータの機能は、同じ変数の関数であり、X 2内部Y end()メソッドの戻りを行います
    var x = 1;
    function foo(x,y=function(){x=2;}){
        x = 3;
        y();
        console.log(x);
    }
    foo();                   //2
    console.log(x);          //1

6.アプリケーション

  • あなたは、これらのパラメータが定義されていないとき、それは例外がスローされますスロー機能の例外を関数の特定のパラメータのデフォルト値を設定することができています
  • 定義されていないデフォルトのパラメータを設定し、パラメータは無視される説明

二つのパラメータ.rest

  1. ES6は、フォーム(...変数名)で、残りのパラメータを導入しました。これにより、引数オブジェクトを使用する必要がなくなり、余分なユーザー関数パラメータを取得します。

    • 注:残りの後に他のパラメータを持つことができない、それ以外の場合はエラーになります
    • 残りのパラメータは、それが配列に追加のパラメータの関数である、配列であります
    • lengthプロパティ機能は、残りのパラメータが含まれていません
    function func(...numbers){
        console.log(numbers);
    }
    func(1,2,3);     //[1,2,3]
    console.log(func.length)     //0

III。厳格なモード

  1. 開始からES5は、内部機能が厳密モードを設定することができます

    function func(){
        'user strict';
        //code...
    }
  2. ES6は、その機能を提供することは、デフォルトのパラメータ値、分割代入、または拡張演算子を使用して、少しの修正を行い、その後、内部関数は、それ以外の場合はエラーになり、厳格なモードに設定することはできません

    function func(x=10){
        'use strict'
        //...报错
    }

四の.nameのプロパティ

  1. name属性機能は、関数は、関数の名前を返します。このプロパティは、長いブラウザをサポートしてきたが、ES6でそれが標準に書き込まれる前に

    • 注意:
    • 変数に割り当てられた匿名関数は、ES5のnameプロパティが空の文字列が返されます場合は、ES6それは、変数名が割り当てられて返されます
    • あなたは、変数名に割り当てられた機能を持っている場合は、かどうかのnameプロパティ関数の元の名前を返しますES5 ES6、
    const f = function bar(){}
    f.name;      // bar
    • Functionコンストラクタリターンの例としては、name属性は、匿名であります
    (new Function).name          //annoymous

V.機能矢印

1.基本的な使い方

  • ES6は「矢印」(=>)定義関数を使用することができます
var f = v => v;

//等同于
var f = function(v){
    return v;
}
  • 関数がパラメータまたは矢印は、複数のパラメータを必要と必要としない場合は、一部の括弧のパラメトリック表現を使用することができます
var f = () => 5
//等价于
var f = function(){
    return 5;
}

var f = (x,y) => x + y
//等价于
var f = function(x,y){
    return x + y;
}
  • 矢印直接関数がオブジェクトを返す場合、オブジェクトは、括弧の外に追加する必要があり、そうでない場合はエラーになります
//报错
let getTempItem = id => {id:id,name:'temp'}

//不报错
let getTempItem = id => ({id:id,name:'temp'})
  • 機能は矢印と結合変数解体を使用することができます
let func = {first,lasst} => first + ',' + last

//等价于
function func({first,lasst}){
    return person.last + "," + person.last;
}
  • コールバック関数は、矢印を簡素化することができます
  • この関数は、矢印、残りのパラメータで使用することができます

2.使用上の注意

  1. オブジェクトが配置されているときに使用していないときにいた間、機能におけるこのオブジェクトが定義され、

  2. ない新しい、それ以外の場合はエラーを使用してインスタンス化することはできませんコンストラクタ、など

  3. 引数は、残りのパラメータの代わりに使用することができる、使用することはできませんオブジェクト

  4. 収量コマンドを使用することができないので、関数は、発電機機能矢印を使用することができません

  5. この矢印機能、詳細な説明

    • アロー機能はこれを所有していないので、これは常に矢印関数定義のオブジェクトを指す矢印の関数であり、
    • この関数矢印ポイントは固定にしてみましょう
    • これに加えて、以下の変数は、矢印の機能が存在しない引数です、スーパー、new.target

    例ショー

    var handle = {
        id:'123456',
        init:function(){
            document.addEventListener('click',event => this.doSomeThing(event.type),false)
        },
        doSomeThing:function(type){
            console.log('Handing' + type + 'for' + this.id)
        }
    };
    

    例分析:

    • この内部の矢印機能につながる矢印関数init関数、上記のコードを使用して、常に呼び出されたときにthis.doSomeThingを使用し、それ以外の場合は、オブジェクトハンドラを指して、エラーになります

3.使用しません

  1. 以下の例では、矢印の関数を使用すべきではありませんのでによる動的な矢印によってこの関数に、静的になり
    • オブジェクトのメソッドを定義します。
    • 必要性の動的今回

VI。テール呼び出しの最適化

1.テールコールは何ですか

  • 最後のステップで別の関数に関数を呼び出すことです
function f(x){
    return g(x);
}
  • 機能のノーリターンが実施例に従って呼び出していない、最後の呼び出しではありません
//非尾调用示例
function f(x){
    let y = g(x);
    return y;
}

function f(x){
    return g(x) + 1;
}

function f(x){
    g(x);
}

VII。末尾のカンマ関数パラメータ

  1. ES2017は、関数の最後のパラメータの後にカンマを持つことができることができ、これは許可されていません

概要

  1. ES6は、デフォルト値の関数として添加してもよく、およびデフォルト値が分割代入と共に使用することができます
    • デフォルト値は、最終表面関数のパラメータで最高の位置の関数である、または意味をなさないデフォルトパラメータを作るデフォルトパラメータへのパラメータ、で特に未定義使用します
    • 関数パラメータのデフォルト引数を使用して、長さが戻りの数を返しますデフォルト値なし
    • デフォルトパラメータ設定機能たら、単一のパラメータ範囲を形成します
  2. ES6残りは新しいパラメータであり、パラメータはすべての残りのパラメータは、関数パラメータリスト内で宣言されていない受け入れることができます、また、引数のオブジェクトを置き換えることができます
  3. 代入演算子と機能拡張を構造化代入、デフォルトのパラメータ値を使用し、内部厳密モードを指定することができない、そうでない場合はエラー
  4. name属性機能は、変数に割り当てられた機能にちなんで名付けられた関数名、取得した名称のプロパティまたは元の名前の関数を返すことができます
  5. 機能矢印、この関数は常に、それが都市の外部で定義されているオブジェクトを指す矢印で、この動的矢印関数が一定となる書き込み機能を簡素化することができるが、注目しています

おすすめ

転載: www.cnblogs.com/mapengfei247/p/11105062.html