函數(shù)名

有兩種特殊情況：bind方法創(chuàng)造的函數(shù)，name屬性返回bound加上原函數(shù)的名字；Function構(gòu)造函數(shù)創(chuàng)造的函數(shù)，name屬性返回anonymous。

• bind函數(shù)名

// 以bound開(kāi)頭 function foo() { } const fnName = foo.bind().name console.log(fnName) // bound foo

• getter setter

如果對(duì)象的方法使用了取值函數(shù)（getter）和存值函數(shù)（setter），則name屬性不是在該方法上面，而是該方法的屬性的描述對(duì)象的get和set屬性上面，返回值是方法名前加上get和set。

const obj = {get foo() {},set foo(x) {} };obj.foo.name // TypeError: Cannot read property 'name' of undefinedconst descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');descriptor.get.name // "get foo" descriptor.set.name // "set foo"

對(duì)象方法的簡(jiǎn)寫

const o = {method() {return "Hello!";} };

• node common.js寫法+
  

屬性名表達(dá)式

ES6 允許字面量定義對(duì)象時(shí)，用方法二（表達(dá)式）作為對(duì)象的屬性名，即把表達(dá)式放在方括號(hào)內(nèi)。

let propKey = 'foo';let obj = {[propKey]: true,['a' + 'bc']: 123 }; let obj = {['h' + 'ello']() {return 'hi';} };obj.hello() // hi

• 屬性名可以重復(fù)，重復(fù)則覆蓋

