01-JavaScript 高级进阶 第三天

1.今日目标

  1. 箭头函数（重点）

  2. instanceof 和 constructor

  3. es6 class 和 继承

  4. 闭包

2.箭头函数 重点

格式—定义语法

  1. // 箭头函数是匿名函数，一般做为参数传递
  2. // let test = function (a,b){
  3. //     let sum = a + b 
  4. //     return sum
  5. // }
  6. // let test = (参数) => {函数体}
  7. // 几个小细节
  8. // 1.如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
  9. // 2.如果只有一个参数，那么可以省略()
  10. // 3.如果没有参数，()也不能省略
  11. // let test = (a,b) =>  a + b    // 不能有大括号
  12. let test = a =>  a + 10 
  14. let res = test(100)
  15. console.log(res)

特性

  1. // 箭头函数自己没有this
  2. // 箭头函数的this是确定的，况且永远不变
  3. // 箭头函数中的this指向  创建这个箭头函数所在对象  的上下文
  4. let obj = {
  5.     name: 'jack',
  6.     say: function () {
  7.         return () => {
  8.             console.log(this) // obj
  9.         }
  10.     }
  11. }
  12. let fn = obj.say()
  13. fn()                 // obj {name: "jack", say: ƒ}
  15. let newobj = {}
  16. newobj.fun = fn
  17. newobj.fun()         // obj {name: "jack", say: ƒ}
  19. let rose = {
  20.     name: 'rose'
  21. }
  23. fn.call(rose)         // obj {name: "jack", say: ƒ}    无法改变

3.instanceof 和 constructor

判断一个实例是否属于某个构造函数

  1.     // 构造函数
  2.     function Person() {
  4.     }
  5.     const p1 = new Person();
  7.     console.log(p1 instanceof Person);
  8.     console.log(p1.__proto__.constructor === Person);

4.es6 class（重点）

es6的class 的出现 基本上可以替代了es5的构造函数和原型,使之代码结构上更加简洁。

关键字

  1. class
  2. 属性
  3. 方法
  4. 继承 extends
  5. 构造函数 constructor
  6. 方法重写 override：子类方法覆盖父类，super.父类方法()
  7. 父类的构造函数 super ：子类有构造方法且使用this前，必须使用super()

完整代码体验

  1.     class Person {
  2.       // 构造方法
  3.       constructor(name) {
  4.         // 属性
  5.         this.name = name;
  6.       }
  7.       // 方法
  8.       say() {
  9.         console.log(this.name);
  10.       }
  11.     }
  12.     // 继承
  13.     class Student extends Person{
  14.       constructor(name,height){
  15.         // console.log(this);            // 语法错误：必须先调用super()才能使用this
  16.         super(name);
  17.         this.height=height;
  18.       }
  19.     }
  21.     const s1=new Student("八神",180);
  22.     s1.say();                            // 八神
  24.     class Saler extends Person{
  25.         constructor(name,age){
  26.             super(name);
  27.             this.age = age;
  28.         }
  29.         // 覆盖（重写）
  30.         say(){
  31.             // 访问父类方法
  32.             super.say();                // 马云
  33.             console.log(this.age);
  34.         }
  35.     }
  37.     const s2 = new Saler('马云',50);
  38.     s2.say();                            // 50

Tab栏切换

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>tab栏切换</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         ul {
  14.             list-style: none;
  15.         }
  17.         .box {
  18.             width: 400px;
  19.             height: 300px;
  20.             border: 1px solid #ccc;
  21.             margin: 100px auto;
  22.         }
  24.         .hd {
  25.             height: 45px;
  26.         }
  28.         .hd span {
  29.             display: inline-block;
  30.             /*将行内元素转换成行内块元素，宽高才起作用*/
  31.             width: 90px;
  32.             background-color: pink;
  33.             line-height: 45px;
  34.             text-align: center;
  35.             cursor: pointer;
  36.         }
  38.         .hd span.current {
  39.             /*交集选择器，标签指定式选择器*/
  40.             background-color: purple;
  41.             /*紫色*/
  42.         }
  44.         .bd li {
  45.             height: 255px;
  46.             background-color: purple;
  47.             display: none;
  48.             /*设置隐藏*/
  49.         }
  51.         .bd li.current {
  52.             display: block;
  53.             /*显示*/
  54.         }
  55.     </style>
  56.     <script src="js/TabExchange.js"></script>
  57. </head>
  59. <body>
  60.     <div class="box" id="box">
  61.         <div class="hd">
  62.             <span class="current">体育</span>
  63.             <span>娱乐</span>
  64.             <span>新闻</span>
  65.             <span>综合</span>
  66.         </div>
  67.         <div class="bd">
  68.             <ul id="list">
  69.                 <li class="current">我是体育模块</li>
  70.                 <li>我的娱乐模块</li>
  71.                 <li id="li3">我是新闻模块</li>
  72.                 <li>我是综合模块</li>
  73.             </ul>
  74.         </div>
  75.     </div>
  77.     <script>
  78.         let tab = new TabExchange('box', 'current');
  79.         console.dir(tab);
  80.     </script>
  82. </body>
  84. </html>
  1. class TabExchange {
  3.     // 构造函数
  4.     constructor(id, className) {
  5.         // 获取id对应的元素：规范，属于最外层
  6.         this.id = document.querySelector(`#${id}`)
  7.         // 规定内部有两层解构：div>span
  8.         this.hd = this.id.querySelectorAll('div>span')
  9.         // 规范内部有两层解构：div>ul>li
  10.         this.bd = this.id.querySelectorAll('div>ul>li')
  11.         // 保存当前要处理的样式类
  12.         this.style = className;
  14.         // 调用自己的tabClick 方法处理点击事件
  15.         this.tabClick();
  16.     }
  19.     // 绑定点击事件
  20.     tabClick() {
  21.         // 因为接下来要绑定事件，事件里面也会出现this，所以先定义变量that来保存当前TabExchange对象的this
  22.         let that = this
  24.         // 循环遍历，绑定事件，并进行事件处理
  25.         this.hd.forEach(function (item, key) {
  26.             // item就是span，key就是span的下标
  27.             item.addEventListener('click', function () {
  29.                 // 排他：清空hd全部样式
  30.                 that.hd.forEach(function (item1) {
  31.                     item1.classList.remove(that.style)
  32.                 })
  34.                 // 清空bd的所有样式
  35.                 that.bd.forEach(function (item2) {
  36.                     item2.classList.remove(that.style)
  37.                 })
  39.                 // 给当前事件元素添加样式
  40.                 that.hd[key].classList.add(that.style)
  41.                 that.bd[key].classList.add(that.style)
  42.             })
  43.         })
  44.     }
  46. }

