一日客语：中文：蛋 客语：唇

• ES6语法
• 是constructor function 一种语法糖
• 函式可以hoisting，但class不会
• class区块内会自动严格模式
• 定义方法无法被列举

学习内容

• Static methods 静态方法:义在类别层级上
• Object.getOwnPropertyNames()
• 原型继承：extend()
• super

之前原型写法像是这样结构，属性你想加到哪？自身？上一层？自带？

和原型链的关系，大概是没有你就没有我，为啥要学习class？写起来可以更优雅（误

但基本原型链概念还是要懂，要知道哪种方式属性是加在谁头上

都说是语法糖必须学一下

先复习一下

function Apple(name, size) {
    this.name = name; //自带属性
    this.size = size;
}

Apple.prototype.color = 'red';  //增加原型的属性

let apple = new Apple('taiwan', 16);
console.log(apple);

使用class语法的话

class 建立的类别名，实例物件使用new
格式：

class Name{

    constructor(,){
    //name建构子自带的property
    
    }
    //prototype要用的property
    
}

class Apple {
    constructor(name, size) {
        this.name = name;
        this.size = size;
    } //自带属性
    color() {
        return 'red'; //增加原型的属性
    }
}

let apple = new Apple('taiwan', 16);
console.log(apple);

使用关键子class建立一个Apple类别

this指新建立的物件实例，所以可以用this新增属性:

this.name 为某新物件的property name

new 呼叫 Apple类别，来创建新实例叫apple

console.log(apple instanceof Apple);//true
console.log(apple.name);//taiwan
console.log(apple.color());//red

Static methods 静态方法

static 方法是定义在类别层级上，可以用类别存取属性

class Apple {
     //自带属性
    constructor(name, size) {
        this.name = name;
        this.size = size;
    }
    //原型属性
    color() {
        return 'red'; 
    }
    static tree() {
        return 'tree';
    }
}

let apple = new Apple('taiwan', 16);
console.log(Apple.tree());//tree
console.log('tree' in apple); //false
console.log('tree' in Apple);//true 是类别Apple属性

使用getOwnPropertyNames()方法来看属性

Object.getOwnPropertyNames()

这个也可以看自身属性
return 指定物件自身属性名的阵列(包含enumerable属性但不包含Symbol值的属性名)

使用这个方法来看看

Apple有tree方法但apple没有tree方法 ，用Static只有Apple能存取tree属性

console.log(Object.getOwnPropertyNames(Apple));
//[ 'length', 'prototype', 'tree', 'name' ]
console.log(Object.getOwnPropertyNames(apple));
//[ 'name', 'size' ]

原型继承：extend()

在没有class语法前实现原型继承比较麻烦

方式：原型物件(父)放在继承者原型物件(子)再生成实例

原型继承使用方式：Day22:我要原型继承，constructor又不走丢

但使用此方式constructor会被改掉所以要使用Object.defineProperty()把constructor 给固定不让他属性给

修改，超麻烦的><

没关系，class帮你解决

class Animal {
    constructor(name) {
        this.name = name;
    }
}
//Pig要继承Animal
class Pig extends Animal {
    sleep() {
        return 'sleep';
    }
}

let piggy = new Pig('nini');

piggy是Pig function创建的物件有继承到Animal prototype的name属性

super

使用时机：继承的物件有constructor需要用上一层prototype 的property可以用super

class Animal {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
//Pig要继承Animal
class Pig extends Animal {
    constructor(name) {
        super(name);
        this.run = '跑跑跑向前跑';
    }
    say() {
        return '齁齁齁齁齁齁';
    }
}

let piggy = new Pig('nini', 18);
console.log(piggy.name);//nini
console.log(piggy.run);//跑跑跑向前跑
console.log(piggy.age);//没有用super 会是undefined
console.log(piggy.say()); //齁齁齁齁齁齁

实例物件piggy 的constructor仍然是 Pig function

只要了解Static 、extend、super 关键字
可以轻易的建立物件继承，也不用担心过去原型继承还要把property修改回来，赞赞

资料参考
0 陷阱！0 误解！8 天重新认识 JavaScript！
忍者开发技巧探秘第二版
[ES6教学] Class 的完整介绍 | Class 其实只是.....