[JavaScript知识库]ES6面向对象

一、 面向对象编程介绍

1.1 面向过程编程 POP

POP(Process-oriented programming)

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

举例:将大象装到冰箱，面向过程的做法:

1.打开冰箱门——2.把大象装进冰箱——3.关上冰箱门

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

1.2面向对象编程 OOP

OOP(Object Oriented Programming)

面向对象是把事物分解成一个个对象，然后由对象之间分工合作

举例:将大象装进冰箱，面向对象做法

先找出对象，并写出这些对象的功能

1.大象对象

- 进去

2.冰箱对象

- 打开

- 关闭
3.使用大象和冰箱的功能

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

面向对象的特性:

• 封装性

• 继承性

• 多态性

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

• 面向过程

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

  • 缺点:没有面相对象易维护，易复用，易扩展

• 面向对象

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

  • 缺点:性能比面向过程低

面向过程的方法写出来得程序就像是一份蛋炒饭，面向对象写出来的程序就像一份盖浇饭

二、ES6中的类和对象

面向对象

面相对象更贴近我们的实际生活，可以使用面向对象描述显示世界事物，但是事物分为具体的事物和抽象的事物

抽象的(泛指的)

具体的(特指的)

面向对象的思维特点:

• 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)

• 对类进行实例化，获取类的对象

面相对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，智慧对象做事情

对象

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

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

• 属性:事物的特征，在对象中用属性来表示

• 方法:事物的行为，在对象中用方法来表示

类class

类抽象了对象的公共部分，它泛指某一大类

对象特指某一个，通过类实例化一个具体的对象

2.1创建类和生成实例

• 创建类

语法:

class name{
//class body
}

• 创建实例

var xx=new name()

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

• 类constructor构造函数

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

实例:

<script>
    // 1.创建类 class 创建一个 人类
    class person {
        // 类的共有属性放到 constructor 里面
        constructor(uname, age) {
            this.uname = uname;
            this.age = age;
        }
    }
    // 2.利用类创建对象 new
    var person1 = new person('小海', 18);
    var person2 = new person('小明', 30);
    console.log(person1);
    console.log(person2);

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

2.2类添加方法

class Person{
constructor (name,age){
this.name=name;
this.age= age;
}
say(){
console.log(this.name+"hallo")
}
}

实例:

// 1.创建类 class 创建一个 人类
class person {
// 类的共有属性放到 constructor 里面
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
chi(eat) {
console.log(this.uname + '吃' + eat);
}
}

// 2.利用类创建对象 new
var person1 = new person('小海', 18);
var person2 = new person('小明', 30);
person1.chi('西红柿炒鸡蛋');
person.chi('番茄炒鸡蛋');
// 1.我们类里面的所有函数不需要写 function
// 2.多个函数方法之间不需要添加逗号分隔

2.3 类的继承

程序中的继承：子类可以继承父类的一些属性和方法

语法：

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

}

• super 关键字

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

语法：

<script>
// super 关键字调用父类普通函数
class Father {
say() {
return '我是父级';
}
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
say() {
// console.log('我是子类');
console.log(super.say() + '的儿子');
// super.say() 就是调用父类中的普通函数 say()
}
}
var son = new Son();
son.say();?
// 继承中的属性或者方法查找原则：就近原则
//
1.继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
//
2.继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
</script>

注意：子类在构造函数中使用 super ，必须放在
this前面（必须调用父类的构造方法，再使用子类构造方法）

2.4 三个注意点

• 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

• 类里面的共有属性和方法一定要加 this 使用

• 类里面的 this 指向问题

• constructor 里面的 this 指向实例对象，方法里面的 this 指向这个方法的调用者

三.ES6中的模块化

3.1模块化的好处

模块化:将大的项目文件，拆成多个小的，然后再组合起来

1. 不同的模块里，想同命名不冲突

2. 代码复用

3. 高维护性

3.2export 和 import

在ES6中每一个模块都是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的，如果你希望外部可以读取模块中的内容，就必须用export来进行导出

• 生成 package.json npm init -y命令来创建一个npm程序时，会自动生成一个package.json文件，
• 添加type : module 属性

我们要在package.json添加属性:
“type”: “module”,

{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"

},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC"

}

• export 导出

新建01.js代码如下:

export let num=10;
export let nut=20

• import 导入

新建02.js 代码如下

import {num,nut} from "./01.js";
console.log(num,nut);

在vscode中按住CTRl+`打开cmd命令行，输入 node 02.js 运行结果如下

10
20

3.3export default

01.js代码如下

export default function fn() {
console.log("hello word");
}

02.js代码如下

import my from "./01.js"
my()

输出的结果是

hello word

第二种方法

01.js

let obj = {
fn(){
console.log("hello");
},
num:10,
getsum:function(){
console.log("求和");
},
getnum:function(){
console.log("总");
}
}

export default obj

02.js

import myobj from "./01.js";
myobj.fn()
myobj.getsum()
myobj.getnum()
console.log(myobj.num);

输出结果

hello
求和
总
10

3.4 export和export default的区别

1. export与export default均可用于导出常量、函数、文件、模块等
2. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 |
   模块)名的方式，将其导入，以便能够对其进行使用
3. 在一个文件或模块中，export、import可以有多个，export default仅有一个
4. 通过export方式导出，在导入时要加{ }，export default则不需要