ホーム エクスプローラ ヘルプ
サインイン
lovecoding
/
W0407
10
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

学习

zheng 5 日 前
親
6770329e6a
コミット
510e4a9b1f
41 ファイル変更、1081 行追加、2 行削除
分割表示 差分情報を表示
  1. 2 1
      js高级/11.构造函数继承.html
  2. BIN
      ts.ts/.DS_Store
  3. 2 1
      ts.ts/index.html
  4. 1 0
      ts.ts/类型/2.ts
  5. BIN
      ts.ts/编译选项/.DS_Store
  6. BIN
      ts.ts/面向对象/.DS_Store
  7. 28 0
      ts.ts/面向对象/dist/1.类.js
  8. 15 0
      ts.ts/面向对象/dist/2.构造函数和this.js
  9. 32 0
      ts.ts/面向对象/dist/3.继承.js
  10. 16 0
      ts.ts/面向对象/dist/4.super.js
  11. 21 0
      ts.ts/面向对象/dist/5.接口.js
  12. 26 0
      ts.ts/面向对象/dist/6.属性的封装.js
  13. 26 0
      ts.ts/面向对象/src/1.类.ts
  14. 18 0
      ts.ts/面向对象/src/2.构造函数和this.ts
  15. 33 0
      ts.ts/面向对象/src/3.继承.ts
  16. 18 0
      ts.ts/面向对象/src/4.super.ts
  17. 39 0
      ts.ts/面向对象/src/5.接口.ts
  18. 28 0
      ts.ts/面向对象/src/6.属性的封装.ts
  19. 32 0
      ts.ts/面向对象/src/7.泛型.ts
  20. 14 0
      ts.ts/面向对象/tsconfig.json
  21. 38 0
      复习/1.事件冒泡.html
  22. 51 0
      复习/10.节流.html
  23. 41 0
      复习/11.原型链继承.html
  24. 47 0
      复习/12.构造函数继承.html
  25. 41 0
      复习/13.组合继承.html
  26. 29 0
      复习/14.原型式继承.html
  27. 36 0
      复习/15.寄生式继承.html
  28. 41 0
      复习/16.寄生组合式继承.html
  29. 57 0
      复习/17.工厂模式.html
  30. 36 0
      复习/2.事件委托.html
  31. 57 0
      复习/3.this指向.html
  32. 31 0
      复习/4.修改this指向.html
  33. 68 0
      复习/5.原型和原型链.html
  34. 13 0
      复习/6.获取屏幕的宽高.html
  35. 29 0
      复习/7.距离.html
  36. 65 0
      复习/8.下落的树叶.html
  37. 50 0
      复习/9.防抖.html
  38. BIN
      复习/img/1.png
  39. BIN
      复习/img/2.png
  40. BIN
      复习/img/3.png
  41. BIN
      复习/img/4.png

+ 2 - 1
js高级/11.构造函数继承.html
ファイルの表示 

@@ -12,7 +12,8 @@
 
         /**
 
          * 构造函数继承
 
          * 实现:
 
-         * 在子类的构造函数中 用call/apply把父类的this指向子类的实例 相当于把父类的属性全部复制一份
 
+         * 在子类的构造函数中 用call/apply把父类的this指向子类的实例
 
+         * 相当于把父类的属性全部复制一份
 
          * 优点：
 
          * 可以给父类进行传参
 
          * 父类中引用数据类型 不共享实例

BIN
ts.ts/.DS_Store
ファイルの表示


+ 2 - 1
ts.ts/index.html
ファイルの表示 

@@ -7,6 +7,7 @@
 
 </head>
 
 <body>
 
     <!-- <script src="./1.ts" type="module"></script> -->
 
-     <script src="./类型/1.js"></script>
 
+     <!-- <script src="./类型/1.js"></script> -->
 
+      <script src="./面向对象/dist/6.属性的封装.js"></script>
 
 </body>
 
 </html>

+ 1 - 0
ts.ts/类型/2.ts
ファイルの表示 

@@ -54,6 +54,7 @@ console.log(d.sex == Sex.man ? '男' : '女')
 
 //格式： type 名字 = 类型
 
 // 1.联合类型
 
 type Sex1 = "man" | "woman";
 
+// type Sex1
 
 let e:Sex1;
 
 e = "man";

BIN
ts.ts/编译选项/.DS_Store
ファイルの表示


BIN
ts.ts/面向对象/.DS_Store
ファイルの表示


+ 28 - 0
ts.ts/面向对象/dist/1.类.js
ファイルの表示 

@@ -0,0 +1,28 @@
 
+"use strict";
 
+/**
 
+ * 通过class定义一个类
 
+ */
 
