1. 程式人生 > >ES6學習筆記(六)函式與物件

ES6學習筆記(六)函式與物件

一、函式
1.引數的預設值
在ES6之前,不能直接為函式的引數指定預設值,只能採用變通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);
}

ES6允許為函式的引數設定預設值,即直接寫在引數定義的後面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以與解構賦值預設值結合使用

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

一個需要注意的地方是,如果引數預設值是一個變數,則該變數所處的作用域,與其他變數的作用域規則是一樣的,即先是當前函式的作用域,然後才是全域性作用域。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2
) // 2

上面程式碼中,引數y的預設值等於x。呼叫時,由於函式作用域內部的變數x已經生成,所以y等於引數x,而不是全域性變數x。

如果呼叫時,函式作用域內部的變數x沒有生成,結果就會不一樣。

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面程式碼中,函式呼叫時,y的預設值變數x尚未在函式內部生成,所以x指向全域性變數。如果去掉let x = 1;全域性變數x不存在,就會報錯。

另一個例子:

let foo = 'outer';

function bar(func = x => foo)
{
let foo = 'inner'; console.log(func()); // outer } bar();

上面程式碼中,函式bar的引數func的預設值是一個匿名函式,返回值為變數foo。這個匿名函式宣告時,bar函式的作用域還沒有形成,所以匿名函式裡面的foo指向外層作用域的foo,輸出outer。

注意:
(1)在函式體中,不能用let或const再次宣告形參,否則會報錯。
(2)通常情況下,定義了預設值的引數,應該是函式的尾引數。因為這樣比較容易看出來,到底省略了哪些引數。
(3)指定了預設值以後,函式的length屬性,將返回沒有指定預設值的引數個數。

應用:
利用引數預設值,可以指定某一個引數不得省略,如果省略就丟擲一個錯誤。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

上面程式碼的foo函式,如果呼叫的時候沒有引數,就會呼叫預設值throwIfMissing函式,從而丟擲一個錯誤。

從上面程式碼還可以看到,引數mustBeProvided的預設值等於throwIfMissing函式的執行結果(即函式名之後有一對圓括號),這表明引數的預設值不是在定義時執行,而是在執行時執行(即如果引數已經賦值,預設值中的函式就不會執行),這與python語言不一樣。

另外,可以將引數預設值設為undefined,表明這個引數是可以省略的。

function foo(optional = undefined) { ··· }

2 . rest引數
rest引數搭配的變數是一個數組,該變數將多餘的引數放入陣列中

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面程式碼的add函式是一個求和函式,利用rest引數,可以向該函式傳入任意數目的引數。

rest引數中的變數代表一個數組,所以陣列特有的方法都可以用於這個變數。下面是一個利用rest引數改寫陣列push方法的例子。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)

注意,rest引數之後不能再有其他引數(即只能是最後一個引數),否則會報錯。(同擴充套件運算子)

// 報錯
function f(a, ...b, c) {
  // ...
}

3.擴充套件運算子
擴充套件運算子(spread)是三個點(…)。將一個數組轉為用逗號分隔的引數序列。(比較:rest(形參多餘),擴充套件(實參展開))

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]  

該運算子主要用於函式呼叫。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

上面程式碼中,array.push(…items)和add(…numbers)這兩行,都是函式的呼叫,它們的都使用了擴充套件運算子。該運算子將一個數組,變為引數序列。

由於擴充套件運算子可以展開陣列,所以不再需要apply方法,將陣列轉為函式的引數了。


Math.max.apply(null, [14, 3, 77]);// ES5
Math.max(...[14, 3, 77]);   // ES6
// 等同於
Math.max(14, 3, 77);

另一個例子是通過push函式,將一個數組新增到另一個數組的尾部。

// ES5的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

注意:如果將擴充套件運算子用於陣列賦值,只能放在引數的最後一位,否則會報錯。
擴充套件運算子應用:
(1)合併陣列

[1, 2].concat(more)   // ES5
[1, 2, ...more]     // ES6

(2)與解構賦值結合

a = list[0], rest = list.slice(1);// ES5
[a, ...rest] = list// ES6
const [first, ...rest] = [];
first // undefined
rest  // []:

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

(3)函式的返回值

JavaScript的函式只能返回一個值,如果需要返回多個值,只能返回陣列或物件。擴充套件運算子提供瞭解決這個問題的一種變通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

