JavaScript高级第一天学习总结—— 面向对象ES6 中的类和对象类的继承案例：面向对象版tab 栏切换

Posted 2021-09-09 李穩钰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高级第一天学习总结—— 面向对象ES6 中的类和对象类的继承案例：面向对象版tab 栏切换相关的知识，希望对你有一定的参考价值。

面向对象编程介绍

两大编程思想

面向过程
面向对象

面向过程编程 POP(Process-oriented programming)

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
总结：按照步骤编程（函数和变量）

面向对象编程 OOP (Object Oriented Programming)

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
总结：将需求分析出一个一个的对象，然后在分析出对象中的属性和方法，最后按照步骤编程（方法和属性）
特性：封装性、继承性、多态性

面向过程与面向对象对比

	面向过程	面向对象
优点	性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。	易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
缺点	不易维护、不易复用、不易扩展	性能比面向过程低

应用场景

比较简单的逻辑，使用面向过程，前端更偏向使用面向过程。
比较复杂的逻辑，使用面向对象，后端更偏向使用面向对象。

ES6 中的类和对象

面向对象

面向对象的思维特点:

抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
对类进行实例化, 获取类的对象

实例：实际的例子，对象
实例化：通过类的构造函数，来创建对象，实例

对象

在 javascript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：是一组无序键值对的集合,指的是一个具体的事物

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

类class

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。
类抽象了对象的公共部分，它泛指某一大类（class）
对象特指某一个，通过类实例化一个具体的对象

创建类

语法：

步骤1 定义类：使用class关键字

//步骤1 定义类：使用class关键字
class name {
  // class body
}

步骤2 创建实例：使用定义的类创建实例注意new关键字

//步骤2 创建实例：使用定义的类创建实例  注意new关键字
var xx = new name();

注意：类必须使用new实例化对象

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 创建类 class  创建一个 明星类
        class Star {
        // constructor 构造函数 一般用来做初始化工作
        // 它的参数需要在实例化（new）对象的时候传递过来
            constructor(uname, age) {
                // this 指的是当前实例化的对象
                this.uname = uname;
                this.age = age;
            }
        }

        // 2. 利用类创建对象 new  得到的结果 就是实例化对象或者实例 或者叫对象
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(ldh);
        console.log(zxy);
        //(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
        //(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
        //(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
        //(4) 生成实例 new 不能省略
        //(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
    </script>
</body>

</html>

类创建添加属性和方法

构造函数

constructor()方法是类的构造函数(默认方法)，用于传递参数,返回实例对象
通过 new 命令生成对象实例时，自动调用该方法
如果没有显示定义, 类内部会自动给我们创建一个constructor()
构造函数的作用：给对象添加（构造）属性

构造函数添加属性

语法：

步骤1 在类中定义构造函数constructor，函数名固定

//步骤1 在类中定义构造函数constructor，函数名固定
class Person {
  constructor(name,age) {//定义形参
      // this 指的是当前实例化的对象
      this.name = name;//将形参赋值给this对象的对应属性
      this.age = age;
    }
}

步骤2 在实例化对象的时候，传递实参

//步骤2 在实例化对象的时候，传递实参
var ldh = new Person('刘德华', 18); //这里的实参默认传递给Person类中的constructor
console.log(ldh.name);//刘德华

注意事项:

通过class关键字创建类，类名我们还是习惯性定义首字母大写
类里面有个constructor 函数，可以接受传递过来的参数，同时返回实例对象
constructor 函数只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数,类也会自动生成这个函数
生成实例 new 不能省略
语法规范, 创建类类名后面不要加小括号,生成实例类名后面加小括号, 构造函数不需要加function

类中添加方法

语法：

步骤1 使用class关键字

//步骤1 使用class关键字
class Person {
  constructor(name,age) {   // constructor 构造器或者构造函数
      this.name = name;
      this.age = age;
    }/---------------------------->注意,方法与方法之间不需要添加逗号
   say() {
      console.log(this.name + '你好');
   }
}

步骤2使用定义的类创建实例 注意new关键字

//步骤2使用定义的类创建实例  注意new关键字
var ldh = new Person('刘德华', 18); 
ldh.say()

注意：

我们类里面所有的函数不需要写function
多个函数方法之间不需要添加逗号分隔

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 创建类 class  创建一个 明星类
        class Star {
            // 类的共有属性放到 constructor 里面
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
                // console.log('我唱歌');
                console.log(this.uname + song);
            }
        }

        // 2. 利用类创建对象 new
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(ldh);
        console.log(zxy);
        // (1) 我们类里面所有的函数不需要写function 
        //(2) 多个函数方法之间不需要添加逗号分隔
        ldh.sing('冰雨');
        zxy.sing('李香兰');
    </script>
