html中查看类在哪儿,了解JavaScript中的类

javascript是一种基于原型的语言，javascript中的每个对象都有一个名为[[原型]]的隐藏内部属性，可用于扩展对象属性和方法。

直到最近，勤奋的开发人员使用构造函数来模仿JavaScript中面向对象的设计模式。语言规范ECMAScript 2015(通常称为ES6)引入了JavaScript语言的类。JavaScript中的类实际上并没有提供额外的功能，并且通常被描述为提供原型和继承的“语法糖”，因为它们提供了更清晰，更优雅的语法。由于其他编程语言使用类，因此JavaScript中的类语法使开发人员在语言之间移动变得更加直接。

类是函数：

JavaScript类是一种函数。使用class关键字声明类。我们将使用函数表达式语法初始化函数和类表达式语法来初始化类。// Initializing a function with a function expression

const x = function() {}// Initializing a class with a class expression

const y = class {}

我们可以使用object.getprototypeof()方法访问对象的[[原型]]。让我们用它来测试我们创建的空函数。Object.getPrototypeOf(x);Output

ƒ () { [native code] }

我们也可以在刚刚创建的类上使用该方法。Object.getPrototypeOf(y);Output

ƒ () { [native code] }

用函数和类声明的代码都返回函数[[原型]]。使用原型，任何函数都可以使用new关键字成为构造函数实例。const x = function() {}

// Initialize a constructor from a functionconst

constructorFromFunction = new x();

console.log(constructorFromFunction);Output

x {}

constructor: ƒ ()

这也适用于类。const y = class {}

// Initialize a constructor from a class

const constructorFromClass = new y();

console.log(constructorFromClass);Output

y {}

constructor: class

这些原型构造函数示例在其他方面是空的，但是我们可以看到在语法的下面，这两个方法是如何实现相同的最终结果的。

定义一个类

一个构造函数函数是用一些参数初始化的，这些参数将被指定为该函数的属性，并引用该函数本身。按照惯例，标识符的第一个字母将大写。

constructor.js// Initializing a constructor

functionfunction Hero(name, level) {

this.name = name;

this.level = level;

}

当我们将其转换为类语法时，如下所示，我们看到它的结构非常相似。

class.js// Initializing a class definition

class Hero {

constructor(name, level) {

this.name = name;

this.level = level;

}}

我们知道构造器函数通过初始化器的第一个字母大写(可选)和熟悉语法来表示对象蓝图。class关键字以更直接的方式传递函数的目标。

初始化语法的唯一区别是使用class关键字而不是函数，并在constructor()方法中分配属性。

定义方法

构造函数函数的常见做法是将方法直接分配给原型，而不是在初始化过程中，如下面的greet()方法所示。

constructor.jsfunction Hero(name, level) {

this.name = name;

this.level = level;

}// Adding a method to the constructor

Hero.prototype.greet = function() {

return `${this.name} says hello.`;

}

对于类，这种语法被简化，方法可以直接添加到类中。

class.jsclass Hero {

constructor(name, level) {

this.name = name;

this.level = level;

}

// Adding a method to the constructor

greet() {

return `${this.name} says hello.`;

}

}

让我们看看这些属性和方法的实际应用。我们将使用新关键字创建一个新的英雄实例，并分配一些值。const hero1 = new Hero('Varg', 1);

如果我们用console.log(hero1)打印出更多关于新对象的信息，我们可以看到更多关于类初始化的细节。Output

Hero {name: "Varg", level: 1}

__proto__:

▶ constructor: class Hero

▶ greet: ƒ greet()

我们可以在输出中看到constructor()和greet()函数被应用于hero1的uu proto_uuuu或[[prototype]]，而不是直接作为hero1对象上的方法。虽然这在构造构造函数函数时很明显，但在创建类时并不明显。类允许更简单和简洁的语法，但会在过程中牺牲一些清晰度。

扩展类

构造器函数和类的一个优点是，它们可以基于父对象扩展为新的对象蓝图。这可以防止对相似但需要一些额外或更具体功能的对象重复代码。

可以使用call()方法从父级创建新的构造函数函数。在下面的示例中，我们将创建一个更具体的字符类mage，并使用call()将hero的属性分配给它，同时添加一个额外的属性。

constructor.js// Creating a new constructor from the parent

function Mage(name, level, spell) {

// Chain constructor with call

Hero.call(this, name, level);

this.spell = spell;

}

此时，我们可以创建一个Mage使用相同属性的新实例，Hero以及我们添加的新属性。const hero2 = new Mage('Lejon', 2, 'Magic Missile');

发送hero2到控制台，我们可以看到我们已经Mage根据构造函数创建了一个新的。Output

Mage {name: "Lejon", level: 2, spell: "Magic Missile"}

__proto__:

▶ constructor: ƒ Mage(name, level, spell)

对于ES6类，使用super关键字代替call访问父函数。我们将用于extends引用父类。

class.js// Creating a new class from the parent

class Mage extends Hero {

constructor(name, level, spell) {

// Chain constructor with super

super(name, level);

// Add a new property

this.spell = spell;

}}

现在我们可以以相同的方式创建一个新的Mage实例。const hero2 = new Mage('Lejon', 2, 'Magic Missile');

我们将打印hero2到控制台并查看输出。Output

Mage {name: "Lejon", level: 2, spell: "Magic Missile"}

__proto__: Hero

▶ constructor: class Mage

输出几乎完全相同，除了在类构造中[[Prototype]]链接到父类，在本例中是Hero。

下面是初始化、添加方法以及构造函数函数和类继承的整个过程的并行比较。

constructor.jsfunction Hero(name, level) {

this.name = name;

this.level = level;

}// Adding a method to the constructor

Hero.prototype.greet = function() {

return `${this.name} says hello.`;

}// Creating a new constructor from the parent

function Mage(name, level, spell) {

// Chain constructor with call

Hero.call(this, name, level);

this.spell = spell;

}

class.js// Initializing a class

class Hero {

constructor(name, level) {

this.name = name;

this.level = level;

}

// Adding a method to the constructor

greet() {

return `${this.name} says hello.`;

}

}

// Creating a new class from the parent

class Mage extends Hero {

constructor(name, level, spell) {

// Chain constructor with super

super(name, level);

// Add a new property

this.spell = spell;

}

}

虽然语法完全不同，但两种方法的基本结果几乎相同。 类为我们提供了一种更简洁的方法来创建对象蓝图，构造函数更准确地描述了引擎盖下发生的事情。

结论

在本教程中，我们了解了JavaScript构造函数和ES6类之间的相似点和不同点。类和构造函数都模仿面向对象的继承模型到JavaScript，这是一种基于原型的继承语言。

理解原型继承对于成为有效的JavaScript开发人员至关重要。熟悉类非常有用，因为像React这样的流行JavaScript库经常使用class语法。