ES6 面向对象对比 老版本

222.jpg

- ES5及之前

原来的面向对象：

• 类和构造函数一样
• 属性和方法是分开写的

如下：

 function oldObj(name,ages){
                this.name=name;
                this.ages=ages;
            }
            oldObj.prototype.getName=function(){
                console.log(this.name);
            }
            oldObj.prototype.getAges=function(){
                console.log(this.ages);
            }

            var obj=new oldObj('张健','26')
            obj.getAges();
            obj.getName();

关于继承 等 详细，之前的笔记ES5基于call的继承

- ES6 的面向对象

• ES6中 class 、构造器、类 分开了
• class 里面直接 添加方法

添加了新的关键字：class、constructor、static、extends、super (父类====java的超类)

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

class Animal {
  constructor() { ... };
  toString() { ... };
  getName() { ... };
}

// 等价于
Animal.prototype = {
  constructor() {},
  toString() {},
  getName() {}
}

实例：继承

 class User{
            constructor(name,pwd){
                this.name=name;
                this.pwd=pwd;
            }

            showName(){
                alert(this.name)
            }
        }
        
       vipUser  继承 User 
        class vipUser extends User{
            constructor(name,pwd,level){
                // super 
                super(name,pwd)
                this.level=level
            }
            showLevel(){
                alert(this.level)
            }
        }

        创建 vipUser对象 的实例
        var vip=new vipUser('zhangjian','123456','lv90')
        vip.showLevel();