+class Person {
 
+    constructor() {
 
+        this.name1 = '图图';
 
+        /**
 
+         * static 静态属性
 
+         * 属性添加static后 变成了 类
 
+         * 只能通过类 去更改
 
+         * 规避name字段
 
+         * readonly 只读
 
+         */
 
+    }
 
+    say() {
 
+        console.log("你好");
 
+    }
 
+}
 
+Person.age = 3;
 
+// 实例化
 
+let p1 = new Person();
 
+// p1.age = 12;
 
+// p1.name1 = 'aaa';
 
+console.log(p1, 'p1');
 
+Person.age = 12;
 
+console.log(Person.age);
 
+p1.say();

+ 15 - 0
ts.ts/面向对象/dist/2.构造函数和this.js
ファイルの表示 

@@ -0,0 +1,15 @@
 
+"use strict";
 
+// let xxx = function() {}
 
+// function fn1() {}
 
+// (function(){})()
 
+// function fn2(() => {})
 
+// function Fn1() {
 
+// }
 
+// new Fn1()
 
+class Person1 {
 
+    constructor(x, y) {
 
+        this.name2 = x;
 
+        this.age2 = y;
 
+    }
 
+}
 
+let p2 = new Person1('图图', 3);

+ 32 - 0
ts.ts/面向对象/dist/3.继承.js
ファイルの表示 

@@ -0,0 +1,32 @@
 
+"use strict";
 
+(function () {
 
+    class Parent {
 
+        constructor(x, y) {
 
+            this.names = x;
 
+            this.ages = y;
 
+        }
 
+        hi() {
 
+            console.log("你好啊");
 
+        }
 
+    }
 
+    class A extends Parent {
 
+        hi() {
 
+            console.log("大家好");
 
+        }
 
+        aa() {
 
+            console.log("哈哈");
 
+        }
 
+    }
 
+    /**
 
+     * 继承
 
+     * 因为想让多个子类 同时拥有父类的属性和方法 所以采用继承
 
+     * 继承后子类就会拥有父类相同的内容
 
+     * 若子类中定义的方法 与父类相同 则会覆盖父类的方法 称为：方法重新
 
+     * 若想添加新的方法 自行添加即可
 
+     */
 
+    // let parent1 = new Parent("图图",1)
 
+    let a = new A("喜羊羊", 3);
 
+    console.log(a, 'a');
 
+    a.hi();
 
+    a.aa();
 
+})();

+ 16 - 0
ts.ts/面向对象/dist/4.super.js
ファイルの表示 

@@ -0,0 +1,16 @@
 
+"use strict";
 
+(function () {
 
+    class Animal {
 
+        constructor(name) {
 
+            this.name = name;
 
+        }
 
+    }
 
+    class B extends Animal {
 
+        constructor(name, age) {
 
+            super(name);
 
+            this.age = age;
 
+        }
 
+    }
 
+    let b = new B("图图", 3);
 
+    console.log(b);
 
+})();

+ 21 - 0
ts.ts/面向对象/dist/5.接口.js
ファイルの表示 

@@ -0,0 +1,21 @@
 
+"use strict";
 
+(function () {
 
+    /**
 
+     * 类型别名 接口区别
 
+     * 接口：偏向 对象/结构的定义 可扩展 可合并
 
+     * 类型别名：偏向于任意类型 联合/交叉类型 简单的别名
 
+     * */
 
+    // 类实现接口 需要继承
 
+    // 类型约束
 
+    class List {
 
+        constructor(name, age, address, sex, x) {
 
+            this.name = name;
 
+            this.age = age;
 
+            this.address = address;
 
+            this.sex = sex;
 
+            this.x = x;
 
+        }
 
+    }
 
+    let x = new List('图图', 3, '上海', '12');
 
+    console.log(x);
 
+})();

