ES5 类的实现

1
2
3
4
5
6
7
8
9
10
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.toString = function () {
  return "(" + this.name + "," + this.age + ")";
};
var p = new Person("张三", 18);
console.log(p); // Person { name: '张三', age: 18 }

ES6 类的实现

ECMAScript 6 实现了 class，class 是一个语法糖，使得 js 的编码更清晰、更人性化、风格更接近面向对象的感觉；也使 IDE 、编译期类型检查器、代码风格检查器等工具更方便地检测代码语法，做静态分析。同样的，这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触 js。

1
2
3
4
5
6
7
8
9
10
11
12
class Person {
  //ES6创建一个class会默认添加constructor方法，并在new调用时自动调用该方法。
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toString() {
    return "(" + this.name + "," + this.age + ")";
  }
}
var p = new Person("张三", 18);
console.log(p); // Person { name: '张三', age: 18 }

new 调用

效果：class 类必须使用 new 调用，否则会报错。

1
2
ES5;
Person(); // undefined
1
2
ES6;
Person(); // TypeError: Class constructor Person cannot be invoked without 'new'

es6 class 与 es5 的面向对象的区别：

  1. 写法不同，使用关键字 class 2.当 new 一个实例，默认有一个 constructor 方法，且默认返回实例对象（this）,也可以返回另一对象 3.类的所有方法都在 prototype 属性上，但是不可枚举，且每方法结束不能使用分号 4.类的调用必须通过 new 一个实例,且类的内部默认使用严格模式 5.不存在变量提升，必须先声明，再调用
    6.class 的 this 默认指向当前类
    7.class 的静态方法，使用关键字 static,不需 new,直接通过类来调用
  2. 实例属性和静态属性的写法，实例属性在类的内部直接使用等式（=）写法，也可以写在 constructor 方法里，静态属性只需在实例属性前加一个关键字 static 即可 9.类的继承使用关键字 extends,继承机制与 es5 完全不同，
    es5 的继承原理：先 new 子类的实例对象 this,再通过将父类的方法和属性添加到子类的 this 上(parents.call(this))。
    Es6 的继承原理：先创造父类的实例对象 this,所以要构造函数 constructor（）访问父类的属性使用 this,必须先调用 super()方法；再通过子类的 constructor()来修改 this
    10．类的继承可以继承原生的构造函数，es5 不可以

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);
    this.color = color;
  }
  toString() {
    return this.color + " " + super.toString();
  }
}
let ins = new ColorPoint(1, 2, "red");
console.log(ins.toString()); /* red [object Object] */

封装

多态

  • 同一个接口，在不同情况下做不一样的事情；相同的接口，不同的表现；
  • 接口本身只是一组定义，实现都是子类里面；需要子类去实现的方法（子类只需重写与父类同名的方法，即可达到覆盖的效果），若子类有跟父类同名的方法，则会直接走子类的方法，不会走父类的；
  • 非静态方法中，仍然子类可通过 super..方法名（ ）（举例：super.say（ ） ），来调用父类的方法（supe 指向的事父类的原型）

重载

根据函数的参数类型，参数个数
作用：为一个函数提供了更丰富的行为