ES6 中的类和对象

面向对象

面向对象 更贴近我们的实际生活，可以使用面向对象描述现实世界事物，但是事物分为具体的事物和抽象的事物
抽象的事物 手机 具体的事物 iPhone11

思维特点

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

对象

现实生活中 万物皆对象，对象是 一个具体的事物，看得见摸得着的实物。 例如在 JavaScript 中，字符串、数值、数组、函数等都是对象

对象的组成

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

举栗

对象：手机 属性：黑色、6寸 方法：发短信、打电话、拍照

类 calss

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

举栗

对象：iPhone11 类：设计稿 类（设计稿） 实例化（生产出） 对象（iPhone11）

创建类

    //语法：
    class Star {
        wangyan:dmm 
    }
    
    //创建实例：
    var myName = new Star()

类 constructor 构造函数

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

    var lay = new Star("张艺兴",28);
    var wy = new Star("王艳",23);

    console.log(lay)
    console.log(wy)

类添加方法

    class Star {
        constructor (starName,age) {
            this.unname = starName;
            this.age = age;
        }
        //不能加逗号
        sing (song) {
            console.log(this.unname + "演唱" + song)
        }
    }

    var lay = new Star("张艺兴",28);
    var wy = new Star("王艳",23);
    console.log(lay)
    console.log(wy)
    lay.sing("NAMANANA");
    wy.sing("Honey");

类的继承

extends

子类可以继承父类的一些属性和方法

class Father {                  //父类
    constructor(){}
    money () {
        console.log(1000)
    }
}
class Son extends Father{}      //子类 extends

var son = new Son();
son.money()

super

super 用于访问和调用父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。
继承中的属性和方法的查找原则：就近原则。 实例化子类输入一个方法，先看子类有没有这个方法，如果有就先执行子类的，如果没有就去父类中查找。 super 必须在子类 this 之前调用。

创建一个按钮，使用按钮执行 subtract 方法

<button>点击</button>

var that;
class Father {
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    sum () {
        console.log(this.x + this.y)
    }
    say () {
        return "我是爸爸"
    }
}

class Son extends Father{
    constructor(x,y){

        //利用 super 调用父类中的构造函数
        //super 必须在子类 this 之前调用
        super(x,y);

        that = this

        this.x = x;
        this.y = y;

        document.querySelector("button").onclick = this.subtract;

        // this.subtract()
        // this.sum()
        // this.say()

    }
    subtract () {
        //这个方法里面的 this 指向的是 btn 这个按钮，因为这个按钮调用了这个函数
        console.log(that.x - that.y)    //that 里面存储的是 constructor 里的this
    }
    say () {
        // super.say() 就是调用父类中的普通函数 say()
        console.log(super.say() + "的儿子")
    }
}

var son = new Son(10,2);

注意点

1、定义类名首字母大写 。 2、constructor 可以接受传递过来的参数，同时返回实例对象。 3、new 生成实例时，就会自动调用 constructor，即使不写 constructor，类也会自动生成这个函数。 4、生成实例 new 不能省略。 5、类名后面没有（） ,生成实例类名后面加（），构造函数不加 function 。 6、在 ES6 中没有变量提升，所以必须先定义类，才能通过类实例化对象。 7、类里面共有的属性和方法一定要加 this 使用。 8、类里面的 this指向问题。 9、constructor 里面的 this 指向实例对象，对象方法的 this 指向这个方法的调用者。