JavaScript面向对象

JS面向对象的详细介绍推荐阅读《JavaScript高级程序设计（第3版）》一书，本文主要对ES6和JS面向对象做一对比，仅此而已。

1、面向对象

ES6之前面向对象写法：

function User(name,pass) { //  是一个类， (User既是一个类，也是构造函数) 
    this.name = name;//添加属性  
    this.pass = pass;
}   
User.prototype.showName = function(){//用原型添加方法
    alert(this.name);
}  
User.prototype.showPass = function(){   
    alert(this.pass);
}  
var u1 = new User('xd','123456');
u1.showName();
u1.showPass();  

这样的写法存在两个问题：（1）User既是一个类，也是构造函数（2） 添加属性和添加方法分开。

ES6面向对象写法：

class User{//模仿JAVA                 
    constructor(name,pass){//constructor称为构造器或构造函数，构造器和类分开
        this.name = name;
        this.pass = pass;
    }
    showName(){
        alert(this.name);
    }//注意与json的区别，json写法：showName:function(){}，并且后面有逗
    showPass(){
        alert(this.pass);
    }
}
var u1 = new User('xd','123456');
u1.showName();
u1.showPass();  

与之前的写法相比，两点变化：（1）类和构造函数分开（2）方法直接写在类里面

2、继承

面向对象最有价值的是什么？封装？继承？

继承：继承一个已有的类，扩展其功能。

ES6之前继承的写法：

function User(name,pass )     { // User既是一个类，也是构造函数 
    this.name = name;//添加属性
    this.pass = pass;//添加属性
}   
User.prototype.showName = function(){//用原型添加方法      
    alert(this.name);
}  
User.prototype.showPass = function(){
    alert(this.pass);
}  
//原来的继承通过call实现
function VipUser(name,pass,level){  
    User.call(this,name,pass);
    this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function(){   
    alert(this.level)
}
var v1 = new VipUser('xd','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();

ES6继承写法：

class User{//模仿JAVA     
    constructor(name,pass){//constructor称为构造器或构造函数，构造器和类分开
        this.name = name;
        this.pass = pass;
    }
    showName(){
        alert(this.name);
    }//注意与json的区别，json写法：showName:function(){}，并且后面有逗号
    showPass(){
        alert(this.pass);
    }
}
class VipUser extends User{ //super--超类===父类
    constructor(name,pass,level){
        super(name,pass);//执行User(父类)的构造函数，继承父类的属性和方法
        this.level = level;
    }
    showLevel(){
        alert(this.level);
    }
}
var v1 = new VipUser('xd','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();

ES6面向对象的应用—React框架，React的组件就是通过class进行定义的。