+ 26 - 0
ts.ts/面向对象/dist/6.属性的封装.js
ファイルの表示 

@@ -0,0 +1,26 @@
 
+"use strict";
 
+// 属性的封装：令属性更加安全
 
+(function () {
 
+    class Person {
 
+        constructor(name1, age1) {
 
+            this.name1 = name1;
 
+            this.age1 = age1;
 
+        }
 
+        /**
 
+         * 属性封装：
 
+         * getter 获取属性 get
 
+         * setter 修改属性 set
 
+         */
 
+        get names() {
 
+            return this.name1;
 
+        }
 
+        set names(val) {
 
+            this.name1 = val;
 
+        }
 
+    }
 
+    let p = new Person('图图', 3);
 
+    console.log(p, 'p');
 
+    console.log(p.names);
 
+    p.names = '小新';
 
+    console.log(p.names, 'p');
 
+})();

+ 26 - 0
ts.ts/面向对象/src/1.类.ts
ファイルの表示 

@@ -0,0 +1,26 @@
 
+/**
 
+ * 通过class定义一个类
 
+ */
 
+class Person {
 
+   readonly name1:string = '图图';
 
+   static age:number = 3;
 
+    say() {
 
+        console.log("你好")
 
+    }
 
+    /**
 
+     * static 静态属性 
+     * 属性添加static后 变成了 类
 
+     * 只能通过类 去更改 
+     * 规避name字段
 
+     * readonly 只读
 
+     */
 
+}
 
+
 
+// 实例化
 
+let p1 = new Person();
 
+// p1.age = 12;
 
+// p1.name1 = 'aaa';
 
+console.log(p1,'p1')
 
+Person.age = 12;
 
+console.log(Person.age)
 
+p1.say();

+ 18 - 0
ts.ts/面向对象/src/2.构造函数和this.ts
ファイルの表示 

@@ -0,0 +1,18 @@
 
+// let xxx = function() {}
 
+// function fn1() {}
 
+// (function(){})()
 
+// function fn2(() => {})
 
+// function Fn1() {
 
+// }
 
+// new Fn1()
 
+
 
+class Person1{
 
+    name2:string;
 
+    age2:number;
 
+    constructor(x:string,y:number) {
 
+        this.name2 = x;
 
+        this.age2 = y;
 
+    }
 
+}
 
+
 
+let p2 = new Person1('图图',3)

+ 33 - 0
ts.ts/面向对象/src/3.继承.ts
ファイルの表示 

@@ -0,0 +1,33 @@
 
+(function() {
 
+    class Parent {
 
+        names:string;
 
+        ages:number;
 
+        constructor(x:string,y:number) {
 
+            this.names = x;
 
+            this.ages = y;
 
+        }
 
+        hi() {
 
+            console.log("你好啊");
 
+        }
 
+    }
 
+    class A extends Parent{
 
+        hi() {
 
+            console.log("大家好")
 
+        }
 
+        aa() {
 
+            console.log("哈哈")
 
+        }
 
+    }
 
+    /**
 
+     * 继承
 
+     * 因为想让多个子类 同时拥有父类的属性和方法 所以采用继承
 
+     * 继承后子类就会拥有父类相同的内容
 
+     * 若子类中定义的方法 与父类相同 则会覆盖父类的方法 称为：方法重新
 
+     * 若想添加新的方法 自行添加即可
 
+     */
 
+    // let parent1 = new Parent("图图",1)
 
+    let a =  new A("喜羊羊",3);
 
+    console.log(a,'a');
 
+    a.hi();
 
+    a.aa();
 
+})()

+ 18 - 0
ts.ts/面向对象/src/4.super.ts
ファイルの表示 

@@ -0,0 +1,18 @@
 
+(function() {
 
+    class Animal {
 
+        name:string;
 
+        constructor(name:string) {
 
+            this.name = name;
 
+        }
 
+    }
 
+    class B extends Animal {
 
+        age: number;
 
+        constructor(name:string,age:number) {
 
+            super(name)
 
+            this.age = age;
 
+        }  
+    }
 
+
 
+    let b = new B("图图",3)
 
+    console.log(b)
 
+})()

+ 39 - 0
ts.ts/面向对象/src/5.接口.ts
ファイルの表示 

@@ -0,0 +1,39 @@
 
