手机模板网站生成制作软件,网站后台管理系统怎么添加框,自建站什么意思,六安网站线上引流多少钱JavaScript 是一个基于原型的语言——一个对象的行为取决于它自身的属性及其原型的属性。 在 JavaScript 中#xff0c;类可以看作是已有的原型继承机制的一种抽象——所有语法都可以转换为原型继承。类本身也是不过是 JavaScript 里一种普通的值#xff0c;它们有其自己的原…JavaScript 是一个基于原型的语言——一个对象的行为取决于它自身的属性及其原型的属性。 在 JavaScript 中类可以看作是已有的原型继承机制的一种抽象——所有语法都可以转换为原型继承。类本身也是不过是 JavaScript 里一种普通的值它们有其自己的原型链。事实上大多数 JavaScript 纯函数都可用作构造函数——你可以用 new 运算符来调用一个构造函数以创建出一个新的对象。 类的概述 如果你已经有动手实践过 JavaScript 的经历或是阅读指南一路过来你可能已经用过类了即便你还没有自己创建过。例如你可能会对这个很熟悉 const bigDay new Date(2019, 6, 19); console.log(bigDay.toLocaleDateString()); if (bigDay.getTime() Date.now()) {console.log(Once upon a time...); }在第一行我们创建了一个 Date 类的实例并将其命名为 bigDay。在第二行我们在 bigDay 实例上调用了 toLocaleDateString() 方法并返回了一个字符串。接下来我们对比了两个数字一个来自于方法 getTime() 的返回值另个一来自于对 Date 类本身的直接调用本例为 Date.now()。 Date 是一个 JavaScript 的内建类。 从这个例子中我们可以得到一些关于类的基本概念 类通过 new 运算符创建对象。每个对象都有一些属性数据或方法这些属性是由类添加的。类本身也有一些属性数据或方法这些属性通常用于与实例进行交互。 这些对应于类的三个关键特征 构造函数实例方法和实例字段静态方法和静态字段。 声明一个类 类通常通过类声明来创建。 class MyClass {// 类体... }在类体内有若干特性可用。 class MyClass {// 构造函数constructor() {// 构造函数体}// 实例字段myField foo;// 实例方法myMethod() {// myMethod 体}// 静态字段static myStaticField bar;// 静态方法static myStaticMethod() {// myStaticMethod 体}// 静态块static {// 静态初始化代码}// 字段、方法、静态字段、静态方法、静态块都可以使用私有形式#myPrivateField bar; }如果你用过早于 ES6 的版本你可能更熟悉使用函数作为构造函数。上面的模式大致可以转换为以下函数构造器 function MyClass() {this.myField foo;// 构造函数体 } MyClass.myStaticField bar; MyClass.myStaticMethod function () {// myStaticMethod 体 }; MyClass.prototype.myMethod function () {// myMethod 体 };(function () {// 静态初始化代码 })();构造一个类 在声明一个类之后你可以使用 new 运算符来创建它的实例。 const myInstance new MyClass(); console.log(myInstance.myField); // foo myInstance.myMethod();典型函数构造器可以使用 new 来构造也可以不使用 new 来调用。然而对于类的调用则必须使用 new否则会导致错误。 const myInstance MyClass(); // TypeError: Class constructor MyClass cannot be invoked without new构造函数 类最重要的工作之一就是作为对象的“工厂”。在类中实例的创建是通过构造函数来完成的。 例如我们创建一个名为 Color 的类它代表了一个特定的颜色。用户通过传入一个 RGB (en-US) 三元组来创建颜色。 class Color {constructor(r, g, b) {// 将 RGB 值作为 this 的属性this.values [r, g, b];} }打开你的浏览器的开发者工具将上面的代码粘贴到控制台中然后创建一个实例 const red new Color(255, 0, 0); console.log(red);你应该会看到如下输出 Object { values: (3) […] }values: Array(3) [ 255, 0, 0 ] 你已经成功创建了一个 Color 实例该实例有一个 values 属性它是一个包含了你传入的 RGB 值的数组。这与下面的代码几乎是等价的 function createColor(r, g, b) {return {values: [r, g, b],}; }每一次调用 new 都将创建一个新的实例。 const red new Color(255, 0, 0); const anotherRed new Color(255, 0, 0); console.log(red anotherRed); // false在类的构造函数里this 的值指向新创建的实例。你可以赋予它新的属性或者读取已有的属性尤其是方法——我们将在下一节中介绍。 this 的值将自动作为 new 的结果返回。不建议从构造函数中返回任何值——因为如果你返回一个非原始类型的值它将成为 new 表达式的值而 this 的值将被丢弃。你可以在 new 运算符的描述中关于 new 的内容。 class MyClass {constructor() {this.myField foo;return {};} }console.log(new MyClass().myField); // undefined实例方法 如果一个类只有构造函数那么它与一个只创建普通对象的 createX 工厂函数并没有太大的区别。然而类的强大之处在于它们可以作为“模板”自动将方法分配给实例。 例如对于 Date 实例你可以用一系列方法来获取日期的不同部分例如年份、月份、星期几等等。你也可以通过 setX 方法来设置这些值例如 setFullYear。 对于我们的 Color 类我们可以添加一个方法来获取红色值 class Color {constructor(r, g, b) {this.values [r, g, b];}getRed() {return this.values[0];} }const red new Color(255, 0, 0); console.log(red.getRed()); // 255如果你使用方法它将在所有实例之间共享。一个函数可以在所有实例之间共享且在不同实例调用时其行为也不同因为 this 的值不同。你也许好奇这个方法存储在哪里——它被定义在所有实例的原型上即 Color.prototype详情参阅继承与原型链。 相似的我们也可以添加一个 setRed 方法来设置红色值 class Color {constructor(r, g, b) {this.values [r, g, b];}getRed() {return this.values[0];}setRed(value) {this.values[0] value;} }const red new Color(255, 0, 0); red.setRed(0); console.log(red.getRed()); // 0; 此时也即黑色私有字段 你或许会好奇为什么我们要费心使用 getRed 和 setRed 方法而不是直接访问实例上的 values 数组呢 class Color {constructor(r, g, b) {this.values [r, g, b];} }const red new Color(255, 0, 0); red.values[0] 0; console.log(red.values[0]); // 0在面向对象编程中有一个叫做“封装”的哲学。这是说你不应该访问对象的底层实现而是使用抽象方法来与之交互。例如如果我们突然决定将颜色表示为 HSL 而不是 RGB class Color {constructor(r, g, b) {// values 现在是一个 HSL 数组this.values rgbToHSL([r, g, b]);}getRed() {return this.values[0];}setRed(value) {this.values[0] value;} }const red new Color(255, 0, 0); console.log(red.values[0]); // 0; 不再是 255因为 HSL 模型下纯红色的 H 分量为 0用户对 values 数组代表 RGB 值的假设不再成立这可能会打破他们的代码逻辑。因此如果你是一个类的实现者你应该隐藏实例的内部数据结构以保持 API 的简洁性并防止在你做了一些“无害的重构”时用户代码不至于崩溃。在类中这是通过私有字段来实现的。 私有字段是以 #井号开头的标识符。井号是这个字段名的必要部分这也就意味着私有字段永远不会与公共属性发生命名冲突。为了在类中的任何地方引用一个私有字段你必须在类体中声明它你不能在类体外部创建私有字段。除此之外私有字段与普通属性几乎是等价的。 class Color {// 声明每个 Color 实例都有一个名为 #values 的私有字段。#values;constructor(r, g, b) {this.#values [r, g, b];}getRed() {return this.#values[0];}setRed(value) {this.#values[0] value;} }const red new Color(255, 0, 0); console.log(red.getRed()); // 255在我们将 values 字段私有化之后我们可以在 getRed 和 setRed 方法中添加一些逻辑而不仅仅是简单信息传递。例如我们可以在 setRed 中添加一个检查逻辑以确保它是一个有效的 R 值 class Color {#values;constructor(r, g, b) {this.#values [r, g, b];}getRed() {return this.#values[0];}setRed(value) {if (value 0 || value 255) {throw new RangeError(无效的 R 值);}this.#values[0] value;} }const red new Color(255, 0, 0); red.setRed(1000); // RangeError无效的 R 值如果我们暴露 values 属性我们的用户就会很容易地绕过这个检查直接给 values[0] 赋值从而创建一个无效的颜色。但是通过良好封装的 API我们可以使我们的代码更加健壮防止下游的逻辑错误。 类方法可以读取其他实例的私有字段只要它们属于同一个类即可。 class Color {#values;constructor(r, g, b) {this.#values [r, g, b];}redDifference(anotherColor) {// #values 不一定要从 this 访问// 你也可以访问属于同一个类的其他实例的私有字段。return this.#values[0] - anotherColor.#values[0];} }const red new Color(255, 0, 0); const crimson new Color(220, 20, 60); red.redDifference(crimson); // 35然而若 anotherColor 并非一个 Color 实例#values 将不存在即使另一个类有一个同名的私有字段它也不是同一个东西也不能在这里访问。访问一个不存在的私有字段会抛出错误而不是像普通属性一样返回 undefined。如果你不知道一个对象上是否存在一个私有字段且你希望在不使用 try/catch 来处理错误的情况下访问它你可以使用 in 运算符。 class Color {#values;constructor(r, g, b) {this.#values [r, g, b];}redDifference(anotherColor) {if (!(#values in anotherColor)) {throw new TypeError(Color instance expected);}return this.#values[0] - anotherColor.#values[0];} }备注 请记住# 是一种特殊的标识符语法你不能像字符串一样使用该字段名。#values in anotherColor 会查找一个名为 #values 的属性而不是一个私有字段。 方法、getter 与 setter 也可以是私有的。当你需要类内部做一些复杂的事情但是不希望代码的其他部分调用时它们就很有用。 getter字段 color.getRed() 和 color.setRed() 允许我们读取和写入颜色的红色值。如果你熟悉像 Java 这样的语言你会对这种模式非常熟悉。然而在 JavaScript 中使用方法来简单地访问属性仍然有些不便。getter 字段允许我们像访问“实际属性”一样操作某些东西。 class Color {constructor(r, g, b) {this.values [r, g, b];}get red() {return this.values[0];}set red(value) {this.values[0] value;} }const red new Color(255, 0, 0); red.red 0; console.log(red.red); // 0这就像是对象有了一个 red 属性——但实际上实例上并没有这样的属性实例只有两个方法分别以 get 和 set 为前缀而这使得我们可以像操作属性一样操作它们。 解释一下 在JavaScript类中我们可以定义getter和setter方法来控制对象属性的读取和设置。在这个例子中red 是 Color 类的一个实例对象它具有一个名为 red 的属性。 当我们使用赋值操作符来给对象的属性赋值时实际上会调用属性的 setter 方法。在这里red.red 0 这行代码执行了 red 对象的 red 属性的 setter 方法将红色分量值设置为 0。 因此在这个例子中赋值操作 red.red 0 调用的是 red 对象的 red 属性的 setter 方法而不是直接修改属性值或数组。 如果一个字段仅有一个 getter 而没有 setter它将是只读的。 class Color {constructor(r, g, b) {this.values [r, g, b];}get red() {return this.values[0];} }const red new Color(255, 0, 0); red.red 0; console.log(red.red); // 255公共字段 我们已经见过了私有字段对应地还有公共字段。公共字段使得实例可以获得属性且它们常常独立于构造函数的参数。 class MyClass {luckyNumber Math.random(); } console.log(new MyClass().luckyNumber); // 0.5 console.log(new MyClass().luckyNumber); // 0.3公共字段几乎等价于将一个属性赋值给 this。例如上面的例子也可以转换为 class MyClass {constructor() {this.luckyNumber Math.random();} }静态属性 在上面的 Date 例子中我们还遇到了 Date.now() 方法它返回当前日期。这个方法不属于任何日期实例——它属于类本身。 静态属性是一组在类本身上定义的特性而不是在类的实例上定义的特性。这些特性包括 静态方法静态字段静态 getter 与 setter 可见我们之前见过的所有类的特性都有其静态版本。例如对于我们的 Color 类我们可以创建一个静态方法它检查给定的三元组是否是有效的 RGB 值 class Color {static isValid(r, g, b) {return r 0 r 255 g 0 g 255 b 0 b 255;} }Color.isValid(255, 0, 0); // true Color.isValid(1000, 0, 0); // false静态属性与实例属性的区别在于 它们有 static 前缀且它们不能从实例中访问。 console.log(new Color(0, 0, 0).isValid); // undefined有一个特殊结构叫做静态初始化块 (en-US)它是一个在类第一次加载时运行的代码块。 class MyClass {static {MyClass.myStaticProperty foo;} }console.log(MyClass.myStaticProperty); // foo扩展与继承 类的一个关键特性除了私有字段是继承这意味着一个对象可以“借用”另一个对象的大部分行为同时覆盖或增强某些部分的逻辑。 例如假定我们需要为 Color 类引入透明度支持。我们可能会尝试添加一个新的字段来表示它的透明度 class Color {#values;constructor(r, g, b, a 1) {this.#values [r, g, b, a];}get alpha() {return this.#values[3];}set alpha(value) {if (value 0 || value 1) {throw new RangeError(Alpha 值必须在 0 与 1 之间);}this.#values[3] value;} }然而这意味着每个实例——即使是大多数不透明的实例那些 alpha 值为 1 的实例——都必须有额外的 alpha 值这并不是很优雅。此外如果特性继续增长我们的 Color 类将变得非常臃肿且难以维护。 所以在面向对象编程中我们更愿意创建一个派生类。派生类可以访问父类的所有公共属性。在 JavaScript 中派生类是通过 extends 子句声明的它指示它扩展自哪个类。 下面是父类代码 class Color {constructor(r, g, b) {this.values [r, g, b];}get red() {return this.values[0];}set red(value) {this.values[0] value;} }const red new Color(255, 0, 0); red.red 0; console.log(red.red); // 0下面是派生类代码 class ColorWithAlpha extends Color {#alpha;constructor(r, g, b, a) {super(r, g, b);this.#alpha a;}get alpha() {return this.#alpha;}set alpha(value) {if (value 0 || value 1) {throw new RangeError(Alpha 值必须在 0 与 1 之间);}this.#alpha value;} }有一些事情需要注意。首先在构造器中我们调用了 super(r, g, b)。在访问 this 之前必须调用 super()这是 JavaScript 的要求。super() 调用父类的构造函数来初始化 this——这里大致相当于 this new Color(r, g, b)。super() 之前也可以有代码但你不能在 super() 之前访问 this——JavaScript 会阻止你访问未初始化的 this。 在父类完成对 this 的修改后派生类才可以对其进行自己的逻辑。这里我们添加了一个名为 #alpha 的私有字段并提供了一对 getter/setter 来与之交互。 派生类会继承父类的所有方法。例如尽管 ColorWithAlpha 自身并没有声明一个 get red() getter你仍然可以访问 red因为这个行为是由父类指定的 const color new ColorWithAlpha(255, 0, 0, 0.5); console.log(color.red); // 255派生类也可以覆盖父类的方法。例如所有类都隐式继承自 Object 类它定义了一些基本方法例如 toString()。然而基本的 toString() 方法是出了名的无用方法因为它在大多数情况下打印 [object Object] console.log(red.toString()); // [object Object]所以我们可以覆盖它以便在打印颜色时打印它的 RGB 值 class Color {#values;// …toString() {return this.#values.join(, );} }console.log(new Color(255, 0, 0).toString()); // 255, 0, 0当你用 extends 时静态方法也会继承因此你也可以覆盖或增强它们。 class ColorWithAlpha extends Color {// ...static isValid(r, g, b, a) {// 调用父类的 isValid()并在此基础上增强返回值return super.isValid(r, g, b) a 0 a 1;} }console.log(ColorWithAlpha.isValid(255, 0, 0, -1)); // false为什么用类 本指南到目前为止一直很实用我们专注于如何使用类但有一个问题尚未解答为什么要使用类答案是视情况而定。 类引入了一种范式或者说是一种组织代码的方式。类是面向对象编程的基础而面向对象编程是建立在诸如继承和多态特别是子类型多态等概念之上的。 简而言之你应该在你想要储存一些内部数据、并暴露大量方法的时候考虑使用类。例如这些内置的 JavaScript 类 Map 与 Set 类存储了许多元素你可以通过 get()、set()、has() 等方法访问它们。Date 类以 Unix 时间戳的形式存储日期并允许你格式化、更新与读取单独的日期元素。Error 类存储了特定异常的信息包括错误消息、堆栈跟踪、原因等。它是少数几个拥有丰富继承结构的类之一有多个内置类例如 TypeError 与 ReferenceError继承自 Error。在发生错误时这种继承允许细化错误的语义每个错误类都代表一个特定类型的错误可以很容易地通过 instanceof 进行检查。 JavaScript 提供了以面向对象的方式组织代码的能力但是否并如何使用它完全取决于程序员的判断。 附以上内容均为个人在MDN网站上学习JS的笔记若有侵权将在第一时间删除若有错误将在第一时间修改。