mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
修改class
This commit is contained in:
parent
032e950fdd
commit
ace860f263
@ -40,12 +40,20 @@ point.toString() // (2, 3)
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码定义了一个“类”,可以看到里面有一个constructor函数,这就是构造函数。而this关键字则代表实例对象。
|
上面代码定义了一个“类”,可以看到里面有一个constructor函数,这就是构造函数,而this关键字则代表实例对象。这个类除了构造方法,还定义了一个toString方法。注意,定义方法的时候,前面不需要加上function这个保留字,直接把函数定义放进去了就可以了。
|
||||||
|
|
||||||
Class之间可以通过extends关键字,实现继承。
|
Class之间可以通过extends关键字,实现继承。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
|
class ColorPoint extends Point {}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point类。下面,我们在ColorPoint内部加上代码。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
class ColorPoint extends Point {
|
class ColorPoint extends Point {
|
||||||
|
|
||||||
constructor(x, y, color) {
|
constructor(x, y, color) {
|
||||||
@ -61,7 +69,7 @@ class ColorPoint extends Point {
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。在constructor方法内,super就指代父类Point;在toString方法内,`super()`表示对父类求值,由于此处需要字符串,所以会自动调用父类的toString方法。
|
上面代码中,constructor方法和toString方法之中,都出现了super关键字,它指代父类的同名方法。在constructor方法内,super指代父类的constructor方法;在toString方法内,super指代父类的toString方法。
|
||||||
|
|
||||||
## Module的基本用法
|
## Module的基本用法
|
||||||
|
|
||||||
|
@ -44,9 +44,9 @@ Node.js的0.11版还不是稳定版本,要使用版本管理工具[nvm](https:
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
source nvm.sh
|
$ source nvm.sh
|
||||||
nvm use 0.11
|
$ nvm use 0.11
|
||||||
node --harmony
|
$ node --harmony
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -55,6 +55,7 @@ node --harmony
|
|||||||
```bash
|
```bash
|
||||||
|
|
||||||
$ node --v8-options | grep harmony
|
$ node --v8-options | grep harmony
|
||||||
|
|
||||||
--harmony_typeof
|
--harmony_typeof
|
||||||
--harmony_scoping
|
--harmony_scoping
|
||||||
--harmony_modules
|
--harmony_modules
|
||||||
@ -74,7 +75,7 @@ $ node --v8-options | grep harmony
|
|||||||
|
|
||||||
## Traceur编译器
|
## Traceur编译器
|
||||||
|
|
||||||
Google公司的[Traceur](https://github.com/google/traceur-compiler)编译器,可以将ES6代码编译为ES5代码。
|
Google公司的[Traceur](https://github.com/google/traceur-compiler)编译器,可以将ES6代码编译为ES5代码。这意味着,你可以用ES6的方式编写程序,又不用担心浏览器是否支持。
|
||||||
|
|
||||||
它有多种使用方式。
|
它有多种使用方式。
|
||||||
|
|
||||||
@ -173,7 +174,7 @@ $traceurRuntime.ModuleStore.getAnonymousModule(function() {
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
npm install -g traceur
|
$ npm install -g traceur
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -189,11 +190,11 @@ Calc constructor
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
如果要将ES6脚本转为ES5,要采用下面的写法
|
如果要将ES6脚本转为ES5保存,要采用下面的写法
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
traceur --script calc.es6.js --out calc.es5.js
|
$ traceur --script calc.es6.js --out calc.es5.js
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -203,7 +204,7 @@ traceur --script calc.es6.js --out calc.es5.js
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
traceur --script calc.es6.js --out calc.es5.js --experimental
|
$ traceur --script calc.es6.js --out calc.es5.js --experimental
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
- Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值
|
- Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值
|
||||||
- Mozilla Developer Network, [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet):介绍WeakSet数据结构
|
- Mozilla Developer Network, [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet):介绍WeakSet数据结构
|
||||||
- Mathias Bynens, [Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 详细介绍正则表达式的u修饰符
|
- Mathias Bynens, [Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 详细介绍正则表达式的u修饰符
|
||||||
|
- Jack Franklin, [An introduction to ES6 classes](http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/): ES6 class的入门介绍
|
||||||
|
|
||||||
## Generator
|
## Generator
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user