+(function () {
 
+    /**
 
+     * 类型别名 接口区别
 
+     * 接口：偏向 对象/结构的定义 可扩展 可合并
 
+     * 类型别名：偏向于任意类型 联合/交叉类型 简单的别名
 
+     * */
 
+
 
+    // 接口:定义数据类型的规范
 
+    // interface  status = 1|2|3;
 
+    // 接口声明
 
+    interface xxx {
 
+        name: string,
 
+        age: number,
 
+        address: string,
 
+        sex: string
 
+    }
 
+    interface xxx {
 
+        sex: string
 
+    }
 
+    // 类实现接口 需要继承
 
+    // 类型约束
 
+    class List implements xxx {
 
+        name: string;
 
+        age: number;
 
+        address: string;
 
+        // sex: string;
 
+        x: string;
 
+        constructor(name: string, age: number, address: string, sex: string, x: string) {
 
+            this.name = name;
 
+            this.age = age;
 
+            this.address = address;
 
+            this.sex = sex;
 
+            this.x = x;
 
+        }
 
+    }
 
+    let x = new List('图图', 3, '上海', '12');
 
+    console.log(x);
 
+
 
+})()

+ 28 - 0
ts.ts/面向对象/src/6.属性的封装.ts
ファイルの表示 

@@ -0,0 +1,28 @@
 
+// 属性的封装：令属性更加安全
 
+(function () {
 
+    class Person {
 
+        private name1: string;
 
+        age1: number;
 
+        constructor(name1: string, age1: number) {
 
+            this.name1 = name1;
 
+            this.age1 = age1;
 
+        }
 
+        /**
 
+         * 属性封装：
 
+         * getter 获取属性 get
 
+         * setter 修改属性 set
 
+         */
 
+        get names() {
 
+            return this.name1;
 
+        }
 
+        set names(val) {
 
+            this.name1 = val;
 
+        }
 
+    }
 
+    let p = new Person('图图', 3);
 
+    console.log(p, 'p')
 
+    console.log(p.names)
 
+    p.names = '小新'
 
+    console.log(p.names, 'p')
 
+
 
+})()

+ 32 - 0
ts.ts/面向对象/src/7.泛型.ts
ファイルの表示 

@@ -0,0 +1,32 @@
 
+(function() {
 
+    //  泛型：先用字符去指代未知类型 使用时在传入具体的类型
 
+    // function fn1<T>(name:T):T {
 
+    //     return name;
 
+    // }
 
+    // fn1(12);
 
+    // fn1('22');
 
+
 
+    function fn1<T,W>(name:T,x:W):[T,W] {
 
+        return [name,x];
 
+    }
 
+    fn1(12,12);
 
+    fn1('22','ss');
 
+
 
+    interface happy {
 
+        jump:string
 
+    }
 
+    function fn3<T extends happy>(a:T):T {
 
+        return a;
 
+    }
 
+    fn3({jump:'1212'})
 
+
 
+    class Ending<T extends happy> {
 
+        name:T;
 
+        constructor(name:T) {
 
+            this.name = name;
 
+        }
 
+    }
 
+
 
+    let e = new Ending({jump:'1212'})
 
+    // Omit Pick区别
 
+})()

+ 14 - 0
ts.ts/面向对象/tsconfig.json
ファイルの表示 

@@ -0,0 +1,14 @@
 
+{
 
+    "include": [
 
+        "./src/**/*"
 
+    ],
 
+    "compilerOptions": {
 
+        "target": "es2015",
 
+        "module": "es2015",
 
+        "lib": ["dom","ES2015"],
 
+        "outDir": "./dist",
 
+        "strict": true,
 
+        "noImplicitThis": false,
 
+        "noImplicitAny": false
 
+    }
 
+}

+ 38 - 0
复习/1.事件冒泡.html
ファイルの表示 

@@ -0,0 +1,38 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 400px;
 
+            height: 400px;
 
+            background: #00f;
 
+        }
 
+        #box1 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="box1"></div>
 
+    </div>
 
+    <script>
 
+        // 事件冒泡
 
+        // 事件：冒泡 目标 捕获
 
+        let box = document.getElementById("box");
 
+        let box1 = document.getElementById("box1");
 
+        // box.onClick
 
