关于前端:傻瓜都能理解的JavaScript面向对象

1. 面向过程与面向对象

面向过程（Procedure Oriented）：以 过程 为外围，强调事件的流程、程序。

面向对象（Object Oriented）：以 对象 为外围，强调事件的角色、主体。

举个简略的例子 – 把大象装进冰箱：

• 面向过程：依照步骤（过程）来编程

  1. 关上冰箱
  2. 把大象装进去
  3. 敞开冰箱
• 面向对象
  首先确定两个对象，大象和冰箱。
  而后确定它们的性能：
      大象 – 装进某个货色
      冰箱 – 关上，敞开
  最初调用这两个对象的性能来实现。

从成果上来说：

面向过程性能高，不易保护。适宜简略零碎。

面向对象易保护、易复用、易扩大，更加灵便。性能比面向过程低，更适宜简单零碎。

2. 类和对象

类：形象出的对象的公共局部（属性和办法）。

对象：具体的事物。通过类实例化一个具体的对象。

比方，平时说的 狗（会叫，会咬人）就是一个类。

你的狗是二哈，你的狗就是具体的对象。

二哈具备狗这个类的属性（会叫，会咬人），也有本人的一些属性（睡觉打呼噜）。

面向对象三大个性：封装、继承和多态。

封装：把公共的局部封装起来，比方封装成 类。

继承：子类可能继承父类的属性和办法。

多态：同一操作作用于不同的对象，能够有不同的解释，产生不同的执行后果。比方：你的狗会汪汪叫，我的狗会呜呜叫。它们都会叫，然而体现不同。

3. ES6 类的代码实现

class Person {constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {console.log(` 我叫 ${this.name}, 往年 ${this.age}岁 `);
  }
}

const jack = new Person('Jack', 18);
jack.say(); // 我叫 Jack, 往年 18 岁

// 子类继承父类
class Student extends Person {}

const jim = new Student('Jim', 19);
jim.say(); // 我叫 Jim, 往年 19 岁

办法调用优先级：继承中，如果子类有个某个办法就先调用子类的，子类没有再调用父类的。

4. super 关键字

在子类中，应用 super 关键字能够调用父类的办法。

super()调用父类的构造函数，super.say()调用父类的一般函数。须要留神的是，super 必须在子类 this 前调用。
比方：

class Student extends Person {constructor(name, age, score) {
    this.score = score; // 正确的写法应该把 super 调用放在这句后面
    super(name, age);
  }
  say() {super.say();
    console.log(` 我考了 ${this.score}分 `);
  }
}
const jim = new Student('Jim', 19, 100);
jim.say();

就会报错：

5. 须要留神的点

类外面共有的属性和办法肯定要加 this 应用。

结构器中的 this 指向以后实例对象。

类外面办法中的 this 指向这个办法的调用者(还是以后实例对象)。

参考资料：
传智教育 – JavaScript 进阶面向对象 ES6
面向过程与面向对象的区别

本文由 mdnice 多平台公布