ES6中的箭头函数以及类的原理与实现 - web前端学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > ES6中的箭头函数以及类的原理与实现

博主信息

博文 60

粉丝 5

访问量 81497

专题推荐

更多>

1. 箭头函数

1.1 箭头函数的应该场景分析

给原生的回调函数/匿名函数提供了一个更加简洁的书写方式
解决回调中this关键字的指向问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数应用场景</title>
  </head>
  <body>
    <script>
      // 1. 简化原生回调函数的书写方式
      let demo1 = function (name) {
        return name;
      };
      console.log(demo1("jack")); // jack
      let demo2 = (name) => name;
      console.log(demo2("tom")); // tom
      // 用于遍历
      let arr = ["a", "b", "c", "d"];
      let ul = document.createElement("ul");
      let str = "";
      arr.forEach((item) => {
        str += `<li>我是${item}</li>`;
      });
      ul.innerHTML = str;
      document.body.appendChild(ul);
      // 2. 解决回调中this指向的问题
      let name = "outName";
      const p1 = {
        name: "p1的name",
        getName: function () {
          // 使用原生的回调方式 访问到的是全局name
          setTimeout(function () {
            console.log(this.name);
          }, 500);
        },
      };
      p1.getName(); // outName
      const p2 = {
        name: "p2的name",
        getName: function () {
          // 使用箭头函数，访问到的是当前对象的name
          setTimeout(() => {
            console.log(this.name);
          }, 500);
        },
      };
      p2.getName(); // p2的name
      // 通过上面示例理解如下两个问题：
      // 1. 普通回调函数中的this是指向全局的
      // 2. 箭头函数中实际上是没有this的，而箭头函数支持词法作用域（块级作用域），所以箭头函数中的
      //    this指向 是根据它的作用域而判断到底是指向当前对象还是全局的
      // 3. 千万不能理解成箭头函数中的 this 就一定是指向当前对象，如下：
      const p3 = {
        name: "p3的name",
        getName: () => {
          console.log(this.name);
        },
      };
      p3.getName(); // outName
      const p4 = {
        name: "p4的name",
        getName: function () {
          console.log(this.name);
        },
      };
      p4.getName(); // p4的name
      // 从上面可以看出，p3的getName()方法使用箭头函数方式书写，但是其中的this指向了全局
      // 箭头函数理解这块困了我很久，最终我总结如下：
      // 如果箭头函数中存在this,那么这个this会和定义这个箭头函数的this绑定，简单的说，就是箭头函数的父函数的this是谁，那么箭头函数的this就是谁
      const p5 = {
        name: "p5的name",
        getName: () => {
          console.log(this); // Window
          setTimeout(() => {
            console.log(this.name);
          }, 500);
        },
      };
      p5.getName(); // outName
      // 1. setTimeout中的this会和getName中的this绑定，而getName中的this是Window，所以最终这个出现的this是全局
      const p6 = {
        name: "p6的name",
        getName: function () {
          console.log(this); // 当前对象
          setTimeout(() => {
            console.log(this.name);
          }, 500);
        },
      };
      p6.getName(); // p6的name
      // 2. 此时，getName的this和当前对象绑定了，所以setTimeout箭头函数中的this也绑定到了当前对象
      // 3. 最后总结：其实这个箭头函数也并不是哪里都适合用
      //    当我们不需要使用this对象的时候，可以放心大胆的用箭头函数来简化语法
      //    当我们需要this对象的时候，你得明确知道你需要的this是全局还是当前对象，然后再酌情使用，就像p5和p6的例子中，
      //    如果你需要当前对象，那么在父函数getName()中，你就不能使用箭头函数的语法来书写getName()
    </script>
  </body>
</html>

