js中的类

基础知识

class在js中是构造函数的语法糖，其底层设计模式依然为原型和继承

声明定义

可以使用类声明和赋值表达式定义类，推荐使用类声明来定义类

//类声明
class User {
}
console.log(new Article());
let Article = class {
};
console.log(new User());

类方法间不需要逗号

class User {
  show() {}
  get() {
    console.log("get method");
  }
}
const hd = new User();
hd.get();

类方法是直接写到原型上的，如在User类中写类方法show()相当于User.prototype.show = function(){}

构造函数

使用 constructor 构造函数传递参数，下例中show为构造函数方法，getName为原型方法

constructor 会在 new 时自动执行

下面的User类，实例化的user对象的属性是name和age，在他的原型上，也就是User.prototype中有getName方法

class User{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  getName(){
    console.log(`名字是${this.name},年龄是${this.age}`);
  }
}
let user = new User('kevin', 20);
user.getName();//名字是kevin,年龄是20
console.log(user);

构造函数用于传递对象的初始参数，但不是必须定义的。

子构造器中调用完super 后才可以使用 this。
如果需要调用父类构造方法，必须写 constructor，因为 super 方法只能写在 constructor 里面。
如果你不写 constructor，那么代码执行上会给你增加一个默认的 constructor。

关于最后一条，默认构造函数，基类默认的 constructor 是：

constructor() {} // 就是啥都不干

派生类默认的 constructor 是：

constructor(...args) {
  super(...args) // 用派生类实例的参数调用下基类构造函数
}

可以说，如果你的类不需要特殊处理参数（与默认的构造函数一致），那么可以省略 constructor

原理分析

类其实是函数，class实际上就是构造函数的语法糖。

class User {
}
console.log(typeof User); //function

属性定义

每次new对象都是独立的属性。

class User{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  getName(){
    console.log(`名字是${this.name},年龄是${this.age}`);
  }
}
new User('kk', 22).getName();//名字是kk,年龄是22
new User('jj', 20).getName();//名字是jj,年龄是20

函数差异

class 是使用函数声明类的语法糖，但也有些区别

class 中定义的方法（放在类的实例对象的原型上），不能被遍历。

可以看到定义的方法的特征中的enumerable属性为false。

class User{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  getName(){
    console.log(`名字是${this.name},年龄是${this.age}`);
  }
}
console.log(
  JSON.stringify(
    Object.getOwnPropertyDescriptor(User.prototype, 'getName'),
    null,
    2
  )
);
// {
// "writable": true,
// "enumerable": false,
// "configurable": true
// }
let user = new User('kevin', 20);
for (const key in user) {
  console.log(key);//换行输出name age 没有getName方法，因为特征为不能遍历
}

严格模式

class 默认使用strict 严格模式执行

class User {
  constructor(name) {
    this.name = name;
  }
  show() {
    function test() {
      //严格模式下输出 undefined
      console.log(this);
    }
    test();
  }
}
let xj = new User("kk");
xj.show();//undefined

静态访问

静态属性

静态属性即为类设置属性，而不是为生成的对象设置，下面是原理实现

function User() {}
User.site = "dd";
console.dir(User);

const hd = new User();
console.log(hd.site); //undefiend
console.log(User.site); //dd
console.log(hd);

在 class 中为属性添加 static 关键字即声明为静态属性

可以把为所有对象使用的值定义为静态属性

class Request{
  static Host = 'localhost';
  requestApi(api){
    return `${api}-${Request.Host}`
  }
}
let request  = new Request();
console.log(request.requestApi('www.baidu.com/'));//www.baidu.com/-localhost

静态方法

指通过类访问不能使用对象访问的方法，比如系统的Math.round()就是静态方法

一般来讲方法不需要对象属性参与计算就可以定义为静态方法

下面是静态方法实现原理

function User() {
  this.show = function() {
    return "this is a object function";
  };
}
User.show = function() {
  return "welcome to houdunren";
};
const xj = new User();
console.dir(xj.show()); //this is a object function
console.dir(User.show()); //welcome to houdunren

在 class 内声明的方法前使用 static 定义的方法即是静态方法

class Request{
  static Host = 'localhost';
  static requestApi(api){
    return `${api}-${Request.Host}`
  }
}
console.log(Request.requestApi('www.baidu.com/'));//www.baidu.com/-localhost

