开课吧前端1期.阶段2：ES6详解-3 面向对象 JSON

7、 面向对象-基础

//原来写法
function User(name,pass){  //这就是一个类
    this.name = name;
    this.pass = pass;
}
User.prototype.showName=function(){alert(this.name)};
User.prototype.showPass=function(){alert(this.pass)};
var u1=new User('blue','111');
u1.showName()
u1.showPass()

老版缺点: 无法却分类和function
         类和原型是散开的，分开写的

//新版，更像Java,构造器和类分开
class User{ 
    constructor(name,pass){ //构造器
        this.name=name;
        this.pass=pass;
    }
    
    showName(){ //就是没有function
        alert(this.name)
    }
       
    showPass(){
        alert(this.pass)
    }
    
}

• ES6的面向对象
  • class关键字，构造器和类分开了
    
  • class里面直接加方法

7.1、继承

个人感觉继承才是面向对象重点，面向对象的特点可以不断增加功能，我一定实在从已有的基础之上增加功能

//老版本
function User(name,pass){
    this.name = name;
    this.pass = pass;
}
User.prototype.showName=function(){alert(this.name)};
User.prototype.showPass=function(){alert(this.pass)};

//继承User
function VipUser(name,pass,level){
    User.call(this,name,pass); //以前通过call
    this.level = level
}
VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function(){
    alert(this.level);
}

var v1 = new VipUser('blue','1111',3)
v1.showLevel()



//新版本继承
super = 超类 = 父类

class VipUser extends User{
    constructor(name,pass,level){
        super(name,pass);        //直接super,执行父类的构造函数
        this.level = level;
    }
    showLevel(){
        alert(this.level);
    }
}

 

8、面向对象-实例

举例：面向对象的应用--- React ，非常流行的前端框架，基本面试都会提到，强依赖于ES6面向对象

• React的特点：
  • 1、强调的是 模块化、组建化
    • 一个组件就是一个class　　
  • 2、强依赖于JSX　　
    • JSX==babel=browser.js ，可以理解JS的扩展　　　　　　

//React最基础的东西
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>  //JSX其实就是babel所以引入
<script type="text/javascript">  //type指定js类型，现在淘汰玩就剩下javascript,写不写type都行
</script>


<script type="text/babel">
    window.onload=function(){
        let oDiv=document.getElementById('div1')
    
        ReactDOM.render(
            //渲染,1渲染什么东西，2往哪放
            <span>123</span>,    //不写引号，就是要创建一个html标签
            oDiv
        );
    }

</script>

 

//React组件，以class形式存在
<script type="text/babel">
    class Test extends React.Component{
            //继承Component，继承最大的意义就是不用从0开始  
        constructor(...args){
           super(...args); //接到参数给父类
        }
        
        render(){  //任何一个React组件，必须都有一个render方法，所有组件可见的
            return <span>123</span> 
             return <li>{this.props.str}</li> //传入自定义属性
        }
    }
    
    
     ReactDOM.render(
        <Test></Test>,   //实例化不需要去new，只需要标签去使用即可
        <Test str="abc"></Test>
         oDiv
     );

</script>

//组件套组件，组件之上还有组件
class List extends React.Component{
       constructor(...args){
           super(...args);       
       }

     render(){
         let aItems=[];
         for(let i=0;i<this.props.arr.length;i++){
             aItems.push(<Test str={this.props.arr[i]}></Test>)
         }
         //for循环换种写法
         let aItem = this.props.arr.map(a=><Item str={a}></Item>)
        //简写3
        return <ul>{this.props.arr.map(a=><Item str={a}></Item>)}</ul>
     
         return <ul>
                 <Test str="abc"></Test>
                <Test str="abc"></Test>
         </ul>;
         
        return <ul>
                 {aItems}  //使用数组使用fa
         </ul>;
         
     }
}


class Mock extends React.Component{
       constructor(...args){
           super(...args);       
       }

     render(){
         return <List></List> //组件套组件
         return <List arr="{['abc',‘123’，‘456’，‘789’]}"></List> //组传入数组
     }
}

9 、json

1. JSON对象 （在ES5里面就有）
2. 简写
   1. 名字一样
   2. 方法简写

9.1、JSON对象

//JSON变成字符串
let json={a:5,b:5}
let str = 'http://xx.com?data='+JSON.stringify(json); //字符串动词化
let str = 'http://xx.com?data='+encodeURIComponent（JSON.stringify(json)）; //URI编码后可以URL传参数


//字符串变回来
注意：JSON的标准写法 【重点】
1.只能用双引号
2.所有的名字都必须用引号包起来
let str = '{"a":12,"b":"xx","c":2}'
let json = JSON.parse(str)
console.log(json)

 

9.2、简写

名字跟值（key和value）一样 , 留一个就行

方法 ：function 一块删

//
let a=12
let b=5
let json={a:a,b:b}
console.log(json) //能出来
//简写，名字一样写一个
let json={a,c:15} //a简写

//方法
let json={
    a:12,
    show:function(){this.a}
}
//简写
let json={
    a:12,
    show(){alert(this.a)} //把function去掉
}
json.show();