ES6-面向对象

1.老版的面向对象：

function User(name,pass){
    this.name=name;
    this.pass=pass;
}
User.prototype.showName=function(){//用原型加方法
    console.log(this.name);
}
User.prototype.showPass=function(){//用原型加方法
    console.log(this.pass);
}
var ul=new User("blue","123456");
ul.showName();//blue
ul.showPass();//123456

老版的问题：

（1）类和构造函数是一个问题；

（2）散开了，先写了一个函数，方法是后加进去的。

2.新版的面向对象

class User{
    constructor(name,pass){//作用相似于构造器
        this.name=name;
        this.pass=pass;
}
showName(){
    console.log(this.name);
}
showPass(){
        console.log(this.pass);
    }
}
var ul=new User("red","7890");
ul.showName();//red
ul.showPass();//7890            

（1）新增了class关键字，构造器和类分开了；

（2）class里直接加方法。

 3.老版的继承

function User(name,pass){
    this.name=name;
    this.pass=pass;
}
User.prototype.showName=function(){//用原型加方法
    console.log(this.name);
}
User.prototype.showPass=function(){//用原型加方法
    console.log(this.pass);
}
//继承
function Vipuser(name,pass,level){
    User.call(this,name,pass);
    this.level=level;
15 }
16 Vipuser.prototype=new User();
17 Vipuser.prototype.constructor=Vipuser;
18 Vipuser.prototype.showLevel=function(){
    console.log(this.level);
}
var v1=new Vipuser('blue','123456',3);
v1.showName();//blue
v1.showPass();//123456
v1.showLevel();//3

 4.新版的继承

class User{
    constructor(name,pass){//作用相似于构造器
        this.name=name;
        this.pass=pass;
}
showName(){
    console.log(this.name);
}
showPass(){
        console.log(this.pass);
    }
}            
//继承
class Vipuser extends User{//extends关键字：继承父类
    constructor(name,pass,level){
        super(name,pass);//执行父类的构造函数
        this.level=level;
    }
    showLevel(){
        console.log(this.level);
    }
}
var v1=new Vipuser('blue','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();    

 5.面向对象的应用-React

React：

（1）组件化——class

（2）强依赖于jsx（也就是babel，browser.js）

class Test extends React.Component{
　　constructor(...args){//继承组件所有的属性
　　　　super(...args);
}
render(){
　　　　return <li>{{this.prop.str}}</li>
　　}
 8 }
window.onLoad=function(){
　　let oDiv=document.getElementById('div1');
　　ReactDom.render(
　　　　<ul>
　　　　　　<Test str='asd'></Test>
　　　　　　<Test str='fgh'></Test>
　　　　</ul>
 　　　 oDiv
 　　);
}