e 11 months ago
parent
commit
c329f3d0b6
2 changed files with 94 additions and 0 deletions
  1. 42 0
      js/js高阶/10.原型.html
  2. 52 0
      js/js高阶/11.es6类.html

+ 42 - 0
js/js高阶/10.原型.html

@@ -0,0 +1,42 @@
+<!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>
+        /**
+         * 所有构造函数下都有两个属性:constructor 和 prototype
+         * 原型的特点:
+         * 1.方法 写在原型下
+         * 2.属性 写在构造函数下
+         * 
+        */
+       function Person(name,age) {
+            this.name = name;
+            this.age = age;
+
+            Person.prototype.eat = function() {
+                console.log("青草蛋糕")
+            }
+       }
+       let p1 = new Person('LiLi',20);
+       console.log(p1);
+       p1.eat();
+       /**
+        * 1.令当前子函数的原型 是 当前实例化的父函数
+        * 2.父对象.call 修改this指向
+       */
+       function Child(name,age,a) {
+        Person.call(this,name,age);
+        this.a =a;
+       }
+       Child.prototype = new Person();
+       let aa = new Child('HAHA',10,'篮球');
+       console.log(aa)
+       aa.eat();
+    </script>
+</body>
+</html>

+ 52 - 0
js/js高阶/11.es6类.html

@@ -0,0 +1,52 @@
+<!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>
+        // 类 class 声明
+        class Person {
+            // 1.属性 构造器下
+            constructor(name,age){
+                this.name = name;
+                this.age = age;
+            }
+            // 2.方法
+            say(){
+                console.log("我叫" +this.name,"今年"+this.age+"岁");
+            }
+            // static 类调用
+            static hello() {
+                console.log("您好")
+            }
+        }
+        let p1 = new Person("John",10);
+        p1.name = '小小'
+        console.log(p1);
+        p1.say();
+        // 实例化调用
+        Person.hello();
+        // p1.hello();
+
+        // 类的继承 extends
+        class Child extends Person {
+            constructor(name,age,hobby) {
+                // super 继承父类
+                super(name,age);
+                this.hobby = hobby
+            }
+            hi1() {
+                console.log("hi1")
+            }
+        }
+        let c1 = new Child("Lucy",20,'羽毛球');
+        console.log(c1);
+        c1.say();
+        c1.hi1()
+        Child.hello();
+    </script>
+</body>
+</html>