下面使用静态方法在课程类中的使用

const data = [
  {name: 'js',click: 55, price: 77},
  {name: 'ts',click: 35, price: 127},
  {name: 'node',click: 45, price: 88},
];
class Lesson{
  constructor(data){
    this.model = data;
  }
  get price(){
    return this.model.price;
  }
  static totalPrice(data){//获取总价
    return data.reduce((t,c) => {
      return t + c.price
    }, 0);
  }
  static maxPrice(data){//获取最大价格
    return Math.max(...data.map(item => item.price));
  }
}
console.log(Lesson.totalPrice(data));//292
console.log(Lesson.maxPrice(data));//127

访问器

使用访问器可以对对象的属性进行访问控制，下面是使用访问器对私有属性进行管理。

语法介绍

使用访问器可以管控属性，有效的防止属性随意修改
访问器就是在函数前加上 get/set修饰，操作属性时不需要加函数的扩号，直接用函数名

class User{
  constructor(name){
    this.data = {name};
  }
  get name(){
    return this.data.name;
  }
  set name(value){
    if(value.trim === '') throw new Error('名字错误');
    this.data.name = value;
  }
}
let user = new User('kevin');
console.log(user.name);//kevin
user.name = 'tom'
console.log(user.name);//tom

访问控制

设置对象的私有属性有多种方式，包括后面章节介绍的模块封装。

public

public 指不受保护的属性，在类的内部与外部都可以访问到

protected

protected是受保护的属性修释，不允许外部直接操作，但可以继承后在类内部访问，有以下几种方式定义

命名保护

将属性定义为以 _ 开始，来告诉使用者这是一个私有属性，请不要在外部使用。

外部修改私有属性时可以使用访问器 setter 操作
但这只是提示，就像吸烟时烟盒上的吸烟有害健康，但还是可以抽的

Symbol

下面使用 Symbol定义私有访问属性，即在外部通过查看对象结构无法获取的属性

const protecteds = Symbol();
class Common {
  constructor() {
    this[protecteds] = {};
    this[protecteds].host = "https://baidu.com";
  }
  set host(url) {
    if (!/^https?:/i.test(url)) {
      throw new Error("错误");
    }
    this[protecteds].host = url;
  }
  get host() {
    return this[protecteds].host;
  }
}
class User extends Common {
  constructor(name) {
    super();
    this[protecteds].name = name;
  }
  get name() {
    return this[protecteds].name;
  }
}
let hd = new User("dd");
hd.host = "https://www.gg.com";
console.log(hd.name);//dd

WeakMap

WeakMap 是一组键/值对的集，也可以利用WeakMap类型特性定义私有属性

private

private 指私有属性，只在当前类可以访问到（只能在声明私有属性的类的函数体中使用），并且不允许继承使用

为属性或方法名前加 # 为声明为私有属性
私有属性只能在声明的类中使用

下面声明私有属性 #host 与私有方法 check 用于检测用户名

class User{
  //private
  #host = 'www.baidu.com';
  constructor(name){
    this.name = name;
  }
  #check = ()=>{
    return `private func`;
  }
  func(){
    return `${this.#host} && ${this.#check()}`;
  }
}
class Admin extends User{
  constructor(age){
    super();
    this.age = age;
  }
}
let user = new User('kevin');
console.log(user);//User {name: 'kevin', #host: 'www.baidu.com', #check: ƒ}
console.log(user.func());//www.baidu.com && private func

详解继承

在构造函数中实现继承

属性继承

属性继承的原型如下

function User(name) {
  this.name = name;
}
function Admin(name) {
  User.call(this, name); 
}
let hd = new Admin("dd");
console.log(hd);//Admin {name: 'dd'}

方法继承

调用父类方法时传递this。

let user = {
  name: "user",
  show() {
    return this.name;
  }
};
let admin = {
  __proto__: user,
  name: "admin",
  show() {
    return this.__proto__.show.call(this);
  }
};
console.log(admin.show());

但如果是多层继承时，会出现新的问题

因为始终传递的是当前对象this ，造成从 this 原型循环调用

let common = {
  show() {
    console.log("common.init");
  }
};
let user = {
  __proto__: common,
  name: "user",
  show() {
    return this.__proto__.show.call(this);
  }
};
let admin = {
  __proto__: user,
  name: "admin",
  get() {
    return this.__proto__.show.call(this);
  }
};
console.log(admin.get());

