JavaScript 类

发布时间:2024年01月22日

类是一个面向对象的编程概念,在 JavaScript 中它类似于函数。类只是添加到 ES6 中的一个特殊函数。但是,它们通过为其分配属性来为您提供更多的功能和灵活性。

class MyClass {
   …
}

构造 函数

表示类的特殊方法。它用于创建和初始化使用类创建的对象。

class MyClass {
    constructor() {
        this.myName = 'Sandy';
    }
}

let myClass = new MyClass();
console.log(myClass.myName);     // Sandy

构造函数还可以具有参数,用于在实例化时表示具有默认值的类。

class MyClass {
    constructor(name) {
        this.myName = name;
    }
}
let myClass = new MyClass('Tanu');
console.log(myClass.myName);     // Tanu

注意:您可以选择不为类声明构造函数。每个类声明都有一个默认构造函数

class MyClass {
    …
}

MyClass 类具有默认构造函数,如下所示。

constructor() {

}

Getter 和 Setter

AKA 访问器方法,用于计算类的属性值。这些方法基本上分别以关键字和为前缀。

class MyClass {
    constructor() {
        this.myName = 'Sandy';
    }
    get name() {
        return this.myName;
    }
    set name(newName) {
        this.myName = newName;
    }
}

let myClass = new MyClass();
console.log(myClass.name);     // Sandy
myClass.name = 'Tanu';
console.log(myClass.name);     // Tanu

你注意到了吗?这些方法可以在不使用括号的情况下调用,就像普通函数调用一样,这是因为在函数名称之前使用了 get 和 set 关键字。

班级吊装

提升是一种 JavaScript 机制,在代码执行之前,变量和函数声明会移动到其作用域的顶部。类声明不像 JavaScript 变量和函数那样被提升。让我们借助下面的示例来理解这一点。

JS中的功能提升:

getMyName();    // Sandy
function getMyName() {
    console.log('Sandy');
} 

如果您已经注意到,该函数在声明之前被调用。这不会因为 JavaScript 提升而给您带来错误。但是,如果您无法对 JavaScript 类做同样的事情。让我们看看下面的例子。

?JS中的班级吊装:

new MyClass();     // ReferenceError
class MyClass { … }

由于 JavaScript 函数被提升,因此即使类在函数中实例化,也不会被提升。

function myFunction() {
    new MyClass();     // ReferenceError
}

myFunction();     // ReferenceError
class MyClass {}
myFunction();     // OK

类表达式

与函数一样,类也可以用作表达式。有两种方法可以定义类:类声明和类表达式。到目前为止,我们学到的是一个类声明,现在让我们来探索一下类表达式。

let myClassLiteral = class MyClass {
    name() {
        return 'Hi, I am a Sandy';
    }
}

let myClassInstance = new myClassLiteral();
console.log(myClassInstance.name());     // Hi, I am a Sandy

但是,如果您尝试创建 myClass 的实例,它将为您提供 ReferenceError。

let myClassInstance = new MyClass();     // ReferenceError: MyClass is not defined

因此,与函数表达式一样,类表达式可以是匿名的。

let myClass = class {
    name() {
        return 'Hi, I am a Sandy';
    }
}

let myClassInstance = new myClass();
console.log(myClassInstance.name());     // Hi, I am a Sandy

注意:类表达式中的类名 (MyClass) 无关紧要,除非您尝试在类中使用它。是的,你没听错,我们可以访问其中的类名。

let myClassLiteral = class MyClass {
    name() {
        return MyClass.name;
    }
}

let myClassInstance = new myClassLiteral();
console.log(myClassInstance.name());     // MyClass

子类(派生类)

一个类可以从其他类派生而来,带有 extends 子句。您需要做的就是从派生类中调用基类的构造函数(超级构造函数)。由于基类的构造函数是作为超级构造函数调用的,因此可以使用 super() 调用它。你做对了,super 代表你的基类,因此你不仅可以使用它来调用它的构造函数,还可以访问类的成员。如果不调用 super(),则无法派生类。是的,你没听错,它会给你一个错误。

class ParentClass {
    constructor(name, surname) {
	this.parentName = name;
	this.surname = surname;
    }

    getParentName() {
	return this.parentName + ' ' + this.surname;
    }
}

class ChildClass extends ParentClass {
    constructor(childName, parentName, surname) {
	super(parentName, surname);
	this.childName = childName;
    }

    getChildName() {
	return this.childName + ' ' + super.getParentName();	// Reference line A
    }
}

// Instantiate ChildClass
let child = new ChildClass('Sandip', 'Subhash', 'Salunke');

// Access properties of child and parent class
console.log(child.childName);	// Sandip
console.log(child.parentName);	// Subhash
console.log(child.surname);	// Salunke

// Call member functions of child and parent class
console.log(child.getChildName());	// Sandip Subhash Salunke
console.log(child.getParentName());	// Subhash SalunkeI

请注意,如何使用 super 在上面的引用行 A 处调用基类成员函数。现在你可能会想,同样的事情也可以通过而不是 来完成。确实,我们也可以这样做,因为子类是从父类派生的,它可以直接访问其父类的函数。等等,但是如果子类具有同名的函数怎么办?这里有一个区别,我们必须使用 static 来调用父类的函数。

class ParentClass {
    constructor(name, surname) {
	this.parentName = name;
	this.surname = surname;
    }

    getParentName() {
	return this.parentName + ' ' + this.surname;
    }
}

class ChildClass extends ParentClass {
    constructor(childName, parentName, surname) {
	super(parentName, surname);
	this.childName = childName;
    }

    getParentName() {
	return 'Sombody Salunke';
    }

    getChildName() {
	return this.childName + ' ' + this.getParentName();	// Reference line A
    }
}

let child = new ChildClass('Sandip', 'Subhash', 'Salunke');
console.log(child.getChildName());	// Sandip Sombody Salunke

注意:引用行 A,调用,这是子类的本地函数。因此返回的子名称为”this.getParentName()child.getParentName()Sandip Sombody Salunke“而不是””。尝试更改并再次执行代码。太好了,看来你现在得到了正确的孩子名字。S<em>andip Subhash Salunke</em>this.getParentName()super.getParentName()

子类的原型是超类,这都是因为我们扩展了基类。原型的目的是通过向对象添加更多内容来扩展对象的行为,并在创建的所有实例中访问它们。

Object.getPrototypeOf(ChildClass) === ParentClass;	// true

有趣的是,这仅适用于子类的近亲父级。如果从派生类派生类,则其原型将是超类,而不是超超类。

class GrandChildClass extends ChildClass {
    // ...
}

Object.getPrototypeOf(GrandChildClass) === ChildClass;		// true
Object.getPrototypeOf(GrandChildClass) === ParentClass;		// false

我们可以扩展 JavaScript 的内置类,但不建议这样做。通常最好创建自己的类来控制其接口。

class Stack extends Array {
    get topElement() {
        return this[this.length - 1];
    }
}

var stack = new Stack();
stack.push('world');
stack.push('hello');
console.log(stack.topElement); 	// hello
console.log(stack.length); 	// 2

Class 是 ECMAScript 标准,在 ES6 中添加。本教程中演示的大多数概念都是?ES6 功能,如 super、constructor、getter 和 setter、计算方法和属性名称等。

如果你觉得文章还不错,请大家 点赞、分享、留言 下,因为这将是我持续输出更多优质文章的最强动力!?

文章来源:https://blog.csdn.net/qq_57401254/article/details/135707618
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。