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方法的。