JavaScript Object静态方法在实际开发中的用途

Object类方法

1 用Object.assign方法复制对象, 并添加新属性

const person = {
  name: "test",
  age: 22
};
const man = Object.assign({gender: "male"}, person);

2 Object.keys获取对象的可枚举属性, Object.values获取对象的可枚举值。

console.log(Object.keys(person));  // [ 'name', 'age' ]
console.log(Object.keys(man)); // [ 'gender', 'name', 'age' ]

3 Object.defineProperty 可为对象动态创建属性

Object.defineProperty(person,"job",{
    value: "programming",
    wirtable : true,
    enumerable : true,
    configurable : true
});

提高微信小程序的开发效率

下面介绍一下实际的例子，用于提高微信小程序的开发效率。

腾讯官方开发了一个omix的框架。核心代码我放在这里, 实际只有3个文件create.js, obaa.js, mitt.js。其中create.js是主程序，obaa.js用于监测对象的变动。

每个页面index.js实际调用了函数Page(option)，所以我们要做一些黑魔法的话，就是看怎么动态组装这个option，把option里的onload进行一些修改。omix里的create.page函数就是做了这样的操作。

下面是几种我们在微信小城序开发过程中常常会用放到data的数据类型（数组和对象），还有对应得wxml模板。

  data: {
    motto: 'Hello World',
    arrayTest: [1, 2, 3],
    testObj: {
      testAttr1: { a : 1, b: 2},
      testAttr2: { c : 1, d: 2}
    }
  },

  <text>arrayTest: </text>
  <view>
    <view wx:for="{{arrayTest}}" wx:key="{{index}}">{{item}}</view>
  </view>

  <text>testObj.testAttr1.a: </text>
  <view>
    {{testObj.testAttr1.a}}
  </view>

原来在微信小程序里修改数组的某个数据必须采用某种特殊的写法

      this.setData({
        'arrayTest[1]': "999",
        'testObj.testAttr1.a': "999"
      });

但是使用omix之后，可以直接在oData属性上修改数组。对比之下，下面的写法明显更简单。

this.oData.arrayTest[1] = 999
this.oData.testObj.testAttr1.a = 999;

实际上这个功能是依赖Object.defineProperty实现的，可以使得设置对象属性的值得时候，自动执行某些操作。在omix里就是把oData对象属性的赋值操作转换成this.setData赋值操作。

var bValue;
Object.defineProperty(person,"job",{
    get: function() {
        return bValue;
    },
    set: function(value) {
        console.log("set value: " + value)
        bValue = value
    },
    enumerable : true,
    configurable : true
});