ES 6の新機能???ES 6とは何か+30分でES 6のコアコンテンツを知ることができます(下)

ES 6の新機能???ES 6とは何か+30分でES 6のコアコンテンツを知ることができます(上)
文書ディレクトリ

一.関数パラメータの拡張

デフォルトパラメータ

不定パラメータ

矢印関数

使用に適したシーン

不適切なシーン

二.javascript標準関数this

newオブジェクト

指定オブジェクト

コンテキストオブジェクト

グローバルオブジェクトまたはundefined

三.矢印関数とthis

四.Classクラス

基礎用法

類の本体

方法

パッケージと継承

一.関数パラメータの拡張
既定のパラメータ
基本的な使い方

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

注記:関数のデフォルトパラメータを使用する場合、同じ名前のパラメータは許可されません.

//    
function fn(name,name){
 console.log(name);
}
 
//   
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
 console.log(name+","+age);
}

デフォルトパラメータは、パラメータが渡されていない場合、またはパラメータがundefinedの場合にのみ使用され、null値は有効な値伝達とみなされます.

function fn(name,age=17){
    console.log(name+","+age);
}
fn("Amy",null); // Amy,null

関数パラメータのデフォルト値には一時的なデッドスペースがあり、関数パラメータのデフォルト値式では、まだ初期化されていないパラメータ値は他のパラメータのデフォルト値として使用できません.

function f(x,y=x){
    console.log(x,y);
}
f(1);  // 1 1
 
function f(x=y){
    console.log(x);
}
f();  // ReferenceError: y is not defined

ふていパラメータ
不定パラメータは、変数名のような不確定パラメータの個数を表すために使用され、名前付きパラメータ識別子を付加して構成されます.名前付きパラメータは、パラメータグループの最後にのみ配置でき、不定パラメータは1つしかありません.
基本的な使い方

function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

矢印関数
矢印関数は、より簡潔な関数の書き方を提供します.基本構文は、パラメータ=>関数ボディ
基本的な使い方:

var f = v => v;
//   
var f = function(a){
 return a;
}
f(1);  //1

矢印関数にパラメータがない場合、または複数のパラメータがある場合は()で囲みます.

var f = (a,b) => a+b;
f(6,2);  //8

矢印関数関数体に複数行の文がある場合は、{}で包まれてコードブロックを表し、1行の文しかなく、結果を返す必要がある場合は、{}を省略して自動的に結果が返されます.

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

矢印関数でオブジェクトを返す場合は、コードブロックを区別するために()でオブジェクトをラップします.

//   
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
//    
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意:this、super、arguments、new.targetバインドはありません.

var func = () => {


  //          this   ，
  //     this      this   ，  Window 
  console.log(this)
}
func(55)  // Window 
 
var func = () => {    
  console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined

矢印関数体のthisオブジェクトは、関数を使用するオブジェクトではなく、関数を定義するオブジェクトです.

function fn(){
  setTimeout(()=>{
    //    ，this      fn    this   
    console.log(this.a);
  },0)
}
var a = 20;
// fn   this     {a: 19}
fn.call({a: 18});  // 18

コンストラクション関数として使用できません.つまりnewコマンドを使用できません.そうしないと、エラーが発生します.
使用に適したシーン
ES 6の前に、通常の関数を使用して各名前を大文字に変換します.

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(function(name) { 
  return name.toUpperCase();
});

矢印関数は次のことを示します.

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
  name => name.toUpperCase()
);

一般的な関数は、関数宣言または関数式ですが、矢印関数は常に式であり、全行程が矢印関数式であるため、式が有効な場合にのみ使用できます.

は変数に格納する、

.

はパラメータとして関数に渡され、

は、オブジェクトのプロパティに格納されます.

したがって、thisコンテキストを維持する必要がある場合は、矢印関数を使用します.
使用に適さないシーン
関数を定義する方法です.この方法にはthisが含まれています.

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
//    this         
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
//     this    Person1   

     this    
var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});

buttonのリスニング関数は矢印関数なので、リスニング関数の中のthisは定義時に外層のthisオブジェクト、すなわちWindowを指し、クリックされたボタンオブジェクトに操作できない.
二.javascript標準関数this
新オブジェクト

const mySundae = new Sundae('Chocolate', ['Sprinkles', 'Hot Fudge']);

sundaeというコンストラクション関数内のthisの値は、newを使用して呼び出されるため、インスタンスオブジェクトである.
指定されたオブジェクト

const result = obj1.printName.call(obj2);

