day3 2020-06-05

05.子类继承父类方法并扩展自己的方法.html → 1.面向对象/05.子类继承父类方法并扩展自己的方法.html

@@ -26,8 +26,8 @@
         constructor(x, y) {
             // super的调用必须位于子类使用this之前？？？？？why????
             super(x, y)
-            this.x = x
-            this.y = y
+                // this.x = x
+                // this.y = y
         }
         subtract() {
             console.log(this.x - this.y);

06.使用类的注意事项.html → 1.面向对象/06.使用类的注意事项.html

@@ -14,14 +14,14 @@
         class Star {
             constructor(name) {
                 that = this
-                console.log(this);
+                console.log(this); //输出：Star{} 输出的是实例对象
                 this.name = name
                 this.sing('Someone like you')
                 var btn = document.querySelector('button')
                 btn.onclick = this.sing;
             }
             sing(song) {
-                console.log(this); //输出：<button>按钮</button>   普通函数中的this指向的是他的调用者
+                console.log(this); //点击按钮，输出：<button>按钮</button>   普通函数中的this指向的是他的调用者
                 console.log(that.name + song); //通过that获取实例对象上的值
             }
         }

07-面向对象案例/js/tab.js → 1.面向对象/07-面向对象案例/js/tab.js

@@ -25,6 +25,7 @@ class Tab {
                 this.guanbis[i].onclick = this.deleteTab;
                 // 绑定双击事件
                 this.spans[i].ondblclick = this.editTab;
+                this.sections[i].ondblclick = this.editTab;
             }
             // 为关闭按钮绑定关闭事件，简化为上诉操作
             // for (var i = 0; i < this.guanbis.length; i++) {
@@ -36,24 +37,20 @@ class Tab {
     updateNode() {
             this.lis = this.main.querySelectorAll("li");
             this.sections = this.main.querySelectorAll("section");
-            // 获取所有的关闭元素
             this.guanbis = this.main.querySelectorAll(".icon-guanbi");
-
-            this.spans = this.main.querySelectorAll('fisrstnav li span:first-child')
+            this.spans = this.main.querySelectorAll(".fisrstnav li span:first-child");
         }
         // 切换功能
     toggleTab() {
             // 该函数的调用者为li,所以函数内部的this指向的都是li元素，clearClass函数是实例对象的函数，所有只能通过that调用
             that.clearClass();
-            // 普通函数中的this指向的是调用者，该调用者是li元素，所有可以通过this.index获取到值
+            // 该函数的调用者为li,所以函数内部的this指向的都是li元素，所有可以通过this.index获取到值
             console.log("tab" + this.index);
             this.className = "liactive";
             that.sections[this.index].className = "conactive";
-            // console.log(document.querySelector(".conactive"));
         }
         //清除所有样式
     clearClass() {
-            // 由上面可知，调用该函数的为实例对象，则此时的this指向的就是该实例对象,所有应该用this.lis.length
             for (var i = 0; i < this.lis.length; i++) {
                 this.lis[i].className = "";
                 this.sections[i].className = "";
@@ -67,6 +64,7 @@ class Tab {
             var newTab =
                 '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
             var newSection = `<section class="conactive">测试${random}</section>`;
+            // 在ul内部的最后一个元素的后面添加标签
             that.ul.insertAdjacentHTML("beforeend", newTab);
             that.fsection.insertAdjacentHTML("beforeend", newSection);
 
@@ -75,11 +73,11 @@ class Tab {
         }
         // 删除功能
     deleteTab(e) {
-        // 由于父元素绑定了切换事件，所有应该阻止冒泡
+        // ❤由于父元素绑定了切换事件，所有应该阻止冒泡
         e.stopPropagation();
         console.log("delete" + this.index);
         var index = this.index;
-        // 删除对应的li和section和guanbi
+        // ❤删除对应的li和section和guanbi
         that.lis[index].remove();
         that.sections[index].remove();
         that.guanbis[index].remove();
@@ -91,17 +89,44 @@ class Tab {
             return;
         }
 
-        // 若删除的是第一个元素，则会选择第二个元素，且只有第二个元素存在时，才进行操作
-        // 若删除的不是第一个元素，则会选择上一个元素
+        // ❤若删除的是第一个元素，则会切换至第二个元素，且只有第二个元素存在时，才进行操作
+        // ❤若删除的不是第一个元素，则会选择上一个元素
         index === 0 ?
             that.lis[1] && that.lis[1].click() :
             that.lis[--index].click();
 
-        // 删除后重新初始化
+        // ❤删除后重新初始化
         that.init();
     }
     editTab() {
-        alert(22)
+        var _that = this;
+
+        // 双击时禁止选中文字
+        window.getSelection ?
+            window.getSelection().removeAllRanges() :
+            document.selection.empty();
+        // 为span的内容换成表单
+        var str = this.innerHTML;
+        this.innerHTML = `<input type='text' value=${str} />`;
+        // 获取input的元素
+        var input = this.children[0];
+        // 选中input中的文字,增强用户体验
+        input.select();
+        // 离开输出框
+        input.onblur = function() {
+            // 方式一：
+            // _that.innerHTML = input.value;
+            // 方式二：
+            this.parentNode.innerHTML = input.value;
+        };
+
+        // ❤按回车键实现输入框失去焦点同样的效果
+        input.onkeyup = function(e) {
+            if (e.keyCode == 13) {
+                // 手动调用输入框失去焦点事件
+                this.blur();
+            }
+        };
     }
 }
 var tab = new Tab("#tab");

2.构造函数和原型/01.构造函数创建对象.html

@@ -0,0 +1,30 @@
+<!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>
+        // 方式一：通过new Object()创建对象
+        var obj = new Object()
+            // 方式二：通过对象字面量创建对象
+        var obj2 = {}
+            // 方式三：通过构造函数创建对象
+            // 构造函数的首字母要大写
+        function Star(name, age) {
+            this.name = name;
+            this.age = age;
+            this.sing = function() {
+                console.log(this.name + 'sing a song');
+            }
+        }
+        var adele = new Star('阿黛尔', 20)
+        adele.sing()
+    </script>
+</body>
+
+</html>

2.构造函数和原型/02.实例成员和静态成员.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>
+        function Star(name, age) {
+            // 实例成员是指通过this添加的成员
+            this.name = name;
+            this.age = age;
+            this.sing = function() {
+                console.log(this.name + 'sing a song');
+            }
+        }
+        var adele = new Star('阿黛尔', 20)
+        console.log(adele.name); //实例成员只能通过实例对象访问
+        console.log(Star.name);
+
+        // 静态成员是指在构造函数本身添加的成员
+        Star.sex = '女'
+        console.log(Star.sex); //静态成员只能通过构造函数访问
+        console.log(adele.sex);
+    </script>
+</body>
+
+</html>

2.构造函数和原型/03.原型.html

@@ -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>
+        function Star(name, age) {
+            this.name = name;
+            this.age = age;
+            // 1.若函数定义再构造函数内部，则每一个创建出来的对象都会其单独开辟内存地址空间。存在浪费地址空间的问题。
+            // this.sing = function() {
+            //     console.log(this.name + 'sing a song');
+            // }
+        }
+        // 2.每一个构造函数都有一个原型对象，在原型对象上定义属性可以实现所有对象共享该属性，即共享同一块地址空间。
+        Star.prototype.sing = function() {
+            console.log(this.name + 'sing a song');
+        }
+        var adele = new Star('阿黛尔')
+        var wf = new Star('王菲')
+        console.log(adele.sing());
+        console.log(wf.sing());
+        console.log(adele.sing === wf.sing);
+        // console.dir(Star);
+
+        // 3.❤一般情况下，公共属性定义在构造函数中，而公共方法定在在原型对象上
+    </script>
+</body>
+
+</html>

2.构造函数和原型/xxx.md

@@ -0,0 +1 @@
+### 类的定义是在es6才出现的，在es6之前对象的创建是通过构造函数和原型来实现的