ES6 —— 学习之五

1. Class 的基本语法

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

• 1）ES5 类的写法 && ES6 Class 写法
• ES5

function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}

Phone.prototype.call = function(){
    console.log("call");
}

let huawei = new Phone("huawei", 1000);
huawei.call();      //call
console.log(huawei);    //Phone {brand: "huawei", price: 1000} 

• ES6

class Phone{
// 构造方法 ，constructor 名字固定，不可修改
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }

    // class 里面方法的写法
    call(){
        console.log("call phone");
    }
}

let huawei = new Phone("huawei", 1000);
huawei.call();      //call phone
console.log(huawei);    //Phone {brand: "huawei", price: 1000} 

• 2）ES5 静态变量 && ES6 静态变量
• ES5

function Phone() { }

Phone.name = '手机';
Phone.call = function() {
    console.log("打电话");
}

Phone.prototype.price = 1000;

let p = new Phone();
console.log(p.name);    //undefined
//p.call();     //Uncaught TypeError: p.call is not a function
console.log(p.price);   //1000

• ES6

class Phone{
    static name = 'shouji';
    static call(){
        console.log('打电话');
    }
}
            
const shouji = new Phone();
//shouji.call();    //Uncaught TypeError: shouji.call is not a function
console.log(shouji.name);   //undefined
console.log(Phone.name);    //shouji

• 3）ES5 类的继承 && ES6 类的继承
• ES5

// 父类
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}

Phone.prototype.callphone = function(){
    console.log("打电话");
}

// 子类
function SmartPhone(brand, price, color){
    // Phone 对象调用call() 方法，将SmartPhone对象代替为Phone对象，使SmartPhone拥有Phone对象的属性和方法
    Phone.call(this,brand,price);
    this.color = color;
}

// 设置子类构造函数的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;

SmartPhone.prototype.playGame = function(){
    console.log('玩游戏');
}

let xiaomi = new SmartPhone('xiaomi', 1000, 'blue');

xiaomi.playGame(); //玩游戏
xiaomi.callphone(); //打电话

• ES6

// 父类
class Phone{
    constructor(brand,price) {
        this.brand = brand;
        this.price = price;
    }

    callphone(){
        console.log('打电话');
    }
}

// 子类
class SmartPhone extends Phone{
    constructor(brand, price, color) {
        super(brand,price);     // === Phone.call(this,brand,price);
        this.color = color;
    }
    playGame(){
        console.log('打游戏');
    }
}

const xiaomi = new SmartPhone('xiaomi', 1000, 'blue');
xiaomi.playGame();  //打游戏 
xiaomi.callphone(); //打电话

• 4）子类重写父类方法

// 父类
class Phone{
    constructor(brand,price) {
        this.brand = brand;
        this.price = price;
    }

    callphone(){
        console.log('打电话');
    }
}

// 子类
class SmartPhone extends Phone{
    constructor(brand, price, color) {
        super(brand,price);     // === Phone.call(this,brand,price);
        this.color = color;
    }
    playGame(){
        console.log('打游戏');
    }
    
    // 子类重写父类方法
    callphone(){
        console.log('视频通话');
    }
}

const xiaomi = new SmartPhone('xiaomi', 1000, 'blue');
xiaomi.playGame();  //打游戏 
xiaomi.callphone(); //视频通话

• 5）class中 getter 与 setter 的设置
• 在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class Phone{
    constructor() {}

    get price(){
        return 1000;
    }

    set price(newValue){
        console.log(`setter: ${newValue}`);
    }
}

let p = new Phone();
console.log(p.price);  //1000

p.price = 2000;     //setter: 2000

总结

<font color="#1ba784">ES5 的类实现与继承都没有这么直面，并且要求对于原型与原型链要熟练，写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大。而ES6 提供了更接近传统语言的写法，引用了 class，这样跟面向对象语言（比如 C++ 和 Java）差异缩小，也更加直面明了。</font>

2. 数值扩展

• 1）Number.EPSILON
• <font color="#1ba784">Number.EPSILON 是 javascript 表示最小精度，当两个数相减小于 Number.EPSILON ，则认为这两个数是相等的。应用：解决浮点数运算问题</font>

function equalsNum(a,b){
    if (Math.abs(a - b) < Number.EPSILON) {
        return true;
    }
    return false;
}

console.log(0.1+0.2 === 0.3);   // false
console.log(equalsNum(0.1+0.2, 0.3));   // true

• 2）Number.isFinite
• <font color="#1ba784">Number.isFinite 检测一个数是否是有限数</font>

console.log(Number.isFinite(100));  // true
console.log(Number.isFinite(100/0));    // false
console.log(Number.isFinite(Infinity)); // false

• 3）Number.isNaN
• <font color="#1ba784">Number.isNaN 检测一个数是否为 NaN</font>

console.log(Number.isNaN(100)); // false
console.log(Number.isNaN(NaN)); // true

• 4）Number.parseInt && Number.parseFloat
• <font color="#1ba784">Number.parseInt 将字符串转为整数，Number.parseFloat 将字符串转为浮点数</font>

console.log(Number.parseInt("100abc")); // 100
console.log(Number.parseFloat("3.1415abc"));    // 3.1415

• 5）Number.isInteger
• <font color="#1ba784">Number.isInteger 检测一个数是否为 整数</font>

console.log(Number.isInteger(100);  // true
console.log(Number.isInteger(1.5);  // false

• 6）Math.trunc
• <font color="#1ba784">Math.trunc 将数字小数部分抹除</font>

console.log(Math.trunc(1.5);    // 1

• 7）Math.sign
• <font color="#1ba784">Math.sign 判断一个数 的正负数 ，正数返回 1，负数返回 -1， 0 就返回 0 </font>

console.log(Math.sign(100));    // 1
console.log(Math.sign(0));  // 0
console.log(Math.sign(-100));   // -1

3.对象方法扩展

• 1）Object.assign
• <font color="#1ba784">Object.assign 可以将对象进行合并</font>

const config1 = {
    host: 'localhost',
    port: 3306,
    root: 'root',
    password: 'root',
    test: 'test'
}

const config2 = {
    host: '127.0.0.1',
    port: 33060,
    root: 'admin',
    password: 'admin',
    test2: 'test2'
}
// config2 对象将 config1 对象覆盖合并
const config3 = Object.assign(config1,config2);     
console.log(config3);
/* config3 对象：
    {
        host: "127.0.0.1"
        password: "admin"
        port: 33060
        root: "admin"
        test: "test"
        test2: "test2"
    }
*/