関数はcall/applyで呼び出され、thisの値は指定されたobj 2を指します.call()の最初のパラメータがthisの指向を明確に設定しているためです.
コンテキストオブジェクト

data.teleport();

関数はオブジェクトのメソッドであり、thisはそのオブジェクトを指し、ここでthisはdataを指す.
グローバルオブジェクトまたはundefined
teleport();
ここではthisがグローバルオブジェクトを指し、厳格モードでundefinedを指す.
JAvascriptではthisは複雑な概念ですが、thisを詳しく判断するには、thisを参考にしてJS:thisとオブジェクトのプロトタイプを理解していません.
三.矢印関数とthis
通常の関数の場合、thisの値は関数に基づいてどのように呼び出すか、矢印関数の場合、thisの値は関数の周囲のコンテキストに基づいている、言い換えれば、thisの値は関数の外のthisの値と同じである.

function IceCream() {
    this.scoops = 0;
}

//   IceCream    addScoop   
IceCream.prototype.addScoop = function() {
    setTimeout(function() {
        this.scoops++;
        console.log('scoop added!');
        console.log(this.scoops); // undefined+1=NaN
        console.log(dessert.scoops); //0
    }, 500);
};


const dessert = new IceCream();
dessert.addScoop();

settimeout()に渡される関数は、new、call()またはapply()もコンテキストオブジェクトも使用されません.関数内のthisの値はグローバルオブジェクトでありdessertオブジェクトではないことを意味します.実際には、新しいscoops変数(デフォルトはundefined)が作成され、増加します(undefined+1の結果はNaN).
この問題を解決する方法の1つは、閉パッケージ(closure)を使用することです.

//     
function IceCream() {
  this.scoops = 0;
}

//   IceCream    addScoop   
IceCream.prototype.addScoop = function() {
  const cone = this; //    `this`   `cone`  
  setTimeout(function() {
    cone.scoops++; //   `cone`  
    console.log('scoop added!'); 
    console.log(dessert.scoops);//1
  }, 0.5);
};

const dessert = new IceCream();
dessert.addScoop();

矢印関数の役割は、settimeOut()の関数をクリップ関数に変更することです.

//     
function IceCream() {
  this.scoops = 0;
}

//   IceCream    addScoop   
IceCream.prototype.addScoop = function() {
  setTimeout(() => { //           setTimeout
    this.scoops++;
    console.log('scoop added!');
    console.log(dessert.scoops);//1
  }, 0.5);
};

const dessert = new IceCream();
dessert.addScoop();

四.Classクラス
ES 6ではclass(クラス)がオブジェクトのテンプレートとして導入され,classキーワードでクラスを定義できる.classの本質はfunctionである.
それは1つの文法糖と見なすことができて、対象の原型の書き方をもっとはっきりさせて、更に対象に向かってプログラミングする文法に似ています.
基本的な使い方
クラス定義
クラス式は匿名または名前を付けることができます.

//    
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
//    
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

クラス宣言

class Example {
    constructor(a) {
        this.a = a;
    }
}

注意ポイント:繰り返し宣言はできません.

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

注意要点クラス定義は昇格しません.これは、アクセス前にクラスを定義する必要があることを意味します.そうしないと、エラーが発生します.
クラス内のメソッドにはfunctionキーワードは必要ありません.メソッド間にセミコロンを付けることはできません.

new Example(); 
class Example {}

クラスのボディ
ツールバーのprototype
ES 6ではprototypeは依然として存在し,直接クラスからメソッドを定義することができるが,実際にはprototype上にメソッドが定義されている.上書き方法/初期化時の追加方法

Example.prototype={
    //methods
}

メソッドの追加

Object.assign(Example.prototype,{
    //methods
})

静的プロパティ

    ：class      ，            （ Class.propname ），      。 ES6    ，Class         ，      。

class Example {
//    
    static a = 2;
}
//       
Example.b = 2;

共通属性class Example{}Example.prototype.a=2;
インスタンスのプロパティ
≪インスタンス・プロパティ|Instance Properties|emdw≫:インスタンス・オブジェクト(this)に定義されたプロパティ.class Example { a = 2; constructor () { console.log(this.a); } }
nameプロパティ
クラスの後に続くクラス名(存在する場合)を返します.

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

方法
constructorメソッド
constructorメソッドはクラスのデフォルトメソッドであり、クラスのインスタンス化オブジェクトを作成するときに呼び出されます.

class Example{
    constructor(){
      console.log('  constructor');
    }
}
new Example(); //   constructor

