JavaScript的Class

haketest lv.1

发布时间：2022-10-31 19:01:34 246

相关标签： # javascript# java# java# 数据

class

JavaScript的传统方法中，是通过定义构造函数来生成新对象的。

function Name(name) {
  this.name = name;
}

Name.prototype.toString = function () {
  return this.name;
}


const newName = new Name("读心");

console.log(newName); // Name { name: '读心' }

这种写法和面向对象语言的写法差异比较大。ES提供了Class类，作为对象的模板，这样在写法上更贴近面向对象编程。

class，用来声明一个类，也可以说是定义一个对象，这个对象可以被继承：

class Form {
    pubilcCount = 10; // 原型属性
    constructor(name,) {
        // 实例属性
        this.name = name;
        this.num = num;
    }

    getInfo() {
        return {
            name: this.name,
            num: this.num
        }
    }
}

const form = new Form("duxin", 90)
console.log(form); // Form { pubilcCount: 10, name: 'duxin', num: 90 }
console.log(form.getInfo()); // {name:'duxin,num:90}

类的数据类型是function，类本身就是指向构造函数的。

console.log(typeof Form); // function
console.log(Form === Form.prototype.constructor); // true

constructor

constructor是类默认的一个方法，在通过new命令生成一新的对象的时候，会自动调用constructor方法。

生成实例的属性要么是定义在自身，要么就是定义在原型上，也就是class上。

this

类的内部如果含有this，那么它默认指向类的实例。
如果在原型对象的属性上声明一个方法，然后单独调用该方法，如下代码：

class Logger {

  printName(name) {
    this.print(name)
  }

  print(text) {
    console.log(text)
  }
}

const logger = new Logger();
const { printName } = logger;

printName("duxin")

这样报错提示print没有找到，因为这时this的指向是该方法执行时所在的环境。

这时需要通过在构造函数中绑定this就好了，

constructor() {
    this.printName = this.printName.bind(this);
  }

另一方法就是通过箭头函数：因为箭头函数没有创建自己的this，但是它会在作用域链上继承this。

constructor() {
    this.printName = (name) => {
      this.print(name)
    }
  }

name

ES6的class，本质上是ES5的构造函数的一层包装，所以构造函数的很多特性都会被Class继承，例如name
console.log(Logger.name); // Logger

继承

当有一个子类要继承该父类时：

class Children extends Form {
    constructor(name, num,) {
        super(name, num);
        this.age = age;
    }
}

const text = new Children('duXin', 90, 12)
console.log(text); // Children { pubilcCount: 10, name: 'duXin', num: 90, age: 12 }

ES6继承的本质，先创造一个父类的实例对象this，然后再用子类的构造函数修改this。所以子类在继承父类的时候，需要调用super方法。

如果子类没有定义构造函数时，会默认添加上。但是这样就没办法对父类实例进行修改了。

class Children extends Form {
    constructor(...args) {
        super(...args);
    }
}

super关键字

super可以有两个用处：

作为函数调用，表示父类的构造函数，ES6的要求在子类中需要执行一次super，否则有时候JavaScript引擎会报错。虽然super表示父类的构造函数，返回的是子类的实例，super内部的this指向的是子类，就像Form.prototype.constructor.call(this)
super作为对象的时候，指向的是父类的原型对象，在静态方法中指向父类，所以定义在父类实例上的属性和方法都不能通过super调用

文章来源： https://blog.51cto.com/u_12344418/5802171

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。