ES6中的方法定义,对象方法定义的新写法,以及getter,setter方法和方法名表达式
2017-03-26 01:16

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



原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(4321)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1