chuck
/
es6-11study


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * es5
         */
        function Phone(brand,price){
            this.brand = brand
            this.price = price
        }

        Phone.prototype.call = function(){
            console.log('dadianhua')
        }

        let huawei = new Phone('华为',5000)
        huawei.call()
        console.log(huawei)
        /**
         * es6
         */
        class Phone1{
            constructor(brand,price){
                this.brand = brand
                this.price = price
            }
            call(){
                console.log('es6 dadianhua ')
            }
        }
        let onePlus = new Phone1('1+',1999)

        console.log(onePlus)

        /**
         * es5 继承
         */
        function sonPhone(brand,price,color,size){
            Phone.call(this,brand,price)
            this.color = color
            this.size = size
        }

        // 继承原型
        sonPhone.prototype = new Phone
        sonPhone.prototype.constructor = sonPhone

        sonPhone.prototype.photo = function(){
            console.log('take')
        }
        sonPhone.prototype.playGame = function(){
            console.log('play')
        }

        const chuizi = new sonPhone('chuizi',4999,'black','6.5')
        console.log(chuizi)

        /**
         * es6类继承
         */
        class sonPhone1 extends Phone1{
            constructor(brand,price,color,size){
                super(brand,price)  // xxx.call(this,brand,price)
                this.color = color
                this.size = size
            }
            photo(){
                console.log('take')
            }
            playGame(){
                console.log('play')
            }
            //子类重写
            call(){
                console.log('xiaomi call')
            }
        }

        const xiaomi = new sonPhone1('xiaomi',2999,'red','5.5')
        console.log(xiaomi)

        /**
         * class中的getter&setter
         * 对象中的属性进行绑定
         * 类似php魔术方法
         */
        class Phone2{
            get price(){
                console.log('read price')
                return 'hi'
            }
            set price(val){
                console.log('change price')
            }
        }

        let p = new Phone2()
        console.log(p.price)
        p.price = 20
        
    </script>
</body>
</html>