(4)字串轉陣列
擴充套件運算子還可以將字串轉為真正的陣列。能夠正確識別32位的Unicode字元。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

正確返回字串長度的函式,可以像下面這樣寫。

function length(str) {
  return [...str].length;
}

length('x\uD83D\uDE80y') // 3

(5)實現了Iterator介面的物件

任何Iterator介面的物件,都可以用擴充套件運算子轉為真正的陣列。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

querySelectorAll方法返回的是一個nodeList物件。它不是陣列,而是一個類似陣列的物件。這時,擴充套件運算子可以將其轉為真正的陣列,原因就在於NodeList物件實現了Iterator介面。

(6)Map和Set結構,Generator函式
擴充套件運算子內部呼叫的是資料結構的Iterator介面,因此只要具有Iterator介面的物件,都可以使用擴充套件運算子,比如Map結構。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

4.name屬性
函式的name屬性,返回該函式的函式名。

function foo() {}
foo.name // "foo"

這個屬性早就被瀏覽器廣泛支援,ES6對這個屬性的行為做出了一些修改。如果將一個匿名函式賦值給一個變數,ES5的name屬性,會返回空字串,而ES6的name屬性會返回實際的函式名。

var func1 = function () {};
// ES5
func1.name // ""
// ES6
func1.name // "func1"

注意:
Function建構函式返回的函式例項,name屬性的值為“anonymous”。(new Function).name // "anonymous"

5、箭頭函式
ES6允許使用“箭頭”(=>)定義函式。

var f = () => 5;
// 等同於
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};   //如果箭頭函式的程式碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return語句返回。

由於大括號被解釋為程式碼塊,所以如果箭頭函式直接返回一個物件,必須在物件外面加上括號。

var getTempItem = id => ({ id: id, name: "Temp" });

箭頭函式的一個用處是簡化回撥函式。

// 正常函式寫法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭頭函式寫法
[1,2,3].map(x => x * x);

// 正常函式寫法
var result = values.sort(function (a, b) {
  return a - b;
});
// 箭頭函式寫法
var result = values.sort((a, b) => a - b);

注意:
(1)函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面程式碼中,setTimeout的引數是一個箭頭函式,這個箭頭函式的定義生效是在foo函式生成時,而它的真正執行要等到100毫秒後。如果是普通函式,執行時this應該指向全域性物件window,這時應該輸出21。但是,箭頭函式導致this總是指向函式定義生效時所在的物件(本例是{id: 42}),所以輸出的是42。

箭頭函式可以讓setTimeout裡面的this,繫結定義時所在的作用域,而不是指向執行時所在的作用域。

箭頭函式裡面根本沒有自己的this,而是引用外層的this。

(2)不可以當作建構函式,也就是說,不可以使用new命令,否則會丟擲一個錯誤。
(3)不可以使用arguments物件,該物件在函式體內不存在。如果要用,可以用Rest引數代替。
(4)不可以使用yield命令,因此箭頭函式不能用作Generator函式。
(5)箭頭函式內部,還可以再使用箭頭函式。
二、物件
1.屬性與方法的簡潔寫法
屬性簡寫:
ES6允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。
ES6在物件之中,只寫屬性名,不寫屬性值。這時,屬性值等於屬性名所代表的變數。

var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

// 等同於
var baz = {foo: foo};

方法簡寫:

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

// 等同於

var o = {
  method: function() {
    return "Hello!";
  }
};

注意,簡潔寫法的屬性名總是字串
2.屬性名錶達式
ES6允許字面量定義物件時,用表示式作為物件的屬性名,即把表示式放在方括號內。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

表示式還可以用於定義方法名。