+        box.addEventListener("click",function() {
 
+            console.log("1")
 
+        },true)
 
+        box1.addEventListener("click",function() {
 
+            console.log("2")
 
+        },true)
 
+    </script>
 
+</body>
 
+</html>

+ 51 - 0
复习/10.节流.html
ファイルの表示 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 300px;
 
+            height: 300px;
 
+            text-align: center;
 
+            line-height: 300px;
 
+            color: #ff0;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- 
+        节流:
 
+        点击事件 在事件触发后 等待一段时间在执行回调函数
 
+        在等待的时间内 若再点击事件 则不执行 需要完成回调函数后才会执行
 
+        高频的按钮点击事件
 
+        滚动加载
 
+    -->
 
+    <div id="box"></div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        let x = 0;
 
+        function CountMain() {
 
+            box.innerText = x++;
 
+        }
 
+        // 防抖
 
+        function throttle(fn, delay) {
 
+            var timer = null;
 
+            return function () {
 
+                if (!timer) {
 
+                   timer = setTimeout(function () {
 
+                        fn();
 
+                        timer = null;
 
+                    }, delay)
 
+                }
 
+            }
 
+        }
 
+        box.addEventListener('click', throttle(CountMain, 5000))
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 41 - 0
复习/11.原型链继承.html
ファイルの表示 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 原型链继承
 
+         * 实现：
 
+         * 子类的原型 = 父类的实例
 
+         * 实例顺着父类的原型链查找父类的属性和方法
 
+         * 优点:
 
+         * 写法简单
 
+         * 缺点：
 
+         * 父类不能进行传参
 
+         * 父类中 引用数据类型 共享实例 若发生修改 则全部修改
 
+        */
 
+       function Person() {
 
+        this.name = '图图';
 
+        this.age = 3;
 
+        this.list = ['吃饭','睡觉','打豆豆'];
 
+       }
 
+       Person.prototype.say = function() {
 
+        console.log("你好")
 
+       }
 
+
 
+       function Child() {}
 
+
 
+       Child.prototype = new Person();
 
+       let c1 = new Child();
 
+       let c2 = new Child();
 
+       c2.list.push("12");
 
+       console.log(c1,'c',c1.list)
 
+       console.log(c2,'c',c2.list)
 
+       c1.say()
 
+    </script>
 
+</body>
 
+</html>

+ 47 - 0
复习/12.构造函数继承.html
ファイルの表示 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script>
 
+        /**
 
+         * 构造函数继承
 
+         * 实现：
 
+         *  在子类的构造函数中 用call/apply把父类的this指向修改 指向子类的实例
 
+         * 优点:
 
+         * 父类可以传参
 
+         * 父类的引用数据类型 不同享实例
 
+         * 缺点：
 
+         * 父类原型上的方法 没有被继承
 
+        */
 
+        function Person(x) {
 
+            this.address = x;
 
+            this.name = '图图';
 
+            this.age = 3;
 
+            this.list = ['吃饭', '睡觉', '打豆豆'];
 
+        }
 
+        Person.prototype.say = function () {
 
+            console.log("你好")
 
+        }
 
+
 
+        function Child(val) {
 
+            console.log(val,'val')
 
+            // Person.call(this,val)
 
+            Person.apply(this,[val])
 
+         }
 
+
 
+        let c1 = new Child('北京');
 
+        let c2 = new Child('哈尔滨');
 
+        c2.list.push("12");
 
+        console.log(c1, 'c1', c1.list)
 
+        console.log(c2, 'c2', c2.list)
 
+        c1.say()
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 41 - 0
复习/13.组合继承.html
ファイルの表示 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <!-- 
+        组合继承：
 
+            原型链继承 + 构造函数继承
 
+        实现：call/apply + 原型链
 
+    -->
 
+    <script>
 
+        function Person(x) {
 
+            this.x = x;
 
+            this.name = '图图';
 
+            this.age = 3;
 
+            this.list = ['吃饭', '睡觉', '打豆豆'];
 
+        }
 
+        Person.prototype.say = function () {
 
+            console.log("你好");
 
+        }
 
+        function Child(val) {
 
+            Person.call(this,val)
 
+        }
 
+        Child.prototype = new Person();
 
+        Child.prototype.constructor = Child;
 
+        let c1 = new Child('北京');
 
