JavaScript 什么是类?

类(class)是在 JS 中编写构造函数的新方法。它是使用构造函数的语法糖,在底层中使用仍然是原型和基于原型的继承。

//ES5 Version
function Person(firstName, lastName, age, address) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.address = address;
}

Person.self = function() {
  return this;
}

Person.prototype.toString = function() {
  return "[object Person]";
}

Person.prototype.getFullName = function() {
  return this.firstName + " " + this.lastName;
}

//ES6 Version
class Person {
  constructor(firstName, lastName, age, address) {
    this.lastName = lastName;
    this.firstName = firstName;
    this.age = age;
    this.address = address;
  }

  static self() {
    return this;
  }

  toString() {
    return "[object Person]";
  }

  getFullName() {
    return`$ {
      this.firstName
    }
    $ {
      this.lastName
    }`;
  }
}

重写方法并从另一个类继承。

//ES5 Version
Employee.prototype = Object.create(Person.prototype);

function Employee(firstName, lastName, age, address, jobTitle, yearStarted) {
  Person.call(this, firstName, lastName, age, address);
  this.jobTitle = jobTitle;
  this.yearStarted = yearStarted;
}

Employee.prototype.describe = function () {
  return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`;
}

Employee.prototype.toString = function () {
  return "[object Employee]";
}

//ES6 Version
class Employee extends Person { //Inherits from "Person" class
  constructor(firstName, lastName, age, address, jobTitle, yearStarted) {
    super(firstName, lastName, age, address);
    this.jobTitle = jobTitle;
    this.yearStarted = yearStarted;
  }

  describe() {
    return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`;
  }

  toString() { // Overriding the "toString" method of "Person"
    return "[object Employee]";
  }
}

所以我们要怎么知道它在内部使用原型?

class Something {

}

function AnotherSomething(){

}
const as = new AnotherSomething();
const s = new Something();

console.log(typeof Something); // "function"
console.log(typeof AnotherSomething); // "function"
console.log(as.toString()); // "[object Object]"
console.log(as.toString()); // "[object Object]"
console.log(as.toString === Object.prototype.toString); // true
console.log(s.toString === Object.prototype.toString); // true
1. 本站关注web前端开发,分享前端经验和技巧!
2. 喜欢本站的朋友可以收藏(Ctrl + D)本站!
3. 加入QQ群:565733884,我们大家一起来交流技术!
码云笔记 » JavaScript 什么是类?

发表评论

提供最优质的资源集合

立即查看 了解详情