为了解决以上问题 js 提供了 super 关键字

使用 super 调用时，在所有继承中 this 始终为调用对象
super 是用来查找当前对象的原型，而不像上面使用 this 查找原型造成死循环
也就是说把查询原型方法的事情交给了 super，this 只是单纯的调用对象在各个继承中使用

super的使用

为什么super要在this前调用：因为当前类属性的优先级是要大于父类的，如果有重名属性，super放在后面就会把当前类的属性覆盖掉，所以编译器就直接规定要把super写在前面

在使用extends关键字继承后，在constructor中使用this关键字之前必须先使用super来继承属性，不然会报错。括号里面的值为想要继承的属性（当然也可以为空），在构造函数中也需要设置相应的形参，不然继承的类在new对象时不能传递相应的参数。

在继承方法时，也要使用super关键字。具体方式为super.func()func为想要继承的方法名。

class User{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  show(){
    return `show User`;
  }
}
class Admin extends User{
  constructor(title,...args){
    super(...args);
    this.title = title;
  }
  gg(){
    return super.show();
  }
}
let admin = new Admin('js','kevin',20);
console.log(admin);
console.log(admin.gg());//show User

super 只能在类或对象的方法中使用，而不能在函数中使用

方法的重写

在子类中声明与父类同名的方法，这样使用子类的实例对象调用方法时就会用子类的方法，而不是父类（覆盖掉了）

在父类的基础上进行调整或扩展其功能，可以使用super关键字

class User{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  show(){
    return `show User`;
  }
}
class Admin extends User{
  constructor(title,...args){
    super(...args);
    this.title = title;
  }
  show(){
    return `${super.show()}变成Admin`;
  }
}
let admin = new Admin('js','kevin',20);
console.log(admin);
console.log(admin.show());//show User变成Admin

instanceOf 和 isPrototypeOf

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

object instanceof constructor

参数

object
某个实例对象
constructor
某个构造函数

isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。

prototypeObj.isPrototypeOf(object)

参数

object
在该对象的原型链上搜寻

class User{}
class Admin extends User{}
let admin = new Admin();
console.log(admin instanceof User);//true
console.log(User.prototype.isPrototypeOf(admin));//true

继承内置类

我们可以声明一个继承于内置类的类，可以在这个类上添加功能

class Arr extends Array{
  add(value){
    this.push(value);
  }
  remove(value){
    let removeIndex = this.findIndex(item => item !== value);
    this.splice(removeIndex,1);
  }
}
let arr = new Arr(1,2,3,4,5);
arr.add(6);
console.log(arr);//Arr(6) [1, 2, 3, 4, 5, 6]
arr.remove(5)
console.log(arr);//Arr(5) [2, 3, 4, 5, 6]

mixin

JS不能实现多继承，如果要使用多个类的方法时可以使用mixin混合模式来完成。

mixin 类是一个包含许多供其它类使用的方法的类
mixin 类不用来继承做为其它类的父类

我们可以通过Object.assign()方法来将需要的对象的方法复制到需要的类中，进而模仿多继承

let ss = {
  show(){
    console.log('showshow');
  }
};
let gg = {
  gege(){
    console.log('gg');
  }
}
class User{}
Object.assign(User.prototype, ss);
Object.assign(User.prototype, gg);
let user = new User();
user.show();//showshow
user.gege();//gg

JavaScript中的类

js中的类

基础知识

声明定义

构造函数

原理分析

属性定义

函数差异

严格模式

静态访问

静态属性

静态方法

访问器

语法介绍

访问控制

public

protected

命名保护

Symbol

WeakMap

private

详解继承

在构造函数中实现继承

属性继承

方法继承

super的使用

方法的重写

instanceOf 和 isPrototypeOf

继承内置类

mixin

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript中的类

js中的类

基础知识

声明定义

构造函数

原理分析

属性定义

函数差异

严格模式

静态访问

静态属性

静态方法

访问器

语法介绍

访问控制

public

protected

命名保护

Symbol

WeakMap

private

详解继承

在构造函数中实现继承

属性继承

方法继承

super的使用

方法的重写

instanceOf 和 isPrototypeOf

继承内置类

mixin

热门文章

最新文章

相关课程

相关电子书

相关实验场景