JS构造函数、类

141 阅读2分钟

1、构造函数

1.1 prototype

首先说一下prototype 和 __ proto __ ,前者是构造函数的属性,后者是对象的属性,但是构造函数也是对象

每一个函数都有 prototype 属性,每个 prototype 都有 constructor 属性,每个函数的prototype 的constructor都等于函数自身。(示例如下)

function f1(){}
f1.prototype.constructor === f1
// 返回 true

原型公式:对象.__ proto__ === 其构造函数.prototype

注意

  • Object.prototype 没有构造函数,原型就是它自己;Object.prototype.__ proto__=== null,这点也是不履行原型公式。
  • window 是 window构造的;
  • window.Object 是window.Function 构造的,因为所有函数都是 window.Function 构造的;
  • window.Function 也是由 window.Function 构造的,是浏览器指定的。

1.2 new 操作符

示例代码:

let squareList = [];
let widthList = [1, 2, 3, 4, 5];
function Square(width) {
  this.width = width;
}
Square.prototype.getArea = function () {
  return this.width * this.width;
};
for (let i = 0; i < 5; i++) {
  squareList[i] = new Square(widthList[i]); //new操作符
  console.log(squareList[i].getArea()); //打印出了面积
}

new X()自动做了以下4件事情:

  • 自动创建空对象;
  • 为创建的空对象自动关联原型,原型地址为 X.prototype(即对象.__ proto__ === 其构造函数.prototype);
  • 自动将空对象作为this关键字运行构造函数;
  • 自动 return this 。 而构造函数 X:
  • X函数本身负责给对象本身添加属性;
  • X.prototype 对象负责保存对象的共用属性。

2、class 类

首先区分类型和,类型是JS数据的分类;类是针对对象的分类,有无数种,常见的有Array、Function、Date等。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
let p = new Rectangle() //类声明

注意:函数声明和类声明之间的一个重要区别在于, 函数声明会提升,类声明不会。你需要先声明你的类,然后才能访问它,否则代码将抛出ReferenceError。

2.1 constructor

构造函数 constructor 方法是一个特殊的方法,这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法。如果类包含多个constructor的方法,则将抛出 一个SyntaxError 。

一个构造函数可以使用 super 关键字来调用一个父类的构造函数

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea()
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);
console.log(square.area);
// 100

2.2 static静态方法

静态方法 static 关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类,但不能通过一个类实例调用静态方法。

当调用静态或原型方法时没有指定 this 的值,那么方法内的 this 值将被置为 undefined。

class ClassWithStaticMethod {
  static staticProperty = 'someValue';
}
console.log(ClassWithStaticMethod.staticProperty);
// output: "someValue"

2.3 extends继承类

extends 可以使继承父类来创造一个子类,其中需要super关键字用于调用父类上的构造函数函数。

注意:如果没有需要调用的也要写上 super(); 否则会报错。并且不能使用 delete 和super 来删除父类的属性。

参考文档:类——MDN