javascript复习之旅 11.1 class基础使用

start

• ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

ES5写法

// class 基本用法

function Tomato(name) {
  console.log('Tomato方法执行了')
  this.name = name
  this.age = '18'
}

Tomato.prototype.age = '原型对象上的age属性'
Tomato.prototype.say = function() {
  console.log('原型上的say方法')
}

Tomato.color = 'red'

Tomato.eat = function() {
  console.log('可以吃哦')
}

var t = new Tomato('千禧')

console.log(t)
// Tomato { name: '千禧', age: '18' }

console.log(Object.keys(Tomato))
// [ 'color', 'eat' ]

Tomato()
// 可执行

class写法

class Tomato {
  age = '18'

  constructor(name) {
    console.log('Tomato方法执行了')
    this.name = name
  }

  say() {
    console.log('原型上的say方法')
  }

  static color = 'red'

  static eat() {
    console.log('可以吃哦')
  }
}

var t = new Tomato('千禧')

console.log(t)
// Tomato { name: '千禧', age: '18' }

console.log(Object.keys(Tomato))
// [ 'color']
/* 1. 类的内部所有定义的方法，都是不可枚举的（non-enumerable） */

// Tomato()
// 报错 Class constructor Tomato cannot be invoked without 'new'
/* 2. 类必须使用`new`调用，否则会报错 */

对比截图

注意事项

使用的注意事项

1. class小写
2. class声明的是不需要加括号的
3. 函数要简写，不可say:function (){ console.log('你好呀'+this.name)}

语法注意事项

1. 类的内部所有定义的方法，都是不可枚举的（non-enumerable）

2. 类必须使用new调用，否则会报错

3. 一个类必须要有 constructor 没有的话 默认为一个空的 constructor

4. 类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

5. class声明的函数 不会提升

end

暂时就这些，后续更深入理解了再写文章