• 深入理解ES6读书笔记4:扩展的对象功能


    一、对象字面量语法的扩展

    1、属性初始化器的简写
    ES6中函数的属性名和参数名相同时,可以省略属性名后面的冒号和值。
    因为当对象字面量中的属性只有名称时,JS 引擎会在周边作用域查找同名变量。

    //ES5及更早版本
    function createPerson1(name, age){
        return{
            name: name,
            age: age
        };
    }
    var person1 = createPerson1('张三', 20);
    console.log(person1.name, person1.age);//张三 20
    
    //ES6版本
    function createPerson2(name, age){
        return{
            name,
            age
        };
    }
    var person2 = createPerson2('李四', 21);
    console.log(person2.name, person2.age);//李四 21

    2、方法简写
    ES6对象字面量中方法名后面的冒号和function关键字可以省略。

    //ES5及更早版本
    var person1 = {
        name: "张三",
        sayName: function() {
            console.log(this.name);
        }
    };
    person1.sayName();//张三
    
    //ES6版本
    var person2 = {
        name: "李四",
        sayName() {
            console.log(this.name);
        }
    };
    person2.sayName();//李四

    3、需计算属性名
    需计算属性名是对象字面量语法的一部分,用方括号表示法

    var suffix = " name";
    var person = {
        ["first" + suffix]: "Nicholas",
        ["last" + suffix]: "Zakas",
        age: 20
    };
    //属性名包含空格,无法用小数点表示法来引用
    console.log(person["first name"]); // "Nicholas"
    console.log(person["last name"]); // "Zakas"
    console.log(person["age"]);//20
    console.log(person.age);//20

    二、新的方法

    1、Object.is() 方法
    比较两个值时,有相等运算符( == )和严格相等运算符( ===)。为了避免在比较时发生强制类型转换,一般使用后者。
    但严格相等运算符也并不完全准确,例如,它认为 +0 与 -0 相等,即使这两者在 JS 引擎中有不同的表示;另外 NaN === NaN 会返回 false,因此有必要使用 isNaN() 函数来正确检测 NaN。
    ES6引入的Object.is()方法要求二者类型相同并且值也相等。在许多情况下,Object.is() 的结果与 === 算符是相同的,仅有的例外是:
    +0 与 -0 不相等,NaN 等于 NaN。

    console.log(+0 == -0); // true
    console.log(+0 === -0); // true
    console.log(Object.is(+0, -0)); // false
    
    console.log(NaN == NaN); // false
    console.log(NaN === NaN); // false
    console.log(Object.is(NaN, NaN)); // true
    
    console.log(5 == 5); // true
    console.log(5 == "5"); // true
    console.log(5 === 5); // true
    console.log(5 === "5"); // false
    console.log(Object.is(5, 5)); // true
    console.log(Object.is(5, "5")); // false

    2、Object.assign() 方法
    混入( Mixin )模式是指在一次混入中,一个对象会从另一个对象中接收属性与方法。

    function mixin(receiver, supplier) {
        Object.keys(supplier).forEach(function(key) {
            receiver[key] = supplier[key];
        });
        return receiver;
    }
    
    function EventTarget() { /*...*/ }
    EventTarget.prototype = {
        constructor: EventTarget,
        emit: function() { /*...*/ },
        on: function() { /*...*/ }
    };
    var myObject = {};
    mixin(myObject, EventTarget.prototype);
    myObject.emit("somethingChanged");

    mixin() 函数在 supplier 对象的自有属性上进行迭代,并将这些属性复制到 receiver 对象(浅复制,当属性值为对象时,仅复制其引用)。这样 receiver 对象就能获得新的属性而无须使用继承。
    myObject 对象接收了 EventTarget.prototype 对象的行为,这给了它分别使用 emit()与 on() 方法来发布事件与订阅事件的能力。
    ES6的 Object.assign() 方法来完成同样的行为。
    上面代码可以改为

    Object.assign(myObject, EventTarget.prototype);

    三、重复的对象字面量属性

    当存在重复属性时,ES5 严格模式下会报语法错误,但ES6 中排在后面的属性的值会成为该属性的实际值。

    "use strict";
    
    var person = {
        name: "Nicholas",
        name: "Greg" // 在 ES6 严格模式中不会出错
    };
    console.log(person.name);//Greg

    四、自有属性的枚举顺序

    ES5 没有定义对象属性的枚举顺序,而是把该问题留给了 JS 引擎厂商。
    ES6 定义了对象自有属性在被枚举时返回的顺序。影响了Object.getOwnPropertyNames()与Reflect.ownKeys的返回属性,还同样影响了Object.assign() 处理属性的顺序。
    自有属性枚举时基本顺序如下:
    1. 所有的数字类型键,按升序排列。
    2. 所有的字符串类型键,按被添加到对象的顺序排列。
    3. 所有的符号类型键,也按添加顺序排列。

    var obj = {
    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1: 1
    };
    obj.d = 1;
    console.log(Object.getOwnPropertyNames(obj).join("")); // "012acbd"

    五、更强大的原型

    1、修改对象的原型
    ES5,对象的原型在初始化完成后会保持不变。
    ES6 通过添加 Object.setPrototypeOf() 方法,允许修改任意指定对象的原型。

    let person = {
        getGreeting() {
            return "Hello";
        }
    };
    let dog = {
        getGreeting() {
            return "Woof";
        }
    };
    // 原型为 person
    let friend = Object.create(person);
    console.log(friend.getGreeting()); // "Hello"
    console.log(Object.getPrototypeOf(friend) === person); // true
    // 将原型设置为 dog
    Object.setPrototypeOf(friend, dog);
    console.log(friend.getGreeting()); // "Woof"
    console.log(Object.getPrototypeOf(friend) === dog); // true

    2、使用 super 引用的简单原型访问

    let person = {
        getGreeting() {
            return "Hello";
        }
    };
    let dog = {
        getGreeting() {
            return "Woof";
        }
    };
    let friend = {
        getGreeting() {
            //旧的用法
            //return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
            //新的用法
            return super.getGreeting() + ", hi!";
        }
    };
    // 将原型设置为 person
    Object.setPrototypeOf(friend, person);
    console.log(friend.getGreeting()); // "Hello, hi!"
    console.log(Object.getPrototypeOf(friend) === person); // true
    // 将原型设置为 dog
    Object.setPrototypeOf(friend, dog);
    console.log(friend.getGreeting()); // "Woof, hi!"
    console.log(Object.getPrototypeOf(friend) === dog); // true
     
  • 相关阅读:
    Android内存优化5 了解java GC 垃圾回收机制3
    一起刑事案件法庭辩护 z
    辩护技巧总结——律师在刑事辩护中应注意的几个问题 z
    证据对抗、证据链标准 z
    里德九步审讯法 z
    WCF服务在高并发情况下报目标积极拒绝的异常处理 z
    C#EasyHook例子C# Hook 指定进程C#注入指定进程 z
    玄机论坛Socket类库源码 当前版本 2.6.3 更新日期:10-09/2015 z
    庭审全程文字实录 z
    庭审精彩语录整理 z
  • 原文地址:https://www.cnblogs.com/gdjlc/p/14528760.html
Copyright © 2020-2023  润新知