オブジェクトを返す

class Test {
    constructor(){
        //          this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        //       
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

スタティツクメソッド

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

プロトタイプメソッド

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

インスタンスメソッド

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

クラスのインスタンス化
new
classのインスタンス化はnewキーワードを通過する必要があります.

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

インスタンス化オブジェクト共有プロトタイプオブジェクト

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1._proto_ == exam2._proto_); // true
 
exam1._proto_.sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

decorator
decoratorはクラスの動作を変更し、コードコンパイル時に機能する関数です.クラス修飾
パラメータ
最初のパラメータtargetは、クラス自体を指します.

function testable(target) {
    target.isTestable = true;
}
@testable
class Example {}
Example.isTestable; // true

複数のパラメータ-ネストされた実装

function testable(isTestable) {
    return function(target) {
        target.isTestable=isTestable;
    }
}
@testable(true)
class Example {}
Example.isTestable; // true

インスタンスのプロパティ
上記の2つの例は静的プロパティを追加しています.インスタンスプロパティを追加するには、クラスのprototypeで操作します.メソッド修飾
3つのパラメータ:target(クラスのプロトタイプオブジェクト)、name(修飾された属性名)、descriptor(この属性の記述オブジェクト).

class Example {
    @writable
    sum(a, b) {
        return a + b;
    }
}
function writable(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor; //     
}

修飾子の実行順序
外側から内側へ、内側から外側へ実行します.

class Example {
    @logMethod(1)
    @logMthod(2)
    sum(a, b){
        return a + b;
    }
}
function logMethod(id) {
    console.log('evaluated logMethod'+id);
    return (target, name, desctiptor) => console.log('excuted         logMethod '+id);
}
// evaluated logMethod 1
// evaluated logMethod 2
// excuted logMethod 2
// excuted logMethod 1

パッケージと継承
getter/setter

class Example{
    constructor(a, b) {
        this.a = a; //        set   
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this.a;
    }
    set a(a){
        console.log('setter');
        this.a = a; //       
    }
}
let exam = new Example(1,2); //      setter ，     RangeError
class Example1{
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this._a;
    }
    set a(a){
        console.log('setter');
        this._a = a;
    }
}
let exam1 = new Example1(1,2); //     setter ,      

getterメソッド

console.log(exam._a); // 1,       

getter

class Example {
    constructor(a) {
        this.a = a; 
    }
    get a() {
        return this.a;
    }
}
let exam = new Example(1); // Uncaught TypeError: Cannot set property // a of # which has only a getter

getter setter

class Father {
    constructor(){}
    get a() {
        return this._a;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
    set a(a) {
        this._a = a;
    }
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined
 
class Father1 {
    constructor(){}
    //         
    get a() {
        return this._a;
    }
    set a(a) {
        this._a = a;
    }
}
class Child1 extends Father1 {
    constructor(){
        super();
    }
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2

extends
クラスの継承はextendsによって実現されます.

class Child extends Father { ... }

super
サブクラスconstructorメソッドにはsuperが必要であり、thisの前に表示される必要があります.

class Father {
    constructor() {}
}
class Child extends Father {
    constructor() {}
    // or 
    // constructor(a) {
        // this.a = a;
        // super();
    // }
}
let test = new Child(); // Uncaught ReferenceError: Must call super 
// constructor in derived class before accessing 'this' or returning 
// from derived constructor

親コンストラクション関数を呼び出します.サブクラスのコンストラクション関数にのみ表示されます.

class Father {
    test(){
        return 0;
    }
    static test1(){
        return 1;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
}
class Child1 extends Father {
    test2() {
        super(); // Uncaught SyntaxError: 'super' keyword unexpected     
        // here
    }
}

親メソッドを呼び出し、superをオブジェクトとして、通常のメソッドでは、親のプロトタイプオブジェクトを指し、静的メソッドでは、親を指します.

class Child2 extends Father {
    constructor(){
        super();
        //         
        console.log(super.test()); // 0
    }
    static test3(){
        //         
        return super.test1+2;
    }
}
Child2.test3(); // 3

注意点
通常のオブジェクトは継承できません.

var Father = {
    // ...
}
class Child extends Father {
     // ...
}
// Uncaught TypeError: Class extends value #
 
//     
Object.setPrototypeOf(Child.prototype, Father);

参考資料:

https://www.jianshu.com/p/87008f4f8513
https://www.runoob.com/w3cnote/es6-tutorial.html

今回の紹介はここまでで、勉強が楽しいです!