[TOC]

✊总要有人成为第一，为什么不是你。

2021年09月13日

今日总结

(1)面向过程

<!DOCTYPE html>

(2)面向对象

<!DOCTYPE html>

(3)class

<!DOCTYPE html>

js高阶-面向过程与面向对象

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

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

面向过程设计就是先分解过程步骤：

1、开始游戏
2、黑子先走
3、绘制画面
4、判断输赢
5、轮到白子
6、绘制画面
7、判断输赢
8、返回步骤2
9、输出最后结果

然后把上面每个步骤用分别的函数来实现，问题就解决了。

面向对象设计又是另一套思路了。

1.2面向对象 OOP(Object Oriented Programming)

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
先找出对象，并写出这些对象的功能

整个五子棋可以分为：

1、黑白双方，这两方的行为是一模一样的
2、棋盘系统，负责绘制画面
3、规则系统，负责判定诸如犯规、输赢等。

第一类对象（玩家对象）负责接受用户输入，并告知第二类对象（棋盘对象）棋子布局的变化，棋盘对象接收到了棋子的i变化就要负责在屏幕上面显示出这种变化，同时利用第三类对象（规则系统）来对棋局进行判定。

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

1.3面向过程与面向对象对比

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工

面向对象的特性：

封装性
继承性
多态性

理解“高内聚，低耦合”的思想

（1）耦合性：也称块间联系。指软件系统结构中各模块间相互联系紧密程度的一种度量。模块之间联系越紧密，其耦合性就越强，模块的独立性则越差。模块间耦合高低取决于模块间接口的复杂性、调用的方式及传递的信息

（2）内聚性：又称块内联系。指模块的功能强度的度量，即一个模块内部各个元素彼此结合的紧密程度的度量。若一个模块内各元素（语名之间、程序段之间）联系的越紧密，则它的内聚性就越高。

所谓高内聚指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则

低耦合：一个完整的系统，模块与模块之间，尽可能的使其独立存在。也就是说，让每个模块，尽可能的独立完成某个特定的子功能**。模块与模块之间的接口，尽量的少而简单。如果某两个模块间的关系比较复杂的话，最好首先考虑进一步的模块划分。这样有利于修改和组合。

参考资料：（变强必备）

面向对象和面向过程究竟长什么样？

2.对象与类

2.1对象

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

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

2.1.1创建对象

//以下代码是对对象的复习
//字面量创建对象
var ldh = {
    name: '刘德华',
    age: 18
}
console.log(ldh);

//构造函数创建对象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('刘德华', 18)//实例化对象
console.log(ldh);

如上两行代码运行结果为:

2.2类

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

2.2.1创建类

语法:

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

示例

 // 1. 创建类 class  创建一个 明星类
 class Star {
   // 类的共有属性放到 constructor 里面
   constructor(name, age) {
   this.name = name;
   this.age = age;
   }
 }
   // 2. 利用类创建对象 new
   var ldh = new Star('刘德华', 18);
   console.log(ldh);

以上代码运行结果:

通过结果我们可以看出,运行结果和使用构造函数方式一样

2.2.2类创建添加属性和方法

// 1. 创建类 class 创建一个类 class Star { // 类的共有属性放到 constructor 里面 constructor是构造器或者构造函数 constructor(uname, age) { this.uname = uname; this.age = age; }//—————————————————————->注意,方法与方法之间不需要添加逗号 sing(song) { console.log(this.uname + ‘唱’ + song); } } // 2. 利用类创建对象 new var ldh = new Star(‘刘德华’, 18); console.log(ldh); // Star {uname: “刘德华”, age: 18} ldh.sing(‘冰雨’); // 刘德华唱冰雨

以上代码运行结果:

注意哟:

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

2.2.3类的继承

语法

// 父类
class Father{   
} 

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

示例

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);
       }
}

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

以上代码运行结果:

子类使用super关键字访问父类的方法

//定义了父类 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(x, y); //使用super调用了父类中的构造函数 } } var son = new Son(1, 2); son.sum(); //结果为3

注意:**

继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用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 调用父类的构造函数 super 必须在子类this之前调用,放到this之后会报错 super(x, y); this.x = x; this.y = y; } subtract() { console.log(this.x - this.y); } } var son = new Son(5, 3); son.subtract(); //2 son.sum();//8

以上代码运行结果为:

4.时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.

constructor中的this指向的是new出来的实例对象
自定义的方法,一般也指向的new出来的实例对象
绑定事件之后this指向的就是触发事件的事件源

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

3.面向对象版tab 栏切换

3.1功能需求

点击 tab栏,可以切换效果.
点击 + 号, 可以添加 tab 项和内容项.
点击 x 号, 可以删除当前的tab项和内容项.
双击tab项文字或者内容项文字可以修改里面的文字内容

3.2案例准备

获取到标题元素
获取到内容元素
获取到删除的小按钮 x号
新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)
时刻注意this的指向问题

3.3需求图

自己总结

面向对象与面向过程

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

内聚(模块内部代码依赖性高)
耦合(模块与模块之间的依赖性)

class

在 JavaScript 中，类是一种函数。如下，技术上来说，MyClass 是一个函数（我们提供作为 constructor 的那个），而 methods、getters 和 settors 都被写入了 MyClass.prototype

class MyClass{
    constractor() {}     //初始化对象
    method1() {}         //类的方法间没有逗号
    method2() {}
    method3() {}
    ...
}
let  myClass = new MyClass()

类的继承用extends关键字
设置父类时，要调用constructor(){}构造器
不在constructor(){}设置方法，在class内部设置方法时，是向原型中设添加方法(即原型方法)
设置子类时
儿子有自己的实例属性时，需要加super，否则会报错
儿子没有自己的实例属性时，不需要加constructor(构造器)和super，也可以继承
调用一下super,相当于调用了父亲的构造函数
继承类的 constructor 必须调用 super(…)，并且 (!) 一定要在使用 this 之前调用。

class与构造函数

class


class Animal{
    // 每一个类中都有一个构造器，若没有指定构造器，那么这个构造器是隐形的，构造器的作用，就是每当new一个类，必然优先执行构造器中的代码
    constructor(name,age){
        this.name=name;//通过new实例的属性，叫做实例属性：dog.name
        this.age=age;
        // 静态属性，通过构造函数点出来的，直接访问到的属性叫做静态属性。构造函数名.属性
    }
    // 在class内部通过static修饰的属性就是静态属性，例如Animal.info;
    static info="黑色的";
    //动物的实例方法
    say(){
        console.log("汪汪~")
    }
    //可以通过dog.say()来执行；
    //动物的静态方法
    static show(){
        console.log("yellow body")
    }
};
const dog=new Animal("小白",3)

注意：

1、在class的{}区间内，只能写构造器，静态方法，静态属性，实例方法；
2、class关键字，还是用原来的普通构造函数，把class关键字称作语法糖
构造函数
```javascript //构造函数创建对象 fucntion Person(name,age){ this.name=name; this.age=age; } const student=new Person(“Person”,12) //实例方法 Person.prototype.say=function(){ console.log(“hello”) } //可以通过使用student.say()来执行；

//静态方法 Person.show=function(){ console.log(“world”); } //student.show()是无法用到的

```

JavaScript高阶

📝第四天每日总结(面向过程与面向对象)

2021年09月13日

今日总结

(1)面向过程

(2)面向对象

(3)class

js高阶-面向过程与面向对象

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

1.2面向对象 OOP(Object Oriented Programming)

1.3面向过程与面向对象对比

参考资料：（变强必备）

2.对象与类

2.1对象

2.1.1创建对象

2.2类

2.2.1创建类

2.2.2类创建添加属性和方法

2.2.3类的继承

3.面向对象版tab 栏切换

3.1功能需求

3.2案例准备

3.3需求图

自己总结

面向对象与面向过程

class

class与构造函数

class

注意：

构造函数

📝第四天 每日总结(面向过程与面向对象)

2021年09月13日

今日总结

(1)面向过程

(2)面向对象

(3)class

js高阶-面向过程与面向对象

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

1.2面向对象 OOP(Object Oriented Programming)

1.3面向过程与面向对象对比

参考资料：（变强必备）

2.对象与类

2.1对象

2.1.1创建对象

2.2类

2.2.1创建类

2.2.2类创建添加属性和方法

2.2.3类的继承

3.面向对象版tab 栏切换

3.1功能需求

3.2案例准备

3.3需求图

自己总结

面向对象与面向过程

class

class与构造函数

class

注意：

构造函数

📝第四天每日总结(面向过程与面向对象)