元素创建继承

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .element {
  11.         width: 200px;
  12.         height: 200px;
  13.         border-radius: 50%;
  14.         border: 10px solid #00ffff;
  16.         text-align: center;
  17.         font-size: 30px;
  18.         line-height: 200px;
  20.         overflow: hidden;
  21.         float: left;
  22.     }
  23. </style>
  25. <body>
  26.     <script>
  27.         // 创建一个类：可以创建普通元素，并且可以实现将元素挂到指定父元素下
  28.         class CreateElement {
  29.             // 构造函数，传入标签名，文本内容，和元素默认类名
  30.             constructor(element, text, className = 'element') {
  31.                 // 1.创建元素
  32.                 const node = document.createElement(element)
  33.                 // 2.添加类名
  34.                 node.classList.add(className)
  35.                 // 3.添加文本内容（双标签有效，单标签无效）
  36.                 node.innerText = text
  38.                 // 4.将创建的元素节点存入到属性node
  39.                 this.node = node
  40.             }
  42.             // 将当前创建的元素 添加到指定父元素下
  43.             appendTo(selector) {
  44.                 // 获取父元素
  45.                 const parent = document.querySelector(selector)
  46.                 // 添加子元素
  47.                 parent.appendChild(this.node)
  48.             }
  49.         }
  51.         // 直接创建一个普通元素
  52.         const div = new CreateElement('div', '做人开心就好')
  53.         div.appendTo('body')
  55.         // 图片标签不适用于普通元素创建（有属性src），但是想使用默认的样式和创建过程
  56.         // 创建子类 继承 父类
  57.         class CreateImg extends CreateElement {
  58.             // 自己的构造函数：只需要传入图片
  59.             constructor(src, className = 'element') {
  60.                 // 父类构造函数
  61.                 super('img', '', className)
  63.                 // 给创建的元素增加src属性
  64.                 this.node.src = src
  65.             }
  66.         }
  68.         // 改变了创建的内容，但是可以直接应用父类继承的方法
  69.         const img = new CreateImg('images/02.jpg')
  70.         img.appendTo('body')
  72.     </script>
  73. </body>
  75. </html>

5.闭包

概念

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），只要出现引用了外部变量的函数,那么这个现象就叫做闭包

作用

  1. 让数据变得更加的安全
  2. 优化代码
  3. 函数内返回了另外一个函数

使用闭包前

  1. <body>
  2.   <button>自增</button>
  3.   <h1></h1>
  4.   <script>
  6.     const btn = document.querySelector("button");
  7.     const h1 = document.querySelector("h1");
  8.     let num = 0;
  9.     let arr = [{ name: "金" }, { name: "木" }, { name: "水" }, { name: "火" }, { name: "土" }];
  11.     h1.innerText = arr[num].name;
  12.     btn.onclick = function () {
  13.       num++;
  14.       if (num >= arr.length) {
  15.         num = 0;
  16.       }
  17.       h1.innerText = arr[num].name;
  18.     }
  20.   </script>
  21. </body>

使用闭包后

  1. <body>
  2.   <button>自增</button>
  3.   <h1></h1>
  4.   <script>
  6.     const btn = document.querySelector("button");
  7.     const h1 = document.querySelector("h1");
  9.     function setElements() {
  10.       let num = -1;
  11.       let arr = [{ name: "金" }, { name: "木" }, { name: "水" }, { name: "火" }, { name: "土" }];
  12.       return function () {
  13.         num++;
  14.         if (num >= arr.length) {
  15.           num = 0;
  16.         }
  17.         return arr[num].name;
  18.       }
  19.     }
  21.     const getElement=setElements();
  23.     h1.innerText = getElement();
  24.     btn.onclick = function () {
  25.       h1.innerText = getElement();
  26.     }
  27.   </script>
  28. </body>