ES6中的类和对象

ES6中的类和对象

ES5中没有类，类是在ES6中新加进入的。

类：泛指一类

对象：类中的具体的某个实例，【属性和方法的集合体】

类模拟抽象的，泛指的，对象是具体的

面向对象模拟现实世界，更贴近实际生活，生活中分为抽象事物和具体事物

比如：手机【两层含义：具体某个手机，和笼统的概念手机】

​ 1、抽取，把对象的属性和行为封装成一个类

​ 2、对类进行实例化, 获取类的对象

例如：人有身高，体重等，但是具体的某个人也有这个属性

对象：类中的具体的某个实例【属性和方法的集合体】

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

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

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

​ 属性：对象有什么【访问】【语法：对象.属性】【arr.length】

​ 方法：对象做什么【执行】【语法：对象.方法()】【arr.push(a)】

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

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

arr.length //对象的属性：对象.属性
arr.push(); //对象的方法：对象.方法();

面向对象的思维特点:

​ 1.抽取（抽象）对象共用的属性和方法组织(封装)成一个类(模板)

​ 2.对类进行实例化, 获取类的对象

类class

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

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

创建类

语法：class 类名 {属性和方法}【构造函数语法糖】
class Person {}
注意类名首字母大写
类要抽取公共属性方法，定义一个类

class Star {
};
var ldh = new Star();
类就是构造函数的语法糖

类constructor构造函数

语法：

class Star {
	constructor (uname,age){
		this.uname = uname;
		this.age = age;
	}
}

属性：放到constructor，构造函数里面

注意：类里面的方法不带function，直接写既可

类里面要有属性方法，属性方法要是想放到类里面，我们用constructor构造器

构造函数作用：接收参数，返回实例对象，new的时候主动执行，主要放一些公共的属性

constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过new命令生成对象实例时，自动调用该方法。

注意：每个类里面一定有构造函数，如果没有显示定义, 类内部会自动给我们创建一个constructor() ，

注意：this代表当前实力化对象，谁new就代表谁

类添加方法

语法：注意方法和方法之间不能加逗号

class Star {
	constructor () {}
	sing () {}
	tiao () {}
}

class 类名 { constructor(){}   方法名(){} }

注意：类中定义属性，调用方法都得用this
this.属性
this.方法()

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

总结：类有对象的公共属性和方法，用class创建，class里面包含constructor和方法，我们把公共属性放到constructor里面，把公共方法直接往后写既可，但是注意不要加逗号。

<script>
    // 创建类
    class Person {
        // 在构造函数constructor中设置属性
        constructor(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 方法
        play() {
            console.log(this.age + "岁的" + this.name + "在打篮球");
        };
        gongfu() {
            console.log(this.age + "岁的" + this.name + "在打太极");
        };
        getSum(arr) {
            var sum = 0;
            for (var index = 0; index < arr.length; index++) {
                sum += arr[index];
            }
            return sum;
        };
    };
    // 实例化对象
    var zwj = new Person("赵无极", 24, "男");
    console.log(zwj);
    console.log(zwj.age);
    // 改变属性
    zwj.age = 18;
    console.log(zwj);
    // 调用方法
    zwj.play();
    var arr = [10, 8, 75, 63, 51, 52, 99];
    console.log(zwj.getSum(arr));
    var sum = zwj.getSum(arr);
    console.log("数组求和为：" + sum);
    // 实例化对象
    var zsf = new Person("张三丰", 50, "男");
    console.log(zsf);
    console.log(zsf.name);
    zsf.gongfu();
</script>

类的继承

extends

语法：
​	class Father {}

​	class Son extends Father{}

注意：是子类继承父类

super关键字

我们应用的过程中会遇到父类子类都有的属性，此时，没必要再写一次，可以直接调用父类的方法就可以了

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

当子类没有constructor的时候可以随意用父类的，但是如果子类也含有的话，constructor会返回实例，this的指向不同，不可以再直接使用父类的东西
super：调用父类的方法（普通方法，构造方法）

调用父类构造函数

class F { constructor(name, age){} }

class S extends F { constructor (name, age) { super(name,age); } }

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

调用父类普通函数

class F { constructor(name, age){} say () {} }

class S extends F { constructor (name, age) { super(name,age); } say () { super.say() } }

注意：如果子类也有相同的方法，优先指向子类，就近原则

总结：super调用父类的属性和方法，那么查找方法的原则就近原则

属性和方法：

​ 属性：如果子类既想有自己的属性，又想继承父类的属性，那么我们用super【super(参数，参数)】

​ 方法：如果子类和父类有相同的方法，加入子类依旧想用父类的方法，那么我们用super调用【super.方法()】

如果子类不写东西，那么直接继承父类就可以用

但是如果子类有自己的构造函数和父类同名的方法，此时不可以直接用父类的东西，需要用super调用父类的方法和构造函数

<script>
    // 继承：一个类继承另外一个类的属性和方法
    class Person {
        constructor(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        sleep() {
            console.log(this.name + "在睡觉");
        };
        play() {
           console.log(this.name + "在打篮球");
        };
    };
    class Star extends Person {
        // 调用父类的方法（普通方法，构造方法）
        // 如果子类也有自己的构造函数，同时还想继承父类的构造函数的话
        // 就必须使用super关键字
        constructor(name, age, sex, hair) {
            super(name, age, sex);
            this.hair = hair;
        };
        // 如果子类和父类有相同的方法，优先使用的是字类的方法
        play() {
            // 如果两个方法都想用，要使用super调用父类的方法
            super.play();
            console.log(this.name + "明星也打篮球");
        };
    };
    var lyf = new Star("刘亦菲", 18, "女", "长头发");
    console.log(lyf);
    lyf.play();
</script>

三个注意点

• 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
• 类里面的共有属性和方法一定要加this使用.【this，对象调用属性和方法】
• 类里面的this指向问题.
• constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

class Button {
	constructor () {
		var btn = document.querySelector('input');
		btn.onclick = this.cli;
	}
	cli () {
		console.log('点击了');
	}
}
var anniu = new Button();

类里面的this指向

• 构造函数的this指向实例对象
• 普通函数的this是调用者，谁调用this是谁

类的本质

class本质还是function

类的所有方法都定义在类的prototype属性上

类创建的实例,里面也有__proto__ 指向类的prototype原型对象

所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

所以ES6的类其实就是语法糖.

语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