• ES6 对象增强


      对象字面量语法扩展:

      1, 属性初始化语法简写给一个属性赋一个变量值,如果变量名和属性名相同,可以省略变量名和冒号,直接写属性名,js引擎在执行代码的时候,自动查找 和属性命名相同的变量并赋值。

    复制代码
    let x = 1, y = 2;
    let object = { 
      x, // 属性名是x,变量名也是x, 两者一致,可以简写
      y
    }; console.log(object.x); //output "1"
    复制代码

      2, 更为简洁 的方法属性定义:ES5的时候,把一个函数赋值给属性的时候,函数必须是一个完整的函数定义

    let object = {
        myFunction: function(){
            console.log("Hello World")  
        }  
    }

      但是在ES6中,可以把:function 这一部分去掉了,写法如下

    let object = {
        myFunction(){
            console.log("Hello World")  
        }  
    }

      语法确实简洁多了,不过要注意一个特殊情况,只有给属性赋值的是匿名函数的时候,才可以使用简洁语法,如果赋值的是一个有名字的函数,那么就不能使用匿名函数了。如下情况就不能

    let object = {
        myFunction: function hello(){
            console.log("Hello World")  
        }  
    }

      函数hello 赋值给属性myFunction, 你可能会问,为什么要给函数取一个hello 名字,最常见的一种情况是递归,自己调用自己,如果没有名字,怎么调用?还有就是程序debugger 的时候,有函数名字可以直接定位, you don't know js 的作者就强烈建议书写有名字的函数。

      3, 计算属性名:ES5 的时候,对象字面量中的属性都是事先定义好的, 不能使用变量,从而在程序运行的时候动态生成属性,但在ES6中,这种情况改变了,对象字面量中可以存在动态生成的属性,不过语法就要稍微变一下了,需要把动态属性用[] 包括起来,这样在程序运行的时候可以对[] 中的内容进行计算

    let object = {
      ["first" + "Name"]: "Eden",
    };
    
    //extract
    console.log(object["first" + "Name"]); //Output "Eden"

      4, 对重复属性名的处理: 在ES5 的时候,如果给一个对象赋值为相同的属性,它就会报错。但在ES6 下,它不会报错了,它会取最后一个相同属性的值。

    let obj = {
        name: 'Sam',
        name: 'Jason'
    };
    console.log(obj.name) // 'jason'

      新的方法

      1, Object.is() 方法:  判断两个数是否相等。你可能有点差异,不是有 == 和 === 来判断相等了吗,怎么还需要判断相等的方法? 不用担心,Object.is() 是用来处理极端情况的,比如NaN. NaN 和任何数都不相等,包含它本身,没有办法直接比较,现在就可以调用Object.is() 方法了,他就接受俩个要比较相等的参数。Object.is(NaN, NaN);  还有+0和-0, 对于js 引擎来说,他们两个是不相等的,但是 用== 和=== 做判断的时候,他们是相等的,为了解决这种问题,就可以使用Object.is(+0, -0) 

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

      对于Object.is () 来说,你可能发现,我们几乎用不到它, 它就是对=== 操作符在某些极端情况下的纠正,所以对于比较,我们还是用== 或===, 平常怎么用就怎么用,只有碰到极端情况再用Object.is() 方法。 

      2, Object.assign(): 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(target, ...sources),target 目标对象,sources: 源对象

    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };
    
    const returnedTarget = Object.assign(target, source);
    
    console.log(target); // Object { a: 1, b: 4, c: 5 }
    
    console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }

       3, Object.setPrototypeOf(), 设置一个对象的原型对象,它接受两个参数,一个是对象,一个是对象要链接到的原型对象 。Object.setPrototypeOf(obj, prototypeObj).

    let person = {
        greeting() {
            return "hello";
        }
    }
    
    let dog = {
        greeting() {
            return "woof";
        }
    }
    
    let obj = {};
    
    // obj 链接到person 
    Object.setPrototypeOf(obj, person);
    console.log(obj.greeting()); // "hello"
    // obj 链接到dog
    Object.setPrototypeOf(obj, dog);
    console.log(obj.greeting()); // woof

      通过Object.setPrototypeOf() 方法可以动态地改变一个对象的原型对象。这里简单说一下对象的原型,在js中没有所谓的类式继承,因为js中没有java  中的类, 那Js中有什么呢? 它只有对象,当我们把一个对象链接到原型对象上的时候,它是对象和对象之间的关系,就像上面中的代码一样, obj 就一个对象,它的原型对象无论是person, 还是dog, 也是普通的对象, 对象和对象的链接关系,就像火车的车厢

    通过链条链接起来一样, 把每一个车厢想象成每一个对象。为什么把对象链接起来呢? 因为另外一个对象有我们想要的方法,比如上面的greeting 方法。我们刚刚声明了一个对象obj,  空对象,什么都没有,刚要给他声明一个greeting 方法,突然发现person  对象有这个方法,那就不要声明了,拿过来用就可以了,这不,这两个对象就有必要链接到一起了。但执行obj.greeting()的时候,发现obj对象上并没有这个方法,但是发现它链接到一个对象person, 那就顺着链条继续找吧,正好,person 对象上有这个方法,就调用了person 对象上的方法。就像火车上找人一样,你先从第一车厢开始,没有,因为第一车厢和第二车厢链接起来了,你就到第二车厢去找,还是没有,第二车厢又和第三车厢链接到一起,你就去第三车厢去找,找到了,如果没有找到,继续第四车厢,因为每一个车厢都是链接起来的。如果所有的车厢都找完了,还是没有,那就真没有了。

      那我们还能不能在obj上面定义一个greeting 方法,因为有时候原型对象上的方法不能完全满足要求?可以,当我们在一个对象上定义一个方法的时候,它就不会就找原型链了,直接调用对象上面的方法。

    let obj = {
        greeting() {
            return 'obj';
        }
    };

      但有时候, 你发现,在obj 对象中定义的方法,可能使用到原型对象上的同名方法, 只要调用原型对象上面的方法再进行一下组装就可以达到要求了。ES6 提供了super 关键词,它就指向原型对象

    let obj = {
        greeting() {
            return super.greeting()  + 'obj';
        }
    };

      这里要注意的是,对象方法的定义只能使用简洁的语法形式,否则报错。

      super 是怎么实现的呢?在ES6 中,如果一个对象中定义了方法,这个方法自动获取到一个内置的属性[[HomeObject]], 来指向这个对象。super 呢,就是通过Object.getPrototypeOf([[HomeObject]]) 来获取到原型对象。obj.greeting() greeting() 方法中的[[HomeObject]] 就指向了obj.  那里面的super 就是Object.getPrototypeOf(obj), 那就是person 或dog 了,super.greeting() 就相当于person.greeting()了, 更为准确的说是 person.greeting.call(this).  因为如果person中的greenting有this, 我们还要给它指定this 指向, 不能让里面的this 指向别的对象, 只能让this 指向 obj 了。

  • 相关阅读:
    iOS深入学习(Block全面分析)
    iOS 多快好省的宏定义
    1.ARC和非ARC文件共存
    简单的实现UIpicker上面的取消确定按钮
    ios 简单的倒计时验证码数秒过程实现
    jquerymobile 基础教程
    得到UIView中某个非子视图在UIView中的位置
    状态栏问题
    html表格,列表
    html简单样式
  • 原文地址:https://www.cnblogs.com/SamWeb/p/10705550.html
Copyright © 2020-2023  润新知