let obj = {
  ['h'+'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

注意,屬性名錶達式與簡潔表示法,不能同時使用,會報錯。

3.物件方法的name屬性
物件方法也是函式,因此也有name屬性。

var person = {
  sayName() {
    console.log(this.name);
  },
  get firstName() {
    return "Nicholas";
  }
};
//如果使用了取值函式,則會在方法名前加上get。如果是存值函式,方法名的前面會加上set。
person.sayName.name   // "sayName"
person.firstName.name // "get firstName"

有兩種特殊情況:
bind方法創造的函式,name屬性返回“bound”加上原函式的名字;
Function建構函式創造的函式,name屬性返回“anonymous”。

(new Function()).name // "anonymous"

var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

4.判斷相等 Object.is()
ES5比較兩個值是否相等,只有兩個運算子:相等運算子(==)和嚴格相等運算子(===)。它們都有缺點,前者會自動轉換資料型別,後者的NaN不等於自身,以及+0等於-0。JavaScript缺乏一種運算,在所有環境中,只要兩個值是一樣的,它們就應該相等。

ES6提出“Same-value equality”(同值相等)演算法,用來解決這個問題。Object.is就是部署這個演算法的新方法。它用來比較兩個值是否嚴格相等,與嚴格比較運算子(===)的行為基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不同之處只有兩個:一是+0不等於-0,二是NaN等於自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

ES5可以通過下面的程式碼,部署Object.is。

Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 針對+0 不等於 -0的情況
      return x !== 0 || 1 / x === 1 / y;
    }
    // 針對NaN的情況
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});

5.Object.assign( )物件合併
Object.assign方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。Object.assign方法的第一個引數是目標物件,後面的引數都是源物件。

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

var obj = {a: 1};
Object.assign(obj) === obj // true

注意:
(1)如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
(2)由於undefined和null無法轉成物件,所以如果只有它們作為引數,就會報錯。
(3)如果該引數不是物件,則會先轉成物件,然後返回。如果無法轉成物件,就會跳過。這意味著,如果undefined和null不在首引數,就不會報錯。
(4)除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。

//案例1:
var v1 = 'abc';
var v2 = true;
var v3 = 10;

var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
//案例2:
Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

布林值、數值、字串分別轉成對應的包裝物件,可以看到它們的原始值都在包裝物件的內部屬性[[PrimitiveValue]]上面,這個屬性是不會被Object.assign拷貝的。只有字串的包裝物件,會產生可列舉的實義屬性,那些屬性則會被拷貝。
(5) Object.assign拷貝的屬性是有限制的,只拷貝源物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性(enumerable: false)。
(6)Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面程式碼中,源物件obj1的a屬性的值是一個物件,Object.assign拷貝得到的是這個物件的引用。這個物件的任何變化,都會反映到目標物件上面。
(7)Object.assign可以用來處理陣列,但是會把陣列視為物件。

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

上面程式碼中,Object.assign把陣列視為屬性名為0、1、2的物件,因此目標陣列的0號屬性4覆蓋了原陣列的0號屬性1。

應用:
(1)為物件新增屬性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

上面方法通過Object.assign方法,將x屬性和y屬性新增到Point類的物件例項。
(2)為物件新增方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同於下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

(3)克隆物件

function clone(origin) {
  return Object.assign({}, origin);
}

上面程式碼將原始物件拷貝到一個空物件,就得到了原始物件的克隆。
不過,採用這種方法克隆,只能克隆原始物件自身的值,不能克隆它繼承的值。如果想要保持繼承鏈,可以採用下面的程式碼。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

(4)合併多個物件:將多個物件合併到某個物件。

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

如果希望合併後返回一個新物件,可以改寫上面函式,對一個空物件合併。

const merge =
  (...sources) => Object.assign({}, ...sources);

(5)為屬性指定預設值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
}

6.屬性的可列舉性enumerable
物件的每個屬性都有一個描述物件(Descriptor),用來控制該屬性的行為。Object.getOwnPropertyDescriptor方法可以獲取該屬性的描述物件。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述物件的enumerable屬性,稱為”可列舉性“,如果該屬性為false,就表示某些操作會忽略當前屬性。

ES5有三個操作會忽略enumerable為false的屬性:
for…in迴圈:只遍歷物件自身的和繼承的可列舉的屬性(只有此返回繼承的屬性)
Object.keys():返回物件自身的所有可列舉的屬性的鍵名
JSON.stringify():只序列化物件自身的可列舉的屬性
ES6新增了一個操作Object.assign(),會忽略enumerable為false的屬性,只拷貝物件自身的可列舉的屬性。

實際上,引入enumerable的最初目的,就是讓某些屬性可以規避掉for…in操作。比如,物件原型的toString方法,以及陣列的length屬性,就通過這種手段,不會被for…in遍歷到。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

上面程式碼中,toString和length屬性的enumerable都是false,因此for…in不會遍歷到這兩個繼承自原型的屬性。總的來說,操作中引入繼承的屬性會讓問題複雜化,大多數時候,我們只關心物件自身的屬性。所以,儘量不要用for…in迴圈,而用Object.keys()代替。

