ES6学习总结三（面向对象及其应用）

面向对象

1. class关键字、构造器和类分开了

2. class里面直接加方法

// 传统写法  User既是构造函数也是类
/* function User(name,pass){
    this.name=name;
    this.pass=pass;
}

User.prototype.showName=function(){
    alert(this.name);
};

User.prototype.showPass=function(){
    alert(this.pass);
}*/

// ES6 构造函数和类分开了 不用外挂函数

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

    showName(){
        alert(this.name);
    }
    showPass(){
        alert(this.pass);
    }    
}

var U1=new User('lmx','123');

U1.showName(); // lmx
U1.showPass();  // 123

继承：

// 传统继承写法
function User(name,pass){
    this.name=name;
    this.pass=pass;
}

User.prototype.showName=function(){
    alert(this.name);
};

User.prototype.showPass=function(){
    alert(this.pass);
}
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('lmx','45678',3);

v1.showName(); //lmx
v1.showPass(); //45678
v1.showLevel(); //3
// ES6 继承写法  super 超类==父类
class User{
    constructor(name,pass){
        this.name=name;
        this.pass=pass;
    }

    showName(){
        alert(this.name);
    }
    showPass(){
        alert(this.pass);
    }    
}

class VipUser extends User{
    constructor(name,pass,level){
           super(name,pass);
           this.level=level;          
   }
    showLevel(){
           alert(this.level);
    }
}

var v2=new VipUser('zhangsan','9876',2);
v2.showName(); //zhangsan
v2.showPass(); //9876
v2.showLevel(); // 2

 

面向对象的应用（涉及React）：

简单介绍一下React：

1 组件化--class

2 JSX    （JSX==babel==browser.js）

 实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象实例react</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    <script type="text/babel">
        class Item extends React.Compontent{
            constructor(...args){
                super(...args);
            }

            render(){
                return <li>{this.props.str}</li>;
            }
        }
        
        class List extends React.Compontent{
            constructor(...args){
                super(...args);
            }
            render(){
                <!-- let aItem=[];
                for(let i=0;i<this.props.arr.length;i++){
                    aItems.push(<Item str={this.props.arr[i]}></Item>);
                }
                return <ul>
                    {aItems}
                </ul>;  -->
                <!-- 简化版：映射 -->
                return  <ul>
                    {this.props.arr.map(a=><Item str={a}></Item>)}
                </ul>; 
            }
        }
        window.onload=function(){
            let oDiv=document.getElementById('div1');
            ReactDOM.render(
                <List arr={['asd','qwe','lkj']}></List>,
                oDiv
            );
        }
    </script>
</head>
<body>
    <div id="div1">
        
    </div>
</body>
</html>

 

posted on 2018-03-15 17:12  前端，别闹  阅读(338)  评论(0)  编辑  收藏  举报

导航