</body>

</html>

类的继承

继承extends

现实中的继承：子承父业，比如我们都继承了父亲的姓。
程序中的继承：子类可以继承父类的一些属性和方法。
类的继承：为了复用代码

语法：

// 父类
class Father{
    
} 

// 子类继承父类
class  Son extends Father {  
    
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Father {
            constructor(surname) {
                this.surname= surname;
            }
            say() {
                console.log('你的姓是' + this.surname);
            }
        }

        class Son extends Father{  // 这样子类就继承了父类的属性和方法
            
        }
        var damao= new Son('刘');
        damao.say();      //结果为 你的姓是刘
    </script>
</body>
</html>

补充

1.Son如果只是要继承父类的方法，什么都不用写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 类的继承 Son如果只是要继承父类的方法，什么都不用写
        class Father {
            constructor() {

            }
            money() {
                console.log(100);

            }
        }
        class Son extends Father {

        }
        var son = new Son();
        son.money();  // 结果是100
    </script>
</body>
</html>

2.Son如果要在父类的基础之上做扩展，就可以重写方法（重新书写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 2. Son如果要在父类的基础之上做扩展，就可以重写方法（重新书写）
        // Son可以扩展属性，也可以扩展方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);

            }
        }
        class Son extends Father {
            // (1)重写父类的构造函数 (主要是为了扩展属性)
            constructor(x, y, z) {
                super(x, y); //调用了父类中的构造函数
                //相当于：Father(x,y);
                //相当于：this.x = x; this.y = y;调用父类的构造函数，让父类帮助Son添加x，y属性
                this.z = z; // son新增的属性，需要自己处理
            }
             //（2） 自己新增的方法
            sum2() {
                console.log(this.x + this.y + this.z);
            };
            //（3）重写父类的普通方法
            sum() {
                // console.log(this.x + this.y);
                //既然要重写，肯定是要与父亲不一样，所以，改为以下需求
                //求 x  到 y 的和
            }
        }
        var son = new Son(1, 2, 3);
        var son1 = new Son(11, 22);
        son.sum();
        son1.sum();
    </script>
</body>
</html>

重写：重新定义父类继承过来的方法
什么时候重写：子类要对父类方法进行扩展时，就可以重写方法

super关键字

super介绍

super 关键字用于访问和调用对象父类上的函数。
可以调用父类的构造函数，也可以调用父类的普通函数
super理解为父类，如果父类是Father，super等同于Father

super的应用场景: 在子类重写父类方法时去使用,通过super调用父类方法.

语法：

class Person { // 父类
    constructor(surname){
        this.surname = surname;
    }
}

class Student extends Person { // 子类继承父类
    constructor(surname,firstname){
        super(surname); // super调用父类的constructor(surname)
        this.firstname = firstname; // 定义子类独有的属性
    }
}

注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 2. Son如果要在父类的基础之上做扩展，就可以重写方法（重新书写）
        // Son可以扩展属性，也可以扩展方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                // console.log(this.x + this.y); //这里就不能打印结果了，需要将结果返回
                return this.x + this.y;
            }
        }
        class Son extends Father {
            // (1)重写父类的构造函数 (主要是为了扩展属性)
            constructor(x, y, z) {
                super(x, y); //调用了父类中的构造函数
                //相当于：Father(x,y);
                //相当于：this.x = x; this.y = y;调用父类的构造函数，让父类帮助Son添加x，y属性
                this.z = z; // son新增的属性，需要自己处理
            }
             //（2） 自己新增的方法
            sum2() {
                console.log(this.x + this.y + this.z);
            };
            //（3）重写父类的普通方法
            sum() {
                // console.log(this.x + this.y);
                // 修改需求： x  - y 的和 
                // 扩展需求：x+y+z （扩展：是在父类基础之后进行扩展）
                var result = super.sum() + this.z;//所以利用父类的sum计算x+y，我再+z
                // Father.sum()
                console.log(result);
            }
        }
        var son = new Son(1, 2, 3);      
        // son.x,son.y,son.z
        son.sum();
        // super的应用场景:  在子类重写父类方法时去使用,通过super调用父类方法.
    </script>
</body>
</html>

super查找原则

super可以调用父类的构造函数，也可以调用父类的普通函数

super.say()就是调用父类中的普通函数 say()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" contentjavascript 学习总结 第一天
 javascript 学习总结 第一天
 接触Python的第一天
 python新手---学习第一天
 js基础学习总结第一天
 JavaScript高级程序设计（第三版）学习，第一次总结