ES6 中的面向对象

最新推荐文章于 2023-09-06 20:16:00 发布

Ethanzyc

最新推荐文章于 2023-09-06 20:16:00 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： es6 面向对象 bind

本文链接：https://blog.youkuaiyun.com/zhuyuchen321/article/details/82755173

前端专栏收录该内容

16 篇文章

订阅专栏

面向对象

ES6 之前的传统的对象看这篇吧——js 笔记，ES6出来之后，官方提供了面向对象的写法。看代码吧

class Person{
  constructor(name,age,address) {
    this.name = name;
    this.age = age;
    this.address = address;
  }

  introduce() {
    console.log(`大家好，我叫${this.name}，今年${this.age}岁，家在${this.address}`);
  }
}

class Student extends Person{
  constructor(name,age,address,major) {
    super(name,age,address);
    this.major = major;
  }

  introduce() {
    console.log(`大家好，我叫${this.name}，今年${this.age}岁，家在${this.address}， 专业是${this.major}`);
  }
}

let person = new Person('ethan', 24, '包邮区');
person.introduce();  // 大家好，我叫ethan，今年24岁，家在包邮区

let student = new Student('zyc', 18, '南京', '车辆工程');
student.introduce(); // 大家好，我叫zyc，今年18岁，家在南京， 专业是车辆工程

上面定义了一个 Person 类，又定义了一个继承 Person 类的 Student 类，很明显方便了很多。

bind()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    window.onload = () => {
      class Person{
        constructor(name,age,address) {
          this.name = name;
          this.age = age;
          this.address = address;
        }

        introduce() {
          console.log(`大家好，我叫${this.name}，今年${this.age}岁，家在${this.address}`);
        }
      }

      let person = new Person('ethan', 24, '包邮区');
      
      // document.onclick = person.introduce; // 大家好，我叫undefined，今年undefined岁，家在undefined

      document.onclick = person.introduce.bind(person); // 大家好，我叫ethan，今年24岁，家在包邮区
    }
  </script>
</head>
<body>
  
</body>
</html>

可以看到，如果直接给 onclick 一个方法，但现在方法中的 this 指向调用它的 document，所以都是 undefined。所以需要给他绑定一个对象，这里绑定的是 person，就能正常输出了。bind(obj)的作用就相当于把调用它的函数内部的 this 赋值为 obj，即 this = obj。

还有一点需要注意的就是箭头函数的 this 和普通函数的 this 指代的会有所不同：

箭头函数：根据所在的环境
普通函数：根据调用的对象

看如下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    window.onload = () => {
      let b = {
        aa: 'aaa'
      }
      
      b.arrFunc = () => {
        console.log(this);
      }
      b.func = function () {
        console.log(this);
      }

      b.arrFunc(); // b {...}
      b.func();    // Window{...}
    }
  </script>
</head>
<body>
  
</body>
</html>