1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-25 11:12:21 +00:00

修改object/assign

This commit is contained in:
Ruan Yifeng 2014-12-23 08:55:24 +08:00
parent 8b3d0a575d
commit ef6bd9d6fa
2 changed files with 227 additions and 74 deletions

View File

@ -499,3 +499,29 @@ result
// ['a', 'b', 'c', 'd', 'e', 'f', 'g'] // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
``` ```
## 作为对象属性的Generator函数
如果一个对象的属性是Generator函数可以简写成下面的形式。
```javascript
let obj = {
* myGeneratorMethod() {
···
}
};
```
它的完整形式如下,两者是等价的。
```javascript
let obj = {
myGeneratorMethod: function* () {
···
}
};
```

View File

@ -1,5 +1,124 @@
# 对象的扩展 # 对象的扩展
## 属性的简洁表示法
ES6允许直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。
```javascript
var Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
```
这种写法用于函数的返回值,将会非常方便。
```javascript
function getPoint() {
var x = 1;
var y = 10;
return {x, y};
}
getPoint()
// {x:1, y:10}
```
下面是一个类似的例子。
```javascript
let x = 4;
let y = 1;
// 下行等同于 let obj = { x: x, y: y };
let obj = { x, y };
```
## 属性名表达式
JavaScript语言定义对象的属性有两种方法。
```javascript
// 方法一
obj.foo = true;
// 方法二
obj['a'+'bc'] = 123;
```
上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
但是如果使用字面量方式定义对象使用大括号在ES5中只能使用方法一标识符定义属性。
```javascript
var obj = {
foo: true,
abc: 123
};
```
ES6允许字面量定义对象时用方法二表达式作为对象的属性名即把表达式放在方括号内。
```javascript
let propKey = 'foo';
let obj = {
[propKey]: true,
['a'+'bc']: 123
};
```
下面是另一个例子。
```javascript
var lastWord = "last word";
var a = {
"first word": "hello",
[lastWord]: "world"
};
a["first word"] // "hello"
a[lastWord] // "world"
a["last word"] // "world"
```
表达式还可以用于定义方法名。
```javascript
let obj = {
['h'+'ello']() {
return 'hi';
}
};
console.log(obj.hello()); // hi
```
## Object.is() ## Object.is()
Object.is()用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0二是NaN等于自身。 Object.is()用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0二是NaN等于自身。
@ -44,6 +163,87 @@ target // {a:1, b:2, c:3}
``` ```
assign方法有很多用处。
**1为对象添加属性**
```javascript
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
```
上面方法通过assign方法将x属性和y属性添加到Point类的对象实例。
**2为对象添加方法**
```javascript
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
···
},
anotherMethod() {
···
}
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};
```
上面代码使用了对象属性的简洁表示法直接将两个函数放在大括号中再使用assign方法添加到SomeClass.prototype之中。
**3克隆对象**
```javascript
function clone(origin) {
return Object.assign({}, origin);
}
```
上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。
不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。
```javascript
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
```
**4为属性指定默认值**
```javascript
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
let options = Object.assign({}, DEFAULTS, options);
}
```
上面代码中DEFAULTS对象是默认值options对象是用户提供的参数。assign方法将DEFAULTS和options合并成一个新对象如果两者有同名属性则option的属性值会覆盖DEFAULTS的属性值。
## __proto__属性Object.setPrototypeOf()Object.getPrototypeOf() ## __proto__属性Object.setPrototypeOf()Object.getPrototypeOf()
**1__proto__属性** **1__proto__属性**
@ -70,7 +270,7 @@ obj.method = function() { ... }
**2Object.setPrototypeOf()** **2Object.setPrototypeOf()**
Object.setPrototypeOf方法的作用与__proto__相同用来设置一个对象的prototype对象。 Object.setPrototypeOf方法的作用与__proto__相同用来设置一个对象的prototype对象。它是ES6正式推荐的设置原型对象的方法。
```javascript ```javascript
@ -103,79 +303,6 @@ Object.getPrototypeOf(obj)
``` ```
## 增强的对象写法
ES6允许直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。
```javascript
var Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
```
这种写法用于函数的返回值,将会非常方便。
```javascript
function getPoint() {
var x = 1;
var y = 10;
return {x, y};
}
getPoint()
// {x:1, y:10}
```
## 属性名表达式
ES6允许定义对象时用表达式作为对象的属性名。在写法上要把表达式放在方括号内。
```javascript
var lastWord = "last word";
var a = {
"first word": "hello",
[lastWord]: "world"
};
a["first word"] // "hello"
a[lastWord] // "world"
a["last word"] // "world"
```
上面代码中对象a的属性名lastWord是一个变量。
下面是一个将字符串的加法表达式作为属性名的例子。
```javascript
var suffix = " word";
var a = {
["first" + suffix]: "hello",
["last" + suffix]: "world"
};
a["first word"] // "hello"
a["last word"] // "world"
```
## Symbol ## Symbol
ES6引入了一种新的原始数据类型Symbol。它通过Symbol函数生成。 ES6引入了一种新的原始数据类型Symbol。它通过Symbol函数生成。