Inicio Explorar Axuda
Iniciar sesión
lovecoding
/
W250511
10
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

admin

fengchuanyu hai 1 semana
pai
80dc0d666c
achega
88071f2a2b
Modificáronse 5 ficheiros con 181 adicións e 0 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 49 0
      8-ES6/18_原型.html
  2. 35 0
      8-ES6/19_构造函数.html
  3. 45 0
      8-ES6/20_继承.html
  4. 45 0
      8-ES6/21_class类.html
  5. 7 0
      8-ES6/练习题3_数组去重.html

+ 49 - 0
8-ES6/18_原型.html
Ver ficheiro 

@@ -0,0 +1,49 @@
 
+<!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 arr = [1, 2, 3];
 
+        //    Array 构造函数 构造函数类似于工厂可以源源不断的生产数组
 
+        // arr2 是数组的实例化对象
 
+        // 可以通过构造函数实例化很多的数组对象
 
+        let arr2 = new Array(1, 2, 3);
 
+        console.log(arr);
 
+        console.log(arr2);
 
+
 
+        // constructor 找到自己的构造函数
 
+        console.log(arr.constructor);
 
+        console.log(arr2.constructor);
 
+
 
+        //    原型 prototype
 
+        // 数组原型 
+        // console.log(Array.prototype);
 
+        // // 字符串原型
 
+        // console.log(String.prototype);
 
+        // // 数字原型
 
+        // console.log(Number.prototype);
 
+        // // 布尔值原型
 
+        // console.log(Boolean.prototype);
 
+        // // 函数原型
 
+        // console.log(Function.prototype);
 
+
 
+        // 在数组原型上新增方法
 
+        // Array.prototype.loveCoding = function () {
 
+        //     console.log("我很喜欢编码");
 
+        // }
 
+
 
+        // arr.loveCoding();
 
+
 
+        // 实例化 的对象 上的原型 __proto__
 
+        console.log(arr.__proto__);
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 35 - 0
8-ES6/19_构造函数.html
Ver ficheiro 

@@ -0,0 +1,35 @@
 
+<!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>
 
+        // 构造函数 
+        // 构造函数的首字母一般大写
 
+        // this 指向构造函数
 
+        function Person(name,age){
 
+            this.username = name;
 
+            this.age = age;
 
+            // this.talk = function(){
 
+            //     console.log(`我叫${this.username},我今年${this.age}岁`)
 
+            // }
 
+        }
 
+        // 原型上写方法
 
+        Person.prototype.talk = function(){
 
+            console.log(`我叫${this.username},我今年${this.age}岁`)
 
+        }
 
+        // 实例化对象
 
+        let p1 = new Person("张三",18);
 
+        let p2 = new Person("李四",20);
 
+        console.log(p1);
 
+        console.log(p2);
 
+        p1.talk();
 
+        p2.talk();
 
+        
+
 
+    </script>
 
+</body>
 
+</html>

+ 45 - 0
8-ES6/20_继承.html
Ver ficheiro 

@@ -0,0 +1,45 @@
 
+<!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(name,age){
 
+            this.username = name;
 
+            this.age = age;
 
+        }
 
+        // 原型上写方法
 
+        Person.prototype.talk = function(){
 
+            console.log(`我叫${this.username},我今年${this.age}岁`)
 
+        }
 
+
 
+        // 继承
 
+        function Teacher(name,age,school ){
 
+            // 调用父类的构造函数
 
+            Person.call(this,name,age);
 
+            this.school = school;
 
+        }
 
+        
+        // 继承父类的方法
 
+        Teacher.prototype = Person.prototype;
 
+        // 修复构造函数指向
 
+        Teacher.prototype.constructor = Teacher;
 
+        // 自己独有的方法
 
+        Teacher.prototype.showSchool = function(){
 
+            console.log(`我是${this.username},我来自${this.school}`)
 
+        }
 
+
 
+        // 实例化对象
 
+        let t1 = new Teacher("王五",30,"清华大学");
 
+        console.log(t1.username)
 
+        t1.talk();
 
+        t1.showSchool();
 
+        console.log(t1.constructor);
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 45 - 0
8-ES6/21_class类.html
Ver ficheiro 

@@ -0,0 +1,45 @@
 
+<!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(name,age){
 
+                this.username = name;
 
+                this.age = age;
 
+            }
 
+            // 类的方法
 
+            talk(){
 
+                console.log(`我叫${this.username},我今年${this.age}岁`)
 
+            }
 
+        }
 
+
 
+        // let p1 = new Person("张三",18);
 
+        // console.log(p1.username);
 
+        // p1.talk();
 
+
 
+        // 类的继承
 
+        class Teacher extends Person{
 
+            constructor(name,age,school){
 
+                super(name,age);
 
+                this.school = school;
 
+            }
 
+            // 私有方法
 
+            showSchool(){
 
+                console.log("我的学校是"+this.school);
 
+            }
 
+        }
 
+
 
+        let t1 = new Teacher("张三",18,"清华大学");
 
+        console.log(t1.username);
 
+        t1.talk();
 
+        t1.showSchool();
 
+    </script>
 
+</body>
 
+</html>

+ 7 - 0
8-ES6/练习3_数组去重.html → 8-ES6/练习题3_数组去重.html
Ver ficheiro 

@@ -8,6 +8,13 @@
 
 <body>
 
 <body>
 
     <script>
 
     <script>
 
         let arr = [1,2,3,4,5,6,7,2,3,4,5];
 
         let arr = [1,2,3,4,5,6,7,2,3,4,5];
 
+        // 方法一
 
+        // let newArr = new Set(arr);
 
+        // newArr = Array.from(newArr)
 
+        // console.log(newArr);
 
+        // 方法二
 
+        let newArr = [...new Set(arr)];
 
+        console.log(newArr)
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>