let b = 'b' let obj = {['a' + 'b'] : undefined,['a' + b] : 1, // 屬性名和上面重復(fù)，永遠(yuǎn)取最后的，obj最后依然只有一個(gè)鍵‘a(chǎn)b’ } 屬性名表達(dá)式如果是一個(gè)對(duì)象，默認(rèn)情況下會(huì)自動(dòng)將對(duì)象轉(zhuǎn)為字符串[object Object]，這一點(diǎn)要特別小心。 const keyA = {a: 1}; const keyB = {b: 2};const myObject = {[keyA]: 'valueA',[keyB]: 'valueB' };myObject // Object {[object Object]: "valueB"} // 1. 屬性名相同覆蓋 // 2. 將一切js變量轉(zhuǎn)為字符串，作為屬性名

一個(gè)對(duì)象的屬性名可以是任何有效的 JavaScript 字符串，或者可以被轉(zhuǎn)換為字符串的任何類型，包括空字符串。然而，一個(gè)屬性的名稱如果不是一個(gè)有效的 JavaScript 標(biāo)識(shí)符（例如，一個(gè)由空格或連字符，或者以數(shù)字開(kāi)頭的屬性名），就只能通過(guò)方括號(hào)標(biāo)記訪問(wèn)。這個(gè)標(biāo)記法在屬性名稱是動(dòng)態(tài)判定（屬性名只有到運(yùn)行時(shí)才能判定）時(shí)非常有用。

JavaScript中的對(duì)象只能使用String類型作為鍵類型。

屬性描述符

• getOwnPropertyDescriptor是構(gòu)造器上的方法
• 方法返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對(duì)象的屬性，不需要從原型鏈上進(jìn)行查找的屬性）若無(wú)返回undefined
• Object.getOwnPropertyDescriptor(obj, prop)
  

一個(gè)屬性描述符是一個(gè)記錄，由下面屬性當(dāng)中的某些組成的：

value
該屬性的值(僅針對(duì)數(shù)據(jù)屬性描述符有效)

writable
當(dāng)且僅當(dāng)屬性的值可以被改變時(shí)為true。(僅針對(duì)數(shù)據(jù)屬性描述有效)
重新賦值，不包括刪除！

get
獲取該屬性的訪問(wèn)器函數(shù)（getter）。如果沒(méi)有訪問(wèn)器， 該值為undefined。(僅針對(duì)包含訪問(wèn)器或設(shè)置器的屬性描述有效)

set
獲取該屬性的設(shè)置器函數(shù)（setter）。 如果沒(méi)有設(shè)置器， 該值為undefined。(僅針對(duì)包含訪問(wèn)器或設(shè)置器的屬性描述有效)

configurable
當(dāng)且僅當(dāng)指定對(duì)象的屬性描述可以被改變或者屬性可被刪除時(shí)，為true。
delete obj.a

enumerable
當(dāng)且僅當(dāng)指定對(duì)象的屬性可以被枚舉出時(shí)，為 true。

Object.defineProperty(o, "baz", {value: 8675309,writable: false, // 重寫baz屬性會(huì)靜默失敗；而嚴(yán)格模式重寫則報(bào)錯(cuò)enumerable: false });

• 注意：在 ES5 中，如果該方法的第一個(gè)參數(shù)不是對(duì)象（而是原始類型），那么就會(huì)產(chǎn)生出現(xiàn) TypeError。而在 ES2015，第一個(gè)的參數(shù)不是對(duì)象的話就會(huì)被強(qiáng)制轉(zhuǎn)換為對(duì)象。

Object.getOwnPropertyDescriptor('foo', 0); // 類型錯(cuò)誤: "foo" 不是一個(gè)對(duì)象 // ES5 codeObject.getOwnPropertyDescriptor('foo', 0); // Object returned by ES2015 code: { // configurable: false, // enumerable: true, // value: "f", // writable: false // }

getter、setter在對(duì)象上

使用Object.defineProperties的方法，同樣也可以對(duì)一個(gè)已創(chuàng)建的對(duì)象在任何時(shí)候?yàn)槠涮砑觛etter或setter方法。這個(gè)方法的第一個(gè)參數(shù)是你想定義getter或setter方法的對(duì)象，第二個(gè)參數(shù)是一個(gè)對(duì)象，這個(gè)對(duì)象的屬性名用作getter或setter的名字，屬性名對(duì)應(yīng)的屬性值用作定義getter或setter方法的函數(shù)。

• set必須要有參數(shù)，否則報(bào)錯(cuò)Uncaught SyntaxError: Setter must have exactly one formal parameter.

var o = {a: 7,get b() { return this.a + 1;},set c(x) {this.a = x / 2} };console.log(o.a); // 7 console.log(o.b); // 8 注意訪問(wèn)方式 get直接讀 o.c = 50; // set要賦值 console.log(o.a); // 25 var language = {set add(name){this.ln.push(name)},ln: [] } language.add = 'EN' language.add = 'FN' console.log(language.ln) // ["EN","FN"]

mdn getter
mdn setter

• a也是o的屬性，只是用getter、setter劫持了
• 如果getter和屬性重名，會(huì)報(bào)錯(cuò) Uncaught RangeError: Maximum call stack size exceeded

不可能同時(shí)將一個(gè) getter 綁定到一個(gè)屬性并且該屬性實(shí)際上具有一個(gè)值。
使用get語(yǔ)法時(shí)，不能與另一個(gè) get 或具有相同屬性的數(shù)據(jù)條目同時(shí)出現(xiàn)在一個(gè)對(duì)象字面量中。
不允許使用 { get x() { }, get x() { } } 和 { x: …, get x() { } }）。
在對(duì)象字面量中，不能為一個(gè)已有真實(shí)值的變量使用 set ，也不能為一個(gè)屬性設(shè)置多個(gè) set。
( { set x(v) { }, set x(v) { } } 和 { x: …, set x(v) { } } 是不允許的 )

var o = {_a: 7,get a() { return this._a + 1;},set a(x) {this._a = x / 2} };console.log(o.a); // 8 o.a = 10 console.log(o.a); // 6 console.log(Object.keys(o)) // ["_a","a"]

• Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>

var obj = {get a(){return 2} } // 注意：這里也不能再為已有的對(duì)象屬性，使用defineProperty Object.defineProperty(obj, 'b', {get: function(){return this.a + 100},// value: 2 寫了get不能再寫value/writable，否則報(bào)錯(cuò) }) console.log(obj.a) // 2 console.log(obj.b) // 102

• get和set一般是成對(duì)出現(xiàn)的，并且不應(yīng)寫死，不然沒(méi)有意義

getter/setter → 偽屬性

• Object.defineProperty與創(chuàng)建對(duì)象時(shí)定義getter/setter的區(qū)別
• Object.defineProperty的getter/setter/其余普通屬性不可枚舉、不可配置

const obj = {a: 2 } Object.defineProperty(obj, 'b', {set: function (x) {this.a = x} }) const res = Object.getOwnPropertyDescriptor(obj, 'b') console.log(res) console.log(Object.keys(obj))const obj2 = {_a: 2,get a() {return this._a},set a(val) {this._a = val} } const res2 = Object.getOwnPropertyDescriptor(obj2, 'a') console.log(res2) console.log(res2.get.name) // get a console.log(res2.set.name) // set a console.log(Object.keys(obj2))

總結(jié)

以上是生活随笔為你收集整理的ES6-8 - 函数名/对象拓展、描述符、getter/setter的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。