0
点赞
收藏
分享

微信扫一扫

ES5、ES6 创建对象区别

MaxWen 2022-04-13 阅读 71
javascript

JavaScript 语言中,生成实例对象的传统方法是通过构造函数,es6的class 的出现 基本上可以替代了es5的构造函数和原型,使之代码结构上更加简洁。

ES5 创建对象

       // 父类 -- 超类 -- super
        function Person(name,age){
            this.name=name
            this.age=age
        }
        Person.prototype.say=function(){
            console.log(this.name,this.age);
        }

        // 子类
        function Student(name,age,gender){
            this.gender=gender
            // call (方法借用) 可以调用一个函数,并且可以指定这个函数的`this`指向
            Person.call(this,name,age)
        }

        // 子类继承父类原型中的成员
        Student.prototype.say=Person.prototype.say

        // 创建子类对象并调用方法
        let stu=new Student('penny',18,'女')
        console.log(stu);
        stu.say()

ES6 创建对象

关键字:

1. class

2. 属性

3. 方法

4. 继承 extends

5. 构造函数 constructor

6. 方法重写 override:子类方法覆盖父类,super.父类方法()

7. 父类的构造函数 super :子类有构造方法且使用this前,必须使用super()

        // 父类 -- 超类 -- super
        class Person {
            // constructor 添加 构造函数 -- 构造器
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            //添加原型中的成员
            say() {
                console.log(this.name, this.age);
            }
        }
        // 子类 -- 继承(拥有父类所有成员)
        //继承语法 class 子类 extends 父类
        // class Student extends Person { }
        class Student extends Person { 
            constructor(name,age,gender){
                //super 调用父类构造函数
                super(name,age)
                this.gender=gender
            }
            
        }
        // 创建子类对象并调用方法
        let stu = new Student('penny', 18,'女')
        console.log(stu);
        stu.say()
举报

相关推荐

es5和es6 的区别?

es5和es6的区别

ES5及ES6

ES5和ES6

JS中ES5和ES6的区别

浅谈ES5与ES6

ES5和ES6新特性

0 条评论