ES6-面向对象

1.老版的面向对象：

 1 function User(name,pass){
 2     this.name=name;
 3     this.pass=pass;
 4 }
 5 User.prototype.showName=function(){//用原型加方法
 6     console.log(this.name);
 7 }
 8 User.prototype.showPass=function(){//用原型加方法
 9     console.log(this.pass);
10 }
11 var ul=new User("blue","123456");
12 ul.showName();//blue
13 ul.showPass();//123456

老版的问题：

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

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

2.新版的面向对象

 1 class User{
 2     constructor(name,pass){//作用相似于构造器
 3         this.name=name;
 4         this.pass=pass;
 5 }
 6 showName(){
 7     console.log(this.name);
 8 }
 9 showPass(){
10         console.log(this.pass);
11     }
12 }
13 var ul=new User("red","7890");
14 ul.showName();//red
15 ul.showPass();//7890            

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

（2）class里直接加方法。

 3.老版的继承

 1 function User(name,pass){
 2     this.name=name;
 3     this.pass=pass;
 4 }
 5 User.prototype.showName=function(){//用原型加方法
 6     console.log(this.name);
 7 }
 8 User.prototype.showPass=function(){//用原型加方法
 9     console.log(this.pass);
10 }
11 //继承
12 function Vipuser(name,pass,level){
13     User.call(this,name,pass);
14     this.level=level;
15 }
16 Vipuser.prototype=new User();
17 Vipuser.prototype.constructor=Vipuser;
18 Vipuser.prototype.showLevel=function(){
19     console.log(this.level);
20 }
21 var v1=new Vipuser('blue','123456',3);
22 v1.showName();//blue
23 v1.showPass();//123456
24 v1.showLevel();//3

 4.新版的继承

 1 class User{
 2     constructor(name,pass){//作用相似于构造器
 3         this.name=name;
 4         this.pass=pass;
 5 }
 6 showName(){
 7     console.log(this.name);
 8 }
 9 showPass(){
10         console.log(this.pass);
11     }
12 }            
13 //继承
14 class Vipuser extends User{//extends关键字：继承父类
15     constructor(name,pass,level){
16         super(name,pass);//执行父类的构造函数
17         this.level=level;
18     }
19     showLevel(){
20         console.log(this.level);
21     }
22 }
23 var v1=new Vipuser('blue','123456',3);
24 v1.showName();
25 v1.showPass();
26 v1.showLevel();    

 5.面向对象的应用-React

React：

（1）组件化——class

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

 1 class Test extends React.Component{
 2 　　constructor(...args){//继承组件所有的属性
 3 　　　　super(...args);
 4 }
 5 render(){
 6 　　　　return <li>{{this.prop.str}}</li>
 7 　　}
 8 }
 9 window.onLoad=function(){
10 　　let oDiv=document.getElementById('div1');
11 　　ReactDom.render(
12 　　　　<ul>
13 　　　　　　<Test str='asd'></Test>
14 　　　　　　<Test str='fgh'></Test>
15 　　　　</ul>
16  　　　 oDiv
17  　　);
18 }