前端-JS基础之面向对象

Class

用法

class跟let、const一样：不存在变量提升、不能重复声明…

es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

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

//es5
function Fn(x, y) {
   
  this.x = x;
  this.y = y;
}

Fn.prototype.add = function () {
   
  return this.x + this.y;
};
//等价于
//es6
class Fn{
   
  constructor(x,y){
   
    this.x = x;
    this.y = y;
  }
  
  add(){
   
    return this.x + this.y;
  }
}

var F = new Fn(1, 2);
console.log(F.add()) //3

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

class Fn {
   
  constructor() {
   
    // ...
  }

  add() {
   
    // ...
  }

  sub() {
   
    // ...
  }
}

// 等同于

Fn.prototype = {
   
  constructor() {
   },
  add() {
   },
  sub() {
   },
};

类的内部所有定义的方法，都是不可枚举的（non-enumerable），这与es5不同。

//es5
var