fengchuanyu 8 maanden geleden
bovenliggende
commit
dfff18ccd0
2 gewijzigde bestanden met toevoegingen van 128 en 0 verwijderingen
  1. 88 0
      5_ES6/19_继承.html
  2. 40 0
      5_ES6/20_class.html

+ 88 - 0
5_ES6/19_继承.html

@@ -0,0 +1,88 @@
+<!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>
+        //Array Object Number
+        // Person 他是一个构造函数
+        // 通过 new 来实例化出一个新对象
+        // 第一种方式:构造继承 他无法继承原型上的方法
+        // function Person(userName,userAge){
+        //     this.userAge = userAge;
+        //     this.userName = userName;
+        //     this.sayName = function(){
+        //         console.log(this.userName);
+        //     }
+        // }
+        // var p1 = new Person('小明',18);
+        // console.log(p1.userAge);
+        // p1.sayName();
+
+        // 创建一个新的构造函数 Student 去继承 Person
+        // function Student(userName,userAge,school){
+        //     Person.call(this,userName,userAge);
+        //     this.school = school;
+        // }
+
+        // var s1 = new Student("小红",20,"黑大");
+
+        // console.log(s1.userAge);
+        // s1.sayName();
+        // console.log(s1.school);
+
+        // 方法二 原型继承   他无法实现属性的继承
+        // function Person(userName,userAge){
+        //     this.userAge = userAge;
+        //     this.userName = userName;
+        //     // this.sayName = function(){
+        //     //     console.log(this.userName);
+        //     // }
+        // }
+        // Person.prototype.sayName = function(){
+        //     console.log("你好");
+        // }
+
+        // var p1 = new Person("小李","22","黑大");
+        // p1.sayName();
+
+        // function Student(userName,userAge,school){
+        //     // Person.call(this,userName,userAge);
+        //     this.school = school;
+        // }
+        // Student.prototype = new Person();
+        // var s1 = new Student("小红",20,"黑大");
+        // s1.sayName();
+        // console.log(s1.userName);
+        // console.log(s1.school);
+
+        // 方法三:组合继承
+        function Person(userName,userAge){
+            this.userAge = userAge;
+            this.userName = userName;
+        }
+
+        Person.prototype.showName = function(){
+            console.log(this.userName);
+        }
+
+        function Student(userName,userAge,school){
+            Person.call(this,userName,userAge);
+            this.school = school;
+        }
+
+        Student.prototype = new Person();
+
+        Student.prototype.constructor = Student;
+
+        var s1 = new Student("小明",18,"黑大");
+        console.log(s1.userAge);
+        s1.showName();
+        console.log(s1.constructor);
+
+    </script>
+</body>
+</html>

+ 40 - 0
5_ES6/20_class.html

@@ -0,0 +1,40 @@
+<!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 Person{
+            constructor(userName,userAge){
+                this.userName = userName;
+                this.userAge = userAge;
+            }
+            showName(){
+                console.log(this.userName);
+            }
+        }
+        // let p1 = new Person("小明",18);
+        // console.log(p1.userAge);
+        // p1.showName();
+
+        class Student extends Person{
+            constructor(userName,userAge,school){
+                super(userName,userAge);
+                this.school = school;
+            }
+            showSchool(){
+                console.log(this.school);
+            }
+        }
+
+        let s1 = new Student("小红",20,"黑工程");
+        console.log(s1.userAge);
+        s1.showName();
+        console.log(s1.constructor)
+        s1.showSchool();
+    </script>
+</body>
+</html>