ES6中的类和对象理解

一.ES6 中的类和对象

1.对象的理解
现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

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

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

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

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

3.创建类
语法：

class name {
//属性：属性值
} 

利用类创建实例对象：

var xx = new name(); 

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

4. 类 constructor 构造函数

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

语法：

   class Star {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
        }
        //创建实例
    var hh = new Star("浩哥", 18);
    var ah = new Star("阿浩", 18);
    //注意点
      (1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
      (2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
      (3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
      (4) 生成实例 new 不能省略
      (5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

5 .类添加方法

  // 1.使用class创建类
        class Star {
            constructor(uname, age) {
                    this.uname = uname;
                    this.age = age;
                }
                // 方法
            sing(hobby) {
                console.log(this.uname + hobby);
            }
        }
        // 2.利用类创建实例对象
        var hh = new Star("浩哥", 18);
        var ah = new Star("阿浩", 18);
        // 调用方法
        hh.sing('吉他')
        ah.sing('钢琴')
            // 注意点
            // (1)类中所有的函数都不需要function
            // (2)多个函数之间不需要逗号

二.类的继承

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

1.继承

语法：

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

代码演示

 // 1.类的继承
        class Father {
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        // extends继承 子元素继承父元素的属性和方法
        class Son extends Father {

        }
        var son = new Son()
        son.money() //100

2.super 关键字
(1)super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
代码演示

 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(x, y); //调用了父类中的构造函数 constructor super把子类得数据传给父类
            }
        }
        var son = new Son(1, 2);
        // 这里是在调用父类中的方法
        son.sum() //3

(2)super关键字调用父类普通函数

    // super 关键字调用父类普通函数
        class Father {
            say() {
                return '我是爸爸';
            }
        }
        class Son extends Father {
            say() {
                console.log(super.say() + '的儿子');
                // super.say() 就是调用父类中的普通函数 say()
            }
        }
        var son = new Son();
        son.say();
        // 继承中的属性或者方法查找原则: 就近原则
        // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
        // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

(3)子类继承父类加法方法 同时子类扩展自己减法方法

   // 父亲加法操作
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            plus() {
                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;
            }
            less() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(6, 4);
        son.less(); //2 //自己子类的减法操作
        son.plus() //10 调用父类得方法

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

三.类和对象注意点

  <button>点击</button>
    <script>
        var that;
        var _that;
        class Star {
            constructor(uname, age) {
                // constructor 里面的this 指向的是 创建的实例对象
                that = this;
                console.log(this);

                this.uname = uname;
                this.age = age;
                // this.sing(); 调用了实例化对象得方法
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            sing() {
                // 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this);

                console.log(that.uname); // that里面存储的是constructor里面的this
            }
            dance() {
                // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数 谁调用谁就指向谁
                _that = this;
                console.log(this);

            }
        }

        var ldh = new Star('刘德华');
        console.log(that === ldh);
        ldh.dance();
        console.log(_that === ldh);

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