1.2 箭头函数示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数示例</title>
    <style>
      p {
        background-color: black;
        color: white;
        line-height: 50px;
        width: 500px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <form action="" method="post">
      <label for="idNumber">请输入用户id号：</label>
      <input type="text" name="idNumber" id="idNumber" />
      <button>查询用户信息</button>
    </form>
    <p></p>
    <script>
      // 示例：根据id获取对应的用户信息
      // 模拟用户数据
      const users = [
        ["6001", "jack", 20, "male"],
        ["8002", "alice", 21, "female"],
        ["9003", "lisa", 22, "secret"],
      ];
      // 获取 输入框，查询按钮，以及存放用于信息的P标签
      let idNumber = document.querySelector("#idNumber");
      let btn = document.querySelector("button");
      let p = document.querySelector("p");
      btn.addEventListener(
        "click",
        (ev) => {
          // 禁用默认行为
          ev.preventDefault();
          //   console.log(idNumber.value);
          show(idNumber.value);
          // 执行完 显示用户信息 这个函数以后，清空输入框并再次获得输入焦点
          idNumber.value = "";
          idNumber.focus();
        },
        false
      );
      // 显示用户信息的函数
      function show(idNum) {
        // 获取所有用户信息的id号
        let ids = [];
        users.forEach((user) => {
          ids.push(user[0]);
        });
        // console.log(ids);
        // 下面一定要用循环，千万不能用foreach，因为遍历不能中途停止循环，而这里要用到break,continue
        // 1. 找到对应的用户信息时，要break，终止循环
        // 2. 如果没找到对应的用户信息，就continue，继续执行
        for (let i = 0; i < ids.length; i++) {
          if (ids[i] == idNum) {
            users.forEach((user) => {
              if (user[0] == idNum) {
                // 解构当前找到的这个用户信息这个数组
                let [id, name, age, sex] = user;
                p.innerHTML = `用户姓名：${name}，用户年龄：${age}，用户性别：${sex}`;
              }
            });
            break;
          } else {
            p.innerHTML = "信息不存在";
            continue;
          }
        }
      }
    </script>
  </body>
</html>

2. 类的原理与实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES6中的类的原理与实现</title>
  </head>
  <body>
    <script>
      // 先看看ES6中的类
      class A {
        // 构造方法
        constructor(name) {
          this.name = name;
        }
        // 原型方法
        getName() {
          return this.name;
        }
      }
      let obj = new A("xixi");
      console.log(obj.getName()); // xixi
      // 下面了解一下类的原理与实现
      // 在原生js中是没有类的概念的，都是通过“构造函数”来模拟类;
      console.dir(function () {});
      console.log({});
      // 通过上面两行代码，在控制器中看到：
      // 1. 一个函数有2个属性：prototype（原型属性）   __proto__（原型链属性）
      // 2. 一个对象有1个属性：__proto__
      // 下面使用构造函数来模拟 类的实现
      // 1. 声明一个构造函数
      function Demo(name) {
        // 属性
        this.name = name;
        // 方法
        this.getName = function () {
          return this.name;
        };
      }
      // 2. 实例化类
      let a = new Demo("jack");
      console.log(a.getName()); // jack
      console.log(a); // 在控制台中可以看到，a这个对象从Demo类中继承到了name属性和getName()方法
      // 但是为了防止代码的冗余，像一些公共方法通常都会写到它的原型属性上，这样的话，生成的对象也能自动继承方法，如下：
      function Demo1(name) {
        this.name = name;
      }
      // 公共方法
      Demo1.prototype.getName = function () {
        return this.name;
      };
      let b = new Demo1("alice");
      console.log(b.getName()); // alice
      console.log(b); // 此时，getName()方法就跑到对象b的__proto__属性中去了，而且以后实例化生成的对象，它的__proto__属性中都会继承这个方法
      // 因此，通过函数的原型属性prototype，将它的指针对应一个方法的时候，new出来的对象，也都能继承这个方法，并保存在__proto__原型属性链中
      // 基于这一点，构造函数便模拟了类的实现（继承父类中的方法）
      // 总结：函数的两大属性
      // 1. prototype：当该函数做为构造函数使用时（new 函数名），并且使用此属性声明的方法能对应上新生成的对象的__proto__属性，才有意义
      // 2. __proto__：此属性指向对象的公共方法
      // 分析总结：
      // 1. 函数中为什么也有__proto__属性：因为函数也是属于对象
      // 2. 为什么使用prototype声明方法后，生成的对象就在__proto__属性中继承了方法？
      //    a.在控制台中打开函数的prototype属性，可以看到在prototype属性中也有__proto__属性
      //    b.__proto__属性：其实是原型链属性，类似生物链把，它应该是在对象的最顶层，就简单理解成父类把
      //    c.当使用prototype声明方法时，这个方法就会保存在__proto__这个原型链属性中
      //    d.当实例化这个构造函数生成一个新对象时，对象的__proto__属性必然会继承构造函数的__proto__属性，从而也就继承了方法
    </script>
  </body>
</html>