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();//

老版的问题：

（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();//
 v1.showLevel();//

 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
  　　);
 }