【JavaScript系列六】—讲述JS学习历程的知识分享！

前言

本篇主要讲述了面向对象开发的特点，对象和类的概念与区别，包括详细讲解一个Tab选项卡案例

一、面向对象

在引出面向对象之前，我们首先要了解面向过程的概念

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了

• 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程
• 缺点：不易维护、不易复用、不易扩展

面向对象就是把事务分解成为一个个对象，然后由对象之间分工与合作。倾向于以功能来划分问题，而不是步骤

• 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
• 缺点：性能比面向过程低

面向对象的三大特性

封装        继承        多态

对三大特性有兴趣的可以详细搜索了解~

二、对象和类

对象

• 现实生活中的对象指的是一个具体的事物

• JS 中的对象是由属性和方法组成的，是一个无序键值对的集合

类

• 在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象

• 类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象

基本使用（代码）

class Star {
    constructor(uname, age) {
        // 通过 new 命令生成对象实例时自动调用该方法
        this.uname = uname;
        this.age = age;
    }
    sing(s) {
        return s;
    }
}
var zjl = new Star('周杰伦', 18);
console.log(zjl.uname, zjl.age, zjl.sing('花海'));

类的继承

核心就是extends关键字

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
    money() {
        console.log(100);
    }
}
class Son extends Father {
    constructor(x, y) {
        // super 可以访问或调用父类上的函数
        // 这里相当于调用了父类的 constructor
        super(x, y);
    }
}
var s = new Son();
s.money(); // 100