ES6面向对象

94 阅读2分钟

在ES6中新增了class关键字,使得我们可以通过类的方式来创建一个对象,在ES6之前为了实现类继承的效果得分两个部分来实现:

  1. 改变对象的原型来继承父构造函数的方法
  2. 在子构造函数中使用call()改变父构造函数的指向来继承父构造函数的属性

创建类和对象

 class Student {
            // 构造函数,每个类里面必须要有一个,如果没有,会自动生成一个
            constructor(uname, age) {
                this.uname = uname
                this.age = age
            }
        }

        // 创建实例,会自动调用并执行构造函数 
        var student1 = new Student('叶子', 20)

创建类和实例化对象和java差不多

类中添加方法

 class Student {
            // 构造函数,每个类里面必须要有一个,如果没有,会自动生成一个
            constructor(uname, age) {
                this.uname = uname
                this.age = age
            }

            study(content) {
                console.log('我在学习' + content);
            }
        }

        // 创建实例,会自动调用并执行构造函数 
        var student1 = new Student('叶子', 20)

        student1.study('英语')

类的继承

 class Person {

            constructor(height, weight) {
                this.height = height
                this.weight = weight
            }

            status() {
                console.log('身高是:' + this.height + '体重是:' + this.weight);
            }
        }

        class Student extends Person {

            constructor(uname, age, height, weight) {
                // 调用父类中的构造函数 , super必须在子类this之前调用
                super(height, weight)
                this.uname = uname
                this.age = age
            }

            study(content) {
                console.log('我在学习' + content);
            }
        }

        var student1 = new Student('叶子', 20, 172, 64)
        student1.status()

super还可以调用父类的普通方法

类中的this指向(重点)

  • 一般情况下this的最终指向的是调用它的对象
  • 全局作用域或者普通函数中this指向全局对象window
  • 构造函数中this指向构造函数的实例

在类中的构造函数constructor中的this指向的是创建的实例对象

 var that
        class Student {
            constructor(uname, age) {
                that = this
                this.uname = uname
                this.age = age
            }
        }

        var student1 = new Student('叶子', 20)
        console.log(student1 === that); // true

类中的方法谁调用指向谁,一般情况下都是实例对象来调用的,但有些时候并不是的,通常在构造函数中做一些初始化的时候会用某个元素来调用类中的某些方法,这个时候方法中的this就指向了调用的元素,比如做一个简单的操作,点击input获取焦点的时候清除里面的内容

 class Student {
            // 构造函数,每个类里面必须要有一个,如果没有,会自动生成一个
            constructor(uname, age) {
                this.uname = uname
                this.age = age
                this.input = document.querySelector('input')
                this.input.onfocus = this.clear
            }

            clear() {
                // 这里的this指向的是input
                this.value = ''
            }

            study(content) {
                console.log('我在学习' + content);
            }
        }

可以看到此时clear函数中的this指向的不再是实例对象,而是input

另外

  • 在ES6中没有变量提升,所以必须先定义类,才能通过类实例化对象
  • 类里面的共有的属性和方法一定要加this使用