ES7类属性是个什么概念？

Question

学习react时，看到这样的写法:

class Test extends Components {
    foo = 'foo';
    
    handleClick = () => {
      // todos
    }
}

只是见到说这是ES7的类属性语法，但搜不到什么详细的文章。
请问ES7的类属性是个怎样的概念？

Answer 1

见MDN:JavaScript/Classes

Public and private field declarations are an experimental feature (stage 3) proposed at TC39, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like Babel.

类属性至今并没有进入 javacript 标准，还不是 javascript 的一部分。

但是，有些 javascript 的预编译系统，比如 typescript ，实现了类属性。（上文里还提到了 Babel ，但是不熟，不去找文档了。）这些的实现都是第三方实现，有关其中类属性的用法，必须去查找相关的第三方工具。不同工具的实现方式也不一定一致。

javascript 自己的类属性，现在已经有了一个提案，并且已经到了 stage 3 ，应该很快就要进入标准了。

======================
typescript 里，

class CLS {
    a = 1;
}

会被编译为：

class CLS {
    constructor() {
        this.a = 1;
    }
}

Answer 2

类的概念es6就有了，其实class更像是es5的语法糖，让写传统语言如c++,java的人更好理解。你可以参考ECMAScript 6 入门之Class
比如说

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

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

其实可以改写为：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

所谓的类和继承，都可以通过原型来实现，比如：

class Animal{
  constructor (name) {
    this.name = name
  }

  run() {
    console.log(`${this.name}可以跑`)
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name)
  }

  run(){
    console.log(`${this.name}可以四肢腿跑`)
  }
}

class Duck extends Animal {
  constructor(name) {
    super(name)
  }

  run(){
    console.log(`${this.name}可以两只腿跑`)
  }
}

let cat = new Cat('Tom')
let duck = new Duck('Donald')

cat.run() // Tom可以四肢腿跑
duck.run()// Donald可以两只腿跑

如果改成用原型实现的话：

let animal = {
  run(){
    console.log('我可以跑')
  }
}

let cat = Object.create(animal,{
  say(){
    console.log('我是cat')
  }
})

let duck = Object.create(animal,{
  say(){
    console.log('我是duck')
  }
})

let someCat = Object.create(cat)
let someDuck = Object.create(duck)

someCat.say()
someDuck.say()

Answer 3

http://es6.ruanyifeng.com/#do...