JS高级（一）面向过程与面向对象

JS高级(一)

一、面向过程与面向对象

1、面向过程

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

2、面向对象

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

3、面向过程与面向对象对比

面向对象：易于维护、拓展，耦合性低；适用场景：多人合作的复杂项目
面向过程：不易于维护、拓展，耦合性高；适用场景：简单的功能模块

二、对象和类

1、对象

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

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

2、创建对象

//字面量创建对象
var ldh = {
    name: '刘德华',
    age: 18
}
console.log(ldh);//{name:"刘德华",age:18}

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

3、类

类 (泛指一类事物)：比如运动员，把公共的特征提取出来，封装在一个模板中（姓名，年龄，身高，特长…）

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

4、创建类

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

运行结果和使用构造函数方式一样

注意要点 :

1. class 创建的类首字母还是要大写
2. 类中的 constructor 构造函数, 接收 new 创建对象传递的参数，并返回实例对象（return this）
3. new 一个类时，自动调用构造函数方法，但不会自动调用类方法
4. 类中的构造函数 和 类方法不需要加 function （重点）
5. 多个类方法之间不需要使用逗号隔开 (重点)

5、大括号总结

• 函数体 fn () {}
• 定义对象 var obj = {}
• 条件语法 if () {}
• 定义一个类 class 类名 {}

6、类的继承

• 定义一个类（子类）通过 extends 继承父类上的方法和属性

​ class 子类名 extends 父类 {}

• super 关键字可以访问和调用父类上的函数，包括构造函数和类方法

 class People {
            constructor(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            };
            buy(phone) {
                console.log(this.name + '买了部' + phone);
            };
            say() {
                console.log('hello');
            };
        };
        class Student extends People {
            constructor(name, age, sex) {
                // 构造函数中要想使用this， 必须调用super（） 函数， 可以直接把参数传给父亲；
                super(name, age, sex);
            };
            // 子类方法
            say() {
                console.log('你好');
            };
            // 子类方法
            intro() {
                // super的第二个方法，可以直接去调用父类上的方法
                super.say(); //hello
                console.log('大家好，我是' + this.name);
            }
        };
        var xm = new Student('小明', 16, '男');
        console.log(xm);
        // 如果子类中有和父类中同名的方法，就近使用子类的方法
        xm.say(); //你好
        xm.intro();

注意：

​ （1）子类调用方法时的查找顺序：先从子类上找再从父类上找

​ （2）super 作为一个函数，可以调用父类的构造函数；作为一个对象，可以调用父类的方法

子类中注意的两点：

​ 1. 子类中使用 this 之前，必须要先调用 super

2. 子类可以拓展自己的属性和方法

7、使用类的两个注意事项

​ 1. 声明 class 类不存在变量提升，先定义再使用

2. 在类中访问属性和方法，必须加 this

8、JS基础this的常见指向问题；

• 非函数作用域中的指向：始终指向window；
• 函数作用域中的指向：函数的调用者（不关心函数的定义）