ES6中方法定义的新写法

ES6中引入了一种更简便的在对象上定义方法的书写方式。

var tool={
    console(str){
        window.console&&window.console.log(str);
    },
    trim(str){
        return str.replace(/^\s+|\s+$/,"");
    }
};
tool.console("sunshine");
tool.console(tool.trim(" mooshine  "));

这种写法就是直接书写函数就能为对象添加属性方法，函数名将被用作方法名。这里箭头函数不能用作这类方法定义，因为箭头函数是匿名函数。

这个方法定义跟js中提供的getter，setter方法有点类似

var user={
    privateName:"",
    get name(){
        return this.privateName;
    },
    set name(str){
        this.privateName=str.replace(/[-](\w)/,function(str,$1){
            return $1.toUpperCase();
        });
    }
}
user.name="webkit-transform";
console.log(user.name);

这个对于写java的开发人员来说应该不陌生，java中获取对象的属性用get方法，设置对象的属性用set方法。而js中提供的getter，setter方法似乎更强大。只要对象设置了get方法，那么通过“user.name”点操作获取属性值时也是调用定义的getter方法，点操作设置值时，调用的是setter方法。但是要注意，我们给name属性定义了get，set方法，就不能再在对象中定义“name:'webkitUserselect'”这种属性了，如果定义了这个属性，那么会按照书写顺序和get，set发生覆盖，这一点不太相同，在java中我们是先定义name属性，然后定义get，set方法。而js中的get，set方法提供的外部操作仍然是点操作，所以不能再定义name值的属性。

get name(){
    return this.name;
}

上面这种写法也是错误的。因为this.name，仍然会调用那么的get方法，那么就是一个死循环，会导内存溢出而报错的。

而删除属性的get，set方法，可以简单的使用delete操作办到：

delete user.name;

除了简单的方法定义方式外，方法的属性名还可以是表达式：

var sym=Symbol();
var sex="male";
var user={
    privateName:"",
    get [sym](){
        return this.privateName+"...";
    },
    set [sym](str){
        this.privateName=str.replace(/[-](\w)/,function(str,$1){
            return $1.toUpperCase();
        });
    },
    ["sex"+sex](){
        return "你的性别是"+(sex=='male'?"男":"女");
    }
}
user[sym]="webkit-transform";
console.log(user[sym]);
console.log(user.sexmale());

上面的代码中我们使用了方法名的计算表达式，get，set方法同样也支持方法名计算，方法名计算一定要加方括号，这里我们还使用了Symbol标识符，并且可以看到，计算的方法名中的变量同样可以在它的函数中作为变量来使用。记住一点，方法名计算表达式只能使用在对象的属性方法定义中，单独的方法定义中是不能使用方法名计算的，如下面的写法是错误的：

function ["mooshine"](){
    console.log("我的方法名是计算出来的");
}

这种写法会报错的。

还有一个生成器方法的方法名定义简写要注意：

var obj2 = {
  g: function*() {
    var index = 0;
    while(true)
      yield index++;
  }
};
// 同一个方法，简写语法：
var obj2 = { 
  * g() {
    var index = 0;
    while(true)
      yield index++;
  }
};

生成器方法我们后面再讲，生成器方法后面带一个*号，在简写方法是生成器方法时，*号要放在方法的前面。

最后，对于getter，setter方法是ES5中的东西，除了可计算的方法名的写法外，getter，setter是在IE9+的浏览器中都支持的。我们在实际代码中是可以使用getter，setter方法的。