7.物件遍歷Object.values()、Object.entries()
ES5引入了Object.keys方法,返回一個數組,成員是引數物件自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名。

var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

ES7有一個提案,引入了跟Object.keys配套的Object.values和Object.entries。

(1)Object.values(obj)鍵值方法返回一個數組,成員是引數物件自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值。

var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]

屬性名為數值的屬性,是按照數值從小到大遍歷的,因此返回的順序是b、c、a。

var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]

Object.values只返回物件自身的可遍歷屬性。
Object.values會過濾屬性名為Symbol值的屬性。
如果Object.values方法的引數是一個字串,會返回各個字元組成的一個數組。

Object.values('foo')
// ['f', 'o', 'o']

上面程式碼中,字串會先轉成一個類似陣列的物件。字串的每個字元,就是該物件的一個屬性。因此,Object.values返回每個屬性的鍵值,就是各個字元組成的一個數組。

如果引數不是物件,Object.values會先將其轉為物件。由於數值和布林值的包裝物件,都不會為例項新增非繼承的屬性。所以,Object.values會返回空陣列。

Object.values(42) // []
Object.values(true) // []

(2)Object.entries(obj)鍵值對陣列
Object.entries方法返回一個數組,成員是引數物件自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對陣列。

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

除了返回值不一樣,該方法的行為與Object.values基本一致。
應用:
Object.entries的基本用途是遍歷物件的屬性。

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// "one": 1
// "two": 2

Object.entries另一個應用,將物件轉為真正的Map結構。

var obj = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

自己實現Object.entries方法:

// Generator函式的版本
function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

// 非Generator函式的版本
function entries(obj) {
  let arr = [];
  for (let key of Object.keys(obj)) {
    arr.push([key, obj[key]]);
  }
  return arr;
}

8.原型相關setPrototypeOf、getPrototypeOf()
(1)__proto__屬性
(2)Object.setPrototypeOf方法的作用與proto相同,用來設定一個物件的prototype物件。它是ES6正式推薦的設定原型物件的方法。
格式:Object.setPrototypeOf(object, prototype)

用法:var o = Object.setPrototypeOf({}, null);

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

上面程式碼將proto物件設為obj物件的原型,所以從obj物件可以讀取proto物件的屬性。
(3)Object.getPrototypeOf()
該方法與setPrototypeOf方法配套,用於讀取一個物件的prototype物件。

格式:Object.getPrototypeOf(obj);

function Rectangle() {
}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangle.prototype
// true

Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

10.物件的解構賦值和擴充套件運算子
(1)Rest解構賦值
物件的Rest解構賦值用於從一個物件取值,相當於將所有可遍歷的、但尚未被讀取的屬性,分配到指定的物件上面。所有的鍵和它們的值,都會拷貝到新物件上面。

由於Rest解構賦值要求等號右邊是一個物件,所以如果等號右邊是undefined或null,就會報錯,因為它們無法轉為物件。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

注意:Rest解構賦值必須是最後一個引數,否則會報錯。
Rest解構賦值拷貝的是這個值的引用
Rest解構賦值不會拷貝繼承自原型物件的屬性。

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let o3 = { ...o2 };
o3 // { b: 2 }

(2)擴充套件運算子(…)用於取出引數物件的所有可遍歷屬性,拷貝到當前物件之中。可以用於合併兩個物件。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

這等同於使用Object.assign方法。

let aClone = { ...a };
// 等同於
let aClone = Object.assign({}, a);

注意:
擴充套件運算子內部的同名屬性會被覆蓋掉。如果把自定義屬性放在擴充套件運算子前面,就變成了設定新物件的預設屬性值。
如果擴充套件運算子的引數是null或undefined,這個兩個值會被忽略,不會報錯。
11.多項所有屬性的描述物件Object.getOwnPropertyDescriptors()
ES5有一個Object.getOwnPropertyDescriptor方法,返回某個物件屬性的描述物件(descriptor)。

var obj = { p: 'a' };

Object.getOwnPropertyDescriptor(obj, 'p')
// Object { value: "a",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

ES7有一個提案,提出了Object.getOwnPropertyDescriptors方法,返回指定物件所有自身屬性(非繼承屬性)的描述物件。

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

Object.getOwnPropertyDescriptors方法返回一個物件,所有原物件的屬性名都是該物件的屬性名,對應的屬性值就是該屬性的描述物件。