+        let c2 = new Child('哈尔滨');
 
+        c2.list.push("12");
 
+        console.log(c1.constructor,'打印');
 
+        console.log(c1, 'c1', c1.list)
 
+        console.log(c2, 'c2', c2.list)
 
+        c1.say()
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 29 - 0
复习/14.原型式继承.html
ファイルの表示 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script>
 
+        let Father = {
 
+            name: '图图',
 
+            age: 3,
 
+            list: ['吃饭', '睡觉', '打豆豆'],
 
+            say() {
 
+                console.log("你好")
 
+            }
 
+        }
 
+        let c1 = Object.create(Father);
 
+        let c2 = Object.create(Father);
 
+        c1.list.push("99")
 
+        c1.aa = 12;
 
+        console.log(c1,'c1')
 
+        console.log(c2,'c2')
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 36 - 0
复习/15.寄生式继承.html
ファイルの表示 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script>
 
+        function createObj(x) {
 
+            let obj = Object.create(x);
 
+            obj.address = '哈尔滨';
 
+            obj.hi = function() {
 
+                console.log("大家好")
 
+            }
 
+            return obj;
 
+        }
 
+        let Father = {
 
+            name: '图图',
 
+            age: 3,
 
+            list: ['吃饭', '睡觉', '打豆豆'],
 
+            say() {
 
+                console.log("你好")
 
+            }
 
+        }
 
+        let c1 = createObj(Father);
 
+        let c2 = createObj(Father);
 
+        c1.list.push("99")
 
+        console.log(c1,'c1')
 
+        console.log(c2,'c2')
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 41 - 0
复习/16.寄生组合式继承.html
ファイルの表示 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script>
 
+        function Father(a) {
 
+            this.name = '图图';
 
+            this.list = ['吃饭', '睡觉', '打豆豆'];
 
+            this.address = a;
 
+        }
 
+        Father.prototype.say = function () {
 
+            console.log("你好");
 
+        }
 
+        function Child(val) {
 
+            Father.call(this,val);
 
+        }
 
+        // Child.prototype = new Father();
 
+
 
+        function createObj(c, f) {
 
+            c.prototype = Object.create(f.prototype);
 
+            c.prototype.constructor = c;
 
+
 
+        }
 
+        createObj(Child, Father)
 
+        let c1 = new Child('北京');
 
+        let c2 = new Child('哈尔滨');
 
+        c1.list.push("hahaha")
 
+        console.log(c1, 'c1');
 
+        console.log(c2, 'c2');
 
+        c1.say();
 
+        c2.say();
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 57 - 0
复习/17.工厂模式.html
ファイルの表示 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        js五中设计模式：
 
+            单例模式
 
+            工厂模式
 
+            代理模式
 
+            装饰器模式
 
+            发布订阅模式
 
+    -->
 
+    <!-- 
+        工厂模式：
 
+            不使用new创建对象 由工厂函数/类统一对对象进行管理 例如创建 封装逻辑
 
+        缺点:
 
+            当模式过多时 工厂代码会显得臃肿
 
+        场景：
 
+            批量相似的对象 同意管理构造逻辑
 
+    -->
 
+        <script>
 
+            // admin
 
+            function Production(pName) {
 
+                this.name = pName;
 
+                this.role = '管理员';
 
+            }
 
+
 
+            // users
 
+            function User(uName) {
 
+                this.name = uName;
 
+                this.role = '用户';
 
+            }
 
+
 
+            function Info(type,name) {
 
+                switch(type) {
 
+                    case 'admin':
 
+                        return new Production(name);
 
+                    case 'users':
 
+                        return new User(name);
 
+                    default:
 
+                        throw new Error("传参错误");
 
+                }
 
+            }
 
+
 
+            let f1 = Info("admin","图图")
 
+            let f2 = Info("users","喜羊羊")
 
+            console.log(f1,'f1');
 
+            console.log(f2,'f2');
 
+
 
+
 
+        </script>
 
+</body>
 
+</html>

+ 36 - 0
复习/2.事件委托.html
ファイルの表示 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        事件委托：
 
+            利用事件冒泡的特性
 
+            把原来要绑定在子元素上的事件 绑定到他的父元素上
 
+            触发子元素的时候 时间会冒泡到父元素上
 
