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