es6物件增加新的屬性是「name」。 name屬性可以取得物件上方法(函數)的名字,例「getName() {console.log(this.name);}」;函數直接呼叫name就會傳回函數名,而字面量物件上的方法也是函數,因此也有name屬性。如果物件的方法是一個Symbol值,那麼name屬性回傳的是帶中括號的Symbol的描述內容。
本教學操作環境: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'; // ES5 var obj1 = { name: name, } // ES6 var obj2 = { name, }
上面程式碼中的 obj1 和 obj2 是一樣的意思。變數 name 可以直接寫在大括號中。這時,屬性名就是變數名,屬性值就是變數值。
下面我們來看一個在函數中傳回一個物件的實例:
// ES5 function getObj(x, y) { return {x: x, y: y}; } // 等同于 ES6 function getObj(x, y) { return {x, y}; } getObj(1, 2) // {x: 1, y: 2}
上面中的程式碼可以看出,在我們平常開發中,組裝資料時是非常方便、有用的。
1.2 物件中方法的簡寫
除了屬性可以簡寫,物件中的方法也是可以簡寫的,而且更加簡潔明了。讓我們來看下面的範例:
const name = '张三' // ES5 var person = { name: name, getName: function() { console.log('imooc') } }; // ES6 var 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 Wiki console.log(obj[str]) // Jack console.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"}
注意 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物件增加新的屬性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!