+            父元素通过判断事件源来执行对应的逻辑
 
+        优势：
 
+        减少内存
 
+        精简代码
 
+    -->
 
+    <ul>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+    </ul>
 
+    <script>
 
+        let uls = document.querySelector("ul");
 
+        let lis = document.querySelectorAll("ul li");
 
+        uls.onclick = function(event) {
 
+            console.log(event);
 
+            if(event.target.nodeName == "LI") {
 
+                console.log(event.target.innerText);
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 57 - 0
复习/3.this指向.html
ファイルの表示 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        let box = document.getElementById("box");
 
+        // 1.点击事件 this指向当前对象
 
+        // box.onclick = function() {
 
+        //     console.log(this); 
+        // }
 
+        // 2.定时器 this指向window
 
+        // setInterval
 
+        // setTimeout(() => {
 
+        //     console.log(this)
 
+        // },3000)
 
+        // box.onclick = function () {
 
+        //     setInterval(function(){
 
+        //         console.log(this)
 
+        //     }, 1000)
 
+        // }
 
+        // 3. 对象中 
+        /**
 
+         * this指向
 
+         * 普通函数 指向调用本身
 
+         * 箭头函数 指向上下文
 
+        */
 
+        // let obj = {
 
+        //     aa:1,
 
+        //     bb:2,
 
+        //     cc:()=> {
 
+        //         console.log(this);
 
+        //     }
 
+        // }
 
+        // obj.cc();
 
+        // 4.普通函数 this指向window
 
+        function fn1() {
 
+            console.log(this)
 
+        }
 
+        fn1();
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 31 - 0
复习/4.修改this指向.html
ファイルの表示 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        let obj = {
 
+            name: '图图'
 
+        }
 
+        function fn1(x,y) {
 
+            const sum = x + y;
 
+            console.log(sum,'sum')
 
+            console.log(this,'this');
 
+            console.log(this.name,'name')
 
+        }
 
+        // fn1.call(obj,2,3);
 
+        // fn1.apply(obj,[2,3]);
 
+        fn1.bind(obj,2,3)();
 
+        
+        /**
 
+         * call bind apply
 
+         * 1.call和apply可以直接调用，bind无法直接调用
 
+         * 2.call和bind第二项开始 参数逐个传入
 
+         * 3.apply第二项开始 参数需要放到数组中逐个传入
 
+        */
 
+    </script>
 
+</body>
 
+</html>

+ 68 - 0
复习/5.原型和原型链.html
ファイルの表示 

@@ -0,0 +1,68 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script>
 
+        // 普通函数
 
+        // function fn() {
 
+        //   return  5;
 
+        // }; 
+        // console.log(fn())
 
+        // // 匿名函数
 
+        // let fn1 = function() {}
 
+        // // 立即执行函数
 
+        // (function() {})();
 
+        /**
 
+         * 构造函数
 
+         * 1.首字母大写
 
+         * 2.new进行实例化调用
 
+         * 3.this指向当前实例
 
+         * 4.不用return进行反值
 
+         * 属性写在构造函数中
 
+         * 方法写在原型中
 
+         * 构造函数中自带了prototype属性 指向的是当前构造函数的原型
 
+        */
 
+        function Fn() {
 
+            // console.log(this)
 
+            this.name = '图图';
 
+            this.age = 3;
 
+            Fn.prototype.address = function () {
 
+                console.log("我家住在翻斗花园");
 
+            }
 
+        }
 
+        // 实例化调用
 
+        let f = new Fn();
 
+        console.log(f);
 
+        f.address();
 
+        /**
 
+         * 原型：
 
+         * 1.所有的构造函数中都自带了一个prototype属性(显性)，该属性指向的就是当前构造函数的原型
 
+         * 2.所有的构造函数都自带了一个构造器constructor(隐性)，该属性指向的是当前原型的构造函数
 
+         * 3.构造函数可以通过new进行实例化 产生该构造函数的实例化对象
 
+         * 4.实例化对象 可以通过_proto_(隐性)方法 访问到该构造函数原型中的属性和方法
 
+        */
 
+        function Person() {};
 
+        var person = new Person();
 
+        console.log(person.__proto__ == Person.prototype);
 
+        console.log(Person.prototype.constructor == Person);
 
+        console.log(Object.getPrototypeOf(person) === Person.prototype);
 
+
 
+
 
+        /**
 
+         * 原型链
 
+         * 访问对象属性时 先从对象本身去进行寻找
 
+         * 通过_proto_去原型上找
 
+         * 若还未找到 则在原型对象的原型上找 找到则返回 找不到则返回undefined
 
+        */
 
+
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 13 - 0
复习/6.获取屏幕的宽高.html
ファイルの表示 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
 
+    </script>
 
+</body>
 
+</html>

+ 29 - 0
复习/7.距离.html
ファイルの表示 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 200px;
 
+            height: 300px;
 
+            margin-top: 150px;
 
+            margin-left: 400px;
 
+            background: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        let box = document.getElementById("box");
 
+        // console.log(box.clientWidth);
 
+        // console.log(box.clientHeight);
 
+        console.log(box.offsetWidth)
 
+        console.log(box.offsetHeight)
 
+        console.log(box.offsetLeft)
 
+        console.log(box.offsetTop)
 
+    </script>
 
+</body>
 
+</html>

+ 65 - 0
复习/8.下落的树叶.html
ファイルの表示 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        img {
 
+            position: absolute;
 
+            /* width: 200px; */
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- <img src="./img/1.png" alt=""> -->
 
+    <script>
 
+        var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
 
+        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
 
+        function Leaf() {
 
+            this.width = Math.round(Math.random() * 100 + 100);
 
+            this.top = 0;
 
+            this.left = Math.random() * (screenWidth - this.width);
 
+            this.urls = './img/' + Math.floor(Math.random() * 4 + 1) + '.png'
 
+        }
 
+        // 绘制图片
 
+        Leaf.prototype.init = function () {
 
+            var imgs = document.createElement('img');
 
+            imgs.src = this.urls;
 
+            imgs.style.width = this.width + 'px';
 
+            imgs.style.left = this.left + 'px';
 
+            imgs.style.top = this.top + 'px';
 
+            document.body.appendChild(imgs);
 
+            this.newImgs = imgs;
 
+        }
 
+        // 展示图片
 
+        let newArr = [];
 
+        for (let i = 0; i < 20; i++) {
 
+            let leaf = new Leaf();
 
+            leaf.init();
 
+            newArr.push(leaf);
 
+        }
 
+        // 树叶落下
 
+        Leaf.prototype.fall = function () {
 
+            setTimeout(() => {
 
+               var timer = setInterval(() => {
 
+                    if (this.newImgs.offsetTop < screenHeight - this.newImgs.offsetHeight) {
 
+                        this.newImgs.style.top = this.newImgs.offsetTop + 10 + 'px';
 
+                    } else {
 
+                        clearInterval(timer);
 
+                    }
 
+                }, 20);
 
+            }, Math.random() * 2000);
 
+        }
 
+        // 点击落下
 
+        document.onclick = function () {
 
+            for (let i = 0; i < newArr.length; i++) {
 
+                newArr[i].fall();
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 50 - 0
复习/9.防抖.html
ファイルの表示 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 300px;
 
+            height: 300px;
 
+            text-align: center;
 
+            line-height: 300px;
 
+            color: #ff0;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- 
+        防抖:
 
+        点击事件 在事件触发后 等待一段时间在执行回调函数
 
+        在等待的时间内 若再点击事件 重新触发事件 重新计时
 
+        搜索框输入
 
+        滚动事件
 
+        resize窗口大小
 
+    -->
 
+    <div id="box"></div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        let x = 0;
 
+        function CountMain() {
 
+            box.innerText = x++;
 
+        }
 
+        // 防抖
 
+        function debounce(fn, delay) {
 
+            var timer = null;
 
+            return function () {
 
+                if (timer) clearTimeout(timer);
 
+                timer = setTimeout(function () {
 
+                    fn();
 
+                }, delay)
 
+            }
 
+        }
 
+        box.addEventListener('click', debounce(CountMain, 5000))
 
+    </script>
 
+</body>
 
+
 
+</html>

BIN
复习/img/1.png
ファイルの表示


BIN
复习/img/2.png
ファイルの表示


BIN
复习/img/3.png
ファイルの表示


BIN
复习/img/4.png
ファイルの表示