ES2015入门系列8-新对象特征

2024年1月6日 141次阅读 来源: chekun

继承以代码举行睁开, 在ES5中，以下代码：

function makeDuckToy() {
  var name = '鸭子';
  var color = '黄色';
  return {
    name: name,
    color: color,
    quacks: function() {
      console.log('嘎嘎嘎~~~');
    }
  }
}

var duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

ES2015为对象带来的新特征:

  • 属性简写

假如属性称号和变量称号一致，那末能够直接用省略变量名，以下:

function makeDuckToy() {
  let name = '鸭子';
  let color = '黄色';
  return {
    name,
    color,
    quacks: function() {
      console.log('嘎嘎嘎~~~');
    }
  }
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

  • 要领简写

要领能够省略冒号以及function关键字, 以下：

function makeDuckToy() {
  let name = '鸭子';
  let color = '黄色';
  return {
    name,
    color,
    quacks() {
      console.log('嘎嘎嘎~~~');
    }
  }
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

  • 解构赋值

解构赋值，我们之前已讲过，这里再继承举个例子:

ES5中，假定从ajax中猎取数据，并掏出想要的值:

function ajax() {
  return {
   status: true,
   data: ['鸭子', '山君'],
   total: 12
  }
}

var result = ajax();
var data = result.data;
var total = result.total;

有了 解构赋值，代码就能够简化成:

function ajax() {
  return {
   status: true,
   data: ['鸭子', '山君'],
   total: 12
  }
}

let {data, total} = ajax();

就是云云轻易，不是吗？

    原文作者：chekun
    原文地址: https://segmentfault.com/a/1190000009992663
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