ES6 中的面向对象

面向对象

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>

你可能感兴趣的:(前端)