js中类的简单实现和理解

介绍

js中没有类的概念，只有对象。js是基于原型的面向对象的语言，通过共享原型的的属性给新对象（类似于java语言中的继承）

1.es5创建类

• 通过创建构造函数实现类的功能（构造函数一般首字母大写）

{
    // 构造函数一般首字母大写
    function User(id,name){
        this.id=id,
        this.name=name
    }

    // 一般在原型上写方法
    User.prototype.say = function(){
        console.log("Hello,world");
    }

    const user = new User("0001","dage");
    user.say(); // Hello,world
    console.log(`name:${user.name},id:${user.id}`); // name:dage,id:0001
    // 重写方法，进行覆盖
    user.say=function(){
        console.log(`my name is ${this.name}`);
    }
    user.say(); // my name is dage
}

• new的作用
  • 创建一个空的对象
  • 将this指针指向新创建的对象
  • 调用构造函数的方法进行属性的共享（新对象共享原型的属性）
  • 返回新创建的对象

2.es6创建类

• 构造类

{
  // es6创建类
  class User {
    // 构造函数
    constructor(id, name) {
      this.id = id;
      this.name = name;
    }
    say() {
      console.log("Hello World");
    }
  }

  const user = new User("0001", "Jack");
  console.log(user); // User {id: '0001', name: 'Jack'}
  user.say(); // Hello World
}

• 类的继承

{
  // 类的继承
  class User {
    // 构造函数
    constructor(name = "Jack") {
      this.id = "";
      this.name = name;
    }
    say() {
      console.log("Hello World");
    }
  }
  // admin继承
  class Admin extends User {
  }

  const admin = new Admin();
  console.log(admin);  // Admin {id: '001', name: 'Jack'}
}

• 子类向父类传递参数
  -super 只能放在子类构造函数的最前面

{
  // 类的继承
  class User {
    // 构造函数
    constructor(name = "Jack") {
      this.id = "001";
      this.name = name;
    }
    say() {
      console.log("Hello World");
    }
  }

  // admin继承
  class Admin extends User {
    constructor(name = "admin") {
      // 修改父类属性值
      super(name);
      this.name = name;
    }
  }

  const admin = new Admin();

  console.log(admin); // Admin {id: '001', name: 'admin'}
}

• 自定义get/set操作（类似于属性）

{
  // 类的继承
  class User {
    // 构造函数
    constructor(name = "Jack") {
      this.id = "001";
      this.name = name;
    }
    say() {
      console.log("Hello World");
    }
  }

  class Admin extends User {
    constructor(name = "Admin") {
      super(name);
      this.name = name;
    }

    // 静态属性
    get dealName() {
      return this.name.substring(0, 2) + "***";
    }

    set dealName(value) {
      this.name = value;
    }
  }

  const admin = new Admin();
  console.log(admin.dealName); // Ad***
  admin.dealName = "admin";
  console.log(admin.dealname); // ad***
}

• 定义静态属性

{
  // 定义静态属性，调用es7的语法
  // 下载插件进行转码  npm install babel-preset-es2017
  class User {
    // 构造函数
    // es7 定义静态变量
    static age = 18;
    constructor(name = "Jack") {
      this.id = "001";
      this.name = name;
    }
    static say(obj) {
      console.log(`Hello World,name`, obj.name);
    }
  }
  // es 定义静态属性语法
  User.sex = "Man";
  console.log(User.age, User.sex); // 18 'Man'
}

• 定义静态方法
  • 只能通过类调用

{
  // 定义静态方法
  // 类的继承
  class User {
    // 构造函数
    constructor(name = "Jack") {
      this.id = "001";
      this.name = name;
    }
    static say(obj) {
      console.log(`Hello World,name`,obj.name);
    }

  }

  const user = new User("Admin");
  // 只能通过类进行调用，类似java的静态方法
  User.say(user); // Hello World,name Admin
}