首页 发现 帮助
登录
chuck
/
es6-11study
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

es6中class

DESKTOP-MK04A0R\chuck 3 年之前
父节点
30250e528b
当前提交
efba9af3f6
共有 3 个文件被更改，包括 148 次插入 和 0 次删除
合并视图 显示文件统计
  1. 36 0
      19/index.html
  2. 110 0
      20/index.html
  3. 2 0
      README.md

+ 36 - 0
19/index.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        let m = new Map()
 
+
 
+        m.set('name','hello')
 
+
 
+        m.set('change',function(){
 
+            console.log('change')
 
+        })
 
+
 
+        let key = {
 
+            school: 'jianqiao'
 
+        }
 
+        m.set (key,['上海','beijing'])
 
+
 
+        console.log(m)
 
+
 
+        m.delete('name')
 
+        console.log(m)
 
+        console.log(m.get('change'))
 
+        console.log(m.get(key))
 
+       // m.clear()
 
+        for(let v of m){
 
+            console.log(v)
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 110 - 0
20/index.html
查看文件 

@@ -0,0 +1,110 @@
 
+<!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>

+ 2 - 0
README.md
查看文件 

@@ -17,6 +17,8 @@
 
 * 16 生成器函数实例
 
 * 16 生成器函数实例
 
 * 17 promise
 
 * 17 promise
 
 * 18 set集合
 
 * 18 set集合
 
+* 19 map
 
+* 20 class
 
 
 
 ## 运行说明
 
 ## 运行说明
 
     npm i
 
     npm i