JavaScript进阶 - 面向对象

---

一、什么是面向对象

面向对象是以对象功能来划分问题，而不是步骤
面向对象的特性分为三种 ：

1. 封装性
2. 继承性
3. 多态性

二、面向对象的思维特点

1. 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）
2. 对类进行实例化，获取类的对象。

面向对象考虑的是有哪些对象， 按照面向对象的思维特点，不断的创建对象，使用对象。

三、对象

对象是一个具体的事物。
在JavaScript中，对象是一组无序的相关属性和方法的集合

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

• 属性 ：事物的特征，在对象中用属性表示
• 方法 ：事物的行为，在对象中用方法表示。

四、类

使用class关键字声明一个类。
类抽象了对象的公共部分，它泛指某一大类
对象特指某一个，通过类实例化得到一个对象。

1. 创建类的语法

class name {
}

2. 创建实例

var xx = new name();

类必须用new创建一个类的实例

3. 类 constructor构造函数

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

<script>
    // 创建类
    class Start {
        constructor(uname) {
            this.uname = uname;
        }
    }

    // 利用类创建对象
    var s1 = new Start('张三');
    console.log(s1.uname);

</script>

4. 注意事项

1. 通过class关键字创建类， 类名定义首字母大写
2. 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象。
3. 只有new生成实例时，就会自动调用这个函数。
4. 生成实例new不能省略
5. 类名后面不要加小括号；生成实例，类名后面加小括号；构造函数不需要加function。

五、类中添加共有的方法

语法

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	say() {
		console.log(this.name + '你好');
	}
}

调用方法

// 利用类创建对象
var s1 = new Start('张三');
s1.say();

方法中传参数

<script>
    // 创建类
    class Start {
        constructor(uname) {
            this.uname = uname;
        }
        say(song) {
            console.log(this.uname + song);
        }
    }

    // 利用类创建对象
    var s1 = new Start('张三');
    s1.say('你好');
</script>

六、类的继承

1. 语法

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

2. super关键字

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

<script>
    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(x, y);
        }
    }
    var s1 = new Son(1, 5);
    s1.sum();
</script>

3. 继承中属性方法查找原则

1. 继承中， 如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的。
2. 继承中，如果子类里面没有，就去查找父类

super必须在子类this之前调用

4. 类里面this的指向

constructor 里面的this 指向的是创建的实例对象。

<script>
    var that;
    class Start {
        constructor(name) {
            this.name = name;
            that = this;
        }
    }
    var s1 = new Start('张三');
    console.log(that === s1);  // true
</script>

类方法里面的this指向的是调用者

<script>
    var that;
    class Start {
        constructor(name) {
            this.name = name;
        }
        sing() {
            that = this;
            console.log(this);
        }
    }
    var s1 = new Start('张三');
    s1.sing();
    console.log(that === s1);  // true
</script>

insertAdjacentHTML()

可以直接把字符串格式元素添加到父元素中。

document.insertAdjacentHTML('html');