ES6 JavaScript进阶面向对象

2020-06-03

◆面向对象编程介绍

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

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

举个例子：将大象装进冰箱，面向过程的做法：

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。

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

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

举个栗子:将大象装进冰箱,面向对象做法。先找出对象,并写出这些对象的功能:

1.大象对象

进去

2.冰箱对象

打开
关闭

3.使用大象和冰箱的功能（最会调用组织这些功能）

面向对象是以对象功能来划分问题,而不是步骤。

1.3 面向过程和面向对象的对比

面向过程

优点: 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。

缺点:没有面向对象易维护、易复用、易扩展

面向对象

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

缺点:性能比面向过程低

用面向过程的方法写出来的程序是一份蛋炒饭 ,而用面向对象写出来的程序是一份盖浇饭。

◆ES6 中的类和对象

面向对象

面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物，但是事物分为具体的事物和抽象的事物。如下图手机就是一个抽象的事物，但是图上的手机就是具体的、特指的手机。

2.1 对象

现实生活中:万物皆对象,对象是一个具体的事物 ,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”, 一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

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

对象是由属性和方法组成的:

属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)

2.2 类class

类抽象了对象的公共部分,它泛指某一大类 ( class )对象特指某一个,通过类实例化一个具体的对象

面向对象的思维特点:

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

2.3 创建类

语法:

1
2
3

class name {
// class body
}

创建实例: .

1	var XX = new name() ;//类必须使用new实例化对象

2.4 类constructor构造函数

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

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

2.5 类中添加方法

class Star {
    // 类的共有属性放到 constructor 里面
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    //公共方法
    sing(song) {
        console.log(this.uname + song);

    }
}

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

◆类的继承

3.1 继承

现实中的继承:子承父业,比如我们都继承了父亲的姓。程序中的继承:子类可以继承父类的一些属性和方法。

语法:

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

3.2 super 关键字

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。

1) super调用了父类中的构造函数

class Son extends Father {
    constructor(x, y) {
        super(x, y); //调用了父类中的构造函数
    }
}

2) super 关键字调用父类普通函数

class Son extends Father {
    say() {
        console.log(super.say() + '的儿子');
        // super.say() 就是调用父类中的普通函数 say()
    }
}

继承中的属性或者方法查找原则: 就近原则

继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

子类继承父类方法同时扩展自己方法

利用super 调用父类的构造函数，super 必须在子类this之前调用

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);

    }
}
class Son extends Father {
    constructor(x, y) {
        //super 必须在子类this之前调用
        super(x.y);
        this.x = x;
        this.y = y;
    }
    sub() {
        console.log(this.x - this.y);
    }
}
var son = new Son(1, 2);
son.sub();
son.sum();

三个注意点：

在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
类里面的共有的属性和方法一定要加this使用。
constructor 里面的this指向实例，对象方法里面的this指向这个方法的调用者。

对于某些方法（例如下面的sing（））中的this指向已经不是constructor例如，但是任然想使用constructor里的this，这时候可以创建一个全局变量（that），让that代替this。

 var that;
class Star {
    constructor(uname, age) {
    	that = this;
        this.uname = uname;
        this.age = age;
        this.btn = document.querySelector('button');
        this.btn.onclick = this.sing;//这里的sing不需要（），意思是点击之后调用这个方法。
    }
    sing() {
    // 这个sing方法里面的this指向的是 btn这个按钮,因为这个按钮调用了这个函数
    console.log(this.uname); //undefined 因为这个方法的this指向的是btn这个按钮，而不是ldh这个实例
   	console.log(that.uname); 

    }
}
var ldh = new Star('刘德华',16);

◆面向对象案例

面向对象版tab栏切换

功能需求:

1.击tab栏，可以切换效果.

2.点击+号,可以添加tab项和内容项.

3.点击x号,可以删除当前的tab项和内容项

4.双击tab项文字或者内容项文字，可以修改里面的文字内容。

抽象对象: Tab对象

1.该对象具有切换功能

2.该对象具有添加功能

3.该对象具有删除功能

4.该对象具有修改功能

*1）切换功能 *

点击nav上面的按钮，就会切换到相应的内容
点击按钮，这个按钮的下边框就会消失。

2）添加功能

1.点击+可以实现添加新的选项卡和内容

2.第一步:创建新的选项卡li和新的内容section

3.第二步:把创建的两个元素追加到对应的父元素中.

4.以前的做法:动态创建元素createElement ,但是元素里面内容较多,需要innerHTML赋值，在appendChild追加到父元素里面.

5.现在高级做法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中

6.appendChild不支持追加字符串的子元素insertAdjacentHTML支持追加字符串的元素

3) 删除功能

删除选中状态的按钮

1.点击x可以删除当前的Ii选项卡和当前的section

2.x是没有索引号的,但是它的父亲li有索引号,这个索引号正是我们想要的索引号

3.所以核心思路是:点击x号可以删除这个索引号对应的li和section

4.当我们删除了当前状态的这个li的时候，让他的前一个li处于选中状态。

1 2	index--; lis[index].click();//我们可以通过触发前一个的click事件使他处于选中状态。手动调用点击事件，不需要鼠标触发。

但是当index为0，也就是删除第一个li后，index是-1，此时就会报错

1	lis[index] && lis[index].click();//先判断lis[index]是否存在。

删除非选中状态的按钮 原来的选中状态不变。

删除当前按钮之后，判断整个文档是否还有选中的类，如果有，就是删除了非选中状态的按钮，直接return，就不用执行后面的index–等操作

4）编辑功能

1.双击选项卡li或者section里面的文字，可以实现修改功能

2.双击事件是: ondblclick

3.如果双击文字,会默认选定文字,此时需要双击禁止选中文字

1	window.getSelection ?window.getSelection().removeAllRanges(): document.selection.empty();

核心思路:双击文字的时候，在里面生成一个文本框, 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。

bug：当我们添加以及删除 li 和 section之后，都要更新class里面的li和section元素，因此在添加和删除操作后面都要从新获取一遍这些元素。

这个代码里面多次需要用到清空元素的类，可以将这个功能封装成一个函数。

面向对象编程总结

抽象出对象
每个对象有什么功能
对象实例化
编写constructor函数，这里面写的都是一些实例化对象的时候就会执行的代码（一刷新网页就会有的效果，比如一些元素获取，页面的初始化）
网页一般都有初始化（init）和加载（load）方法
所有的变量和方法都需要指定this，有时候可以用that代替实例化的那个对象。