傻瓜都能理解的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();

就会报错: alt

5. 需要注意的点

类里面共有的属性和方法一定要加 this 使用。
构造器中的 this 指向当前实例对象。
类里面方法中的 this 指向这个方法的调用者(还是当前实例对象)。

「参考资料:」 传智教育 - JavaScript 进阶面向对象 ES6 面向过程与面向对象的区别

本文由 mdnice 多平台发布

猜你喜欢

转载自blog.csdn.net/ppppppppppsd/article/details/128713402