本教程操作环境:windows7系统、ecmascript 6版、dell g3电脑。
javascript 中对象是非常重要的数据结构,es6 对对象进行了极大的扩展,使用上也更加简洁。其中es6对象增加新的属性是“name”。
对象方法的 name 属性
你有没有想过怎么获取对象上方法的名字?es6 增加了函数的 name 属性,函数直接调用 name 会返回函数名。字面量对象上的方法也是函数,因此也有 name 属性。如下实例:
var person = { name: "jack", getname() { console.log(this.name); },};person.getname.name // "getname"
上面代码中,getname() 方法的 name 属性返回函数名(即方法名)
有两种特殊情况:
function 构造函数创造的函数,name 属性返回 “anonymous”;
bind 方法创造的函数,name 属性返回 “bound” 加上原函数的名字。
(new function()).name // "anonymous"var dosomething = function() { // todo};dosomething.bind().name // "bound dosomething"
如果对象的方法是一个 symbol 值,那么 name 属性返回的是带中括号的 symbol 的描述内容。
const key1 = symbol('description content');const key2 = symbol();let obj = { [key1]() {}, [key2]() {},};obj[key1].name // "[description content]"obj[key2].name // ""
扩展知识:es6对象中属性的改进
1、简洁的属性表达
es6 允许直接写入变量和函数,作为对象的属性和方法
1.1 属性值简写
在 es5 中我们知道,在定义对象时属性的值是必须要写的,在 es6 中规定,如果属性名和定义的变量名是一样的,就可以在对象中直接写这个变量名作为对象中的一项。如下:
var name = 'imooc';// es5var obj1 = { name: name,}// es6var obj2 = { name,}
上面代码中的 obj1 和 obj2 是一样的意思。变量 name 可以直接写在大括号中。这时,属性名就是变量名,属性值就是变量值。
下面我们来看一个在函数中返回一个对象的实例:
// es5function getobj(x, y) { return {x: x, y: y};}// 等同于 es6function getobj(x, y) { return {x, y};}getobj(1, 2) // {x: 1, y: 2}
上面中的代码可以看出,在我们平常开发中,组装数据时是非常方便、有用的。
1.2 对象中方法的简写
除了属性可以简写,对象中的方法也是可以简写的,而且更加简洁明了。我们来看下面的例子:
const name = '张三'// es5var person = { name: name, getname: function() { console.log('imooc') }};// es6var person = { name, getname() { console.log(this.name) }};console.log(person) // {name: "imooc", getname: ƒ}
上面的代码中,es5 中定义一个对象上的方法时需要使用 function 关键字来定义,而 es6 则直接省略了 冒号和 function 关键字。可以看出使用 es6 这种简洁的方式更具表达力。
在 node 中进行模块导出时,这种方式更加方便。我们看下面的例子:
var person = {};function getname () { return person.name}function setname () { person.name = '李四'}function clear () { person = {};}// es5 写法module.exports = { getname: getname setname: setname, clear: clear};// es6写法module.exports = { getname, setname, clear };
上面的代码中,我们定义了一个 person 对象,并向外暴露了若干方法用来操作 person 对象,在导出的时候可以看出,es6 不需要重复地去写变量名,从而更简洁地表达了模块所提供的方法。
2、简洁的属性表达
在 javascript 中定义对象的属性,一般有两种方法。如下:
// 方法一obj.name = 'imooc';// 方法二obj['a' + 'ge'] = 7;
上面的代码中,方法一直接使用标识符进行赋值操作,这是我们比较常用的赋值操作,但是如果属性是一个表达式时,则可以使用方法二,把表达式写在中括号中。
但是在 es5 定义字面量对象时不能使用表达式作为字面量对象的属性,只能通过第一种方式(标识符)来定义属性。
var obj = { name: 'imooc', age: 7}
es6 对对象的属性进行了扩展,可以覆盖更多的场景,属性可以使用变量的形式来定义,如下:
var key = 'name';var obj = { [key]: 'imooc', ['a' + 'ge']: 7}
上面的代码中字面量对象中的属性是可以放在中括号中,中括号中的可以是变量,也可以是表达式。这无疑是扩展了属性的功能,使编程更加灵活。
另外,属性也可以是一个带空格的字符串,在取值时在中括号中可以直接使用字符串,也可以使用变量。如下:
var str = 'first name';var obj = { ['i love imooc']: 'es6 wiki', [str]: 'jack'}console.log(obj['i love imooc']) // es6 wikiconsole.log(obj[str]) // jackconsole.log(obj['first name']) // jack
表达式还可以用于定义对象上的方法名。
var person = { name: 'jack', ['get' + 'name']() { console.log(this.name) }};console.log(person.getname()) // jack
注意 1: 属性名表达式与属性简洁表示,不能同时使用,会报错。
// 报错var name = 'jack';var age = 18;var person = { [name] };// uncaught syntaxerror: unexpected token '}'
上面的代码会有语法错误
注意 2: 属性名必须是字符串类型的,如果属性表达式是一个对象,则会先调 tostring() 先将对象转为字符串,然后才进行使用。
var key1 = {name: 'imooc'};var key2 = {age: 7};var obj = { [key1]: 'value content 1', [key2]: 'value content 2',}console.log(obj) // {[object object]: "value content 2"}
上面代码中定义了两个变量都是对象类型的,在调用 tostring() 时会变为 [object object] 属性相同。所以,后面的属性把前面的覆盖了。
注意 3: 如果属性的表达式是数组时,则和对象不一样。数组在 tostring() 后会变成一个字符串,所以对象属性的表达式就是一个字符串。
var keys = ['imooc', '7'];var obj = { [keys]: 'value content',}console.log(key.tostring()) // "imooc,7"console.log(obj) // {imooc,7: "value content"}console.log(obj[keys]) // "value content"
上面的代码中可以看出来,数组 keys 在 tostring() 得到了 imooc,7 作为 obj 的属性。另外,我们也可以直接使用 keys 获取 obj 对象上的值。
【推荐学习:javascript视频教程】
以上就是es6对象增加新的属性是什么的详细内容。
