ES6 扩展对象的功能性

12 篇文章 1 订阅
7 篇文章 0 订阅
/**
          * 扩展对象的功能性
          */
            // ECMAScript5 对象方法写法
            var person = {
                name : "song123",
                sayName : function () {
                    return this.name;
                }
            };

            // 一、 ECMAScript6 对象方法的简写语法,消除冒号和function关键字
            var person = {
                name : "song",
                sayName() {
                    console.log(this.name);
                }
            };
            person.sayName();

            // 二、可计算属性名
            var person = {}, lastName = "last name"; // 字符串字面量

            person['first name'] = "Nike";
            person[lastName] = "Love";

            console.log(person['first name']); // Nike
            console.log(person[lastName]);     // Love

            /*
             * 它支持通过任何字符串值作为名称访问属性的值。
             *
             * 这种模式: 适用于属性名提前已知或者可被字符串字面量表示的情况
             *
             * */

            let name = "last name";

            let json = {
                "first name" : "zhangsan",
                [lastName] : "song"  // 在对象字面量中,使用方括号表示的该属性名称是可计算的
            };
            console.log(json['first name']); // zhangsan
            console.log(json[lastName]);    // song

            var suffix = "level";
            var card = {
                ['first-' + suffix]: "song",
                ['second-' + suffix]: "lv"
            };
            console.log(card["first-level"]); // song
            console.log(card["second-level"]); // lv

            // 三、新增方法
            /**
             * ECMAScript其中一个设计目标是 不再创建新的全局函数,也不再Object.prototype上创建新的方法。
               在全局Object对象上引入了一些新方法。

             Object.is()方法
                当你想在JavaScript中比较两个值, 可能使用相等运算符(==)或者 全等(===)
                +0 和 -0在JavaScript被表示为两个完全不同的实体
                NaN === NaN
             ECMAScript6 引入 Object.is()来弥补运算符的不准确
            */
            console.log(0 === -0);            // true
            console.log(NaN === NaN);         // false
            console.log(Object.is(0,-0));     // false
            console.log(Object.is(NaN, NaN)); // true

            console.log(5 == "5");            // true
            console.log(5 === "5");           // false
            console.log(Object.is(5,"5"));    // false

            /*
               Object.assign()方法
                 混合(Mixin)是JavaScript中实现对象组合最流行的一种模式
                 在mixin一个对象接收来自另一个对象的属性和方法

             */
            function mixin(receiver, supplier) {
                Object.keys(supplier).forEach(function (key) {
                    receiver[key] = supplier[key];
                });
                return receiver;
            }
            // mixin()函数遍历supplier的自有属性并复制到recevier(此处的复制是浅复制,当属性值为对象时只复制对象的引用)

            function EventTarget() {

            }
            EventTarget.prototype = {
                constructor: EventTarget,
                on: function (name) {
                    console.log(name);
                }
            };

            var myObject = {};
            var result = mixin(myObject, EventTarget.prototype);
            console.log(typeof result); // object
            result.on("hello");   // hello

           /*
            * Object.assign()方法, 可以接收任意参数的源对象,并按指定顺序将属性复制到接收对象之中
            * 如果多个源对象具有同名属性,则排位靠后的源对象会覆盖之前的
            * */

            var receiver = {};
            Object.assign(receiver, {
                type : "css",
                name : "张三"
            }, {
                type : "html"
            });
            console.log(receiver.type); // html
            console.log(receiver.name); // name

            var supplier = {
                get name() {
                    return "files"
                }
            };

            Object.assign(receiver, supplier);
            var desc = Object.getOwnPropertyDescriptor(receiver,"name");
            console.log(desc.value); // files
            console.log(desc.get);   // undefined

            // Object.getOwnPropertyDescriptor
            var param = {
                age : 1,
                name : "song"
            };
            var descriptor = Object.getOwnPropertyDescriptor(param, "name");
            console.log(descriptor.value); // song

            // 四、重复的对象字面量属性
            /*
            * ES6中重复属性检查被移除了,无论是严格还是非严格,代码不再检查重复属性,
            *   对于每一组重复的属性都会取最后一个取值。
            * */
            "use strict";
            var song = {
                name : "张三",
                name : "王五"  // ES5严格模式下会有语法错误
            };
            console.log(song.name); // 王五  ES6严格模式下没有错误

            // 五、自有属性枚举顺序
            /**
             *  ECMAScript6严格规定了对象的自有属性被枚举时的返回顺序,这会影响到Object.getOwnPropertyNames()
             *
             */
            console.log(Object.getOwnPropertyNames(param)); // ['age','name']

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值