JavaScript 进阶——面向对象

面向对象

 ES6 中的类和对象

对象

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人

可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

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

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

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

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

类 class 

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。

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

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

创建类 

语法： 

class name {
     // class body
}

创建实例： 

var xx = new name();

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

类 constructor 构造函数

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

语法： 

class Person {
    constructor(name, age) { // constructor 构造方法或者构造函数
        this.name = name;
        this.age = age;
    }
}

创建实例： 

var ldh = new Person('刘德华', 18);
console.log(ldh.name)

类添加方法 

注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

class Person {
    constructor(name, age) { // constructor 构造器或者构造函数
        this.name = name;
        this.age = age;
    }
    say() {
        console.log(this.name + '你好');
    }
}

创建实例： 

var ldh = new Person('刘德华', 18);
ldh.say()

类的继承

现实中的继承：子承父业，比如我们都继承了父亲的姓。

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

语法： 

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 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

语法：

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

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

案例：

class Father {
    constructor(surname) {
        this.surname = surname;
    }
    saySurname() {
        console.log('我的姓是' + this.surname);
    }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
    constructor(surname, fristname) {
        super(surname); // 调用父类的constructor(surname)
        this.fristname = fristname;
    }
    sayFristname() {
        console.log("我的名字是：" + this.fristname);
    }
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();

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

语法：

class Father {
    say() {
        return '我是爸爸';
    }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
    say() {
        // super.say() super 调用父类的方法
        return super.say() + '的儿子';
    }
}
var damao = new Son();
console.log(damao.say());

注意点: 

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

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

• 类里面的this指向问题.

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

案例 1 

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

案例 2　

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之前调用
        super(x, y);
        this.x = x;
        this.y = y;

    }
    subtract() {
        console.log(this.x - this.y);

    }
}
var son = new Son(5, 3);
son.subtract();
son.sum();