JavaScriptにはクラスがないのでしょうか？

ECMAScript6 仕様が登場する前は、JavaScript にはクラスの概念がなく、コンストラクターを介してクラスをシミュレートし、プロトタイプを介して継承することしか許可されていませんでした。 ECMAScript 6 以降では、class キーワードを使用してクラスを定義できるようになり、class キーワードを使用してクラスを定義する記述方法がより明確になり、よりオブジェクト指向構文に近くなります。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

JavaScript はオブジェクトベースですが、完全にオブジェクト指向のプログラミング言語ではありません。 JS オブジェクト指向プログラミング モデルには、オブジェクトとクラスという 2 つの中心的な概念があります。 ECMAScript6 仕様が登場する前は、JavaScript にはクラスの概念がなく、コンストラクターを介してクラスをシミュレートし、プロトタイプを介して継承することしか許可されていませんでした。

ES6 では、クラスを定義するために class キーワードが追加されました。class キーワードを使用してクラスを定義する方法は、より明確で、よりオブジェクト指向の構文に似ています。ただし、コンストラクターとプロトタイプの概念でもあるため、糖衣構文とみなすことができます。

1 クラス宣言

クラスを定義するには、クラス宣言とクラス式の 2 つの方法があります。

// 类声明
class Student {}
// 类表达式
const Student = class {}

2 なぜそうなるのか前述の構文は Sugar

クラスは実際には関数であるためです。違いは、コンストラクターが関数スコープであり、クラスがブロックレベルのスコープであることです。クラス内のメソッドはすべて上で定義されていますしたがって、記事の冒頭では、これはまだコンストラクターとプロトタイプの概念であると言われています:

class Student {
	take() {}
}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

// 同等于
function Student() {}
Student.prototype.take = function() {}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

3 クラスに含まれるプロパティとメソッド

クラスには、コンストラクター メソッドとインスタンス (メソッド、ゲッター、セッター、および静的クラス メソッド) を含めることができますが、これらは必須ではありません。空のクラス定義は引き続き有効です。

class Student {
	// 实例属性 也可以放在这
	// b = 1
	// 静态属性
	static a = 1
	// 构造函数
	constructor() {
		// 实例属性 - 也可以放在类的最顶层
		this.b = 1
	}
	// 获取函数
	get myName() {}
	// 设置函数
	set myName() {}
	// 静态方法 不会被实例继承
	static show() {}
	// 方法
	take() {}
	// 私有方法
	_take() {}
}

3.1 クラス コンストラクター

クラスのコンストラクター キーワードはconstructorで、プロトタイプのprototype.constructorに相当します。
コンストラクター関数が記述されていない場合、デフォルトで空のコンストラクター関数が存在します。

class A {
	constructor() {
		this.name = '小明'
	}
}
const b = new A()
b.constructor === A.prototype.constructor // true

new 演算子を使用してインスタンスを作成すると、コンストラクター コンストラクターが呼び出されます。

#3.2 クラス メソッド

class Student {
	// 方法
	take() {}
}

#3.3 クラスの静的メソッド# static キーワードが先頭に追加されることを除いて、クラスのメソッドと同じです。 静的メソッドはインスタンスに継承されません。

親クラスの静的メソッドはサブクラスに継承できます。

class A {
	// 静态方法
	static show() {
		console.log('hi')
	}
}
class B extends A {}
const c = new A()
c.show() // c.show is not a function
B.show() // hi

3.4 クラスのプライベート メソッド

このメソッドは es6 では提供されていませんが、通常は先頭のアンダースコアで表されます。方法。

class A {
	// 私有方法
	_show() {
    	console.log('hi')
  	}
}

3.5 値関数 (getter) と値格納関数 (setter)

クラスには set キーワードと get キーワードがあり、次のことができます。プロパティの値の保存および取得関数を設定して、そのアクセス動作をインターセプトします。

class A {
  constructor () {
    this.name = '小米'
  }
  get name () {
    return 'get'
  }
  set name (val) {
    console.log('set' + val)
  }
}
const b = new A()
b.name // get
b.name = 123 // set123

4 クラスの継承

4.1 extends による継承

extends によるクラスの継承キーワード。

class A {
	// 静态方法
	static show() {
    console.log('hi')
  }
}
class B extends A {}

4.2 スーパー メソッド

サブクラスがコンストラクター コンストラクターを記述しない場合、サブクラスにはコンストラクター コンストラクターとスーパー メソッドが存在することに注意してください。デフォルトでは、コンストラクタが明示的に記述されている場合は、スーパー メソッドをサブクラスのコンストラクタに追加する必要があります。追加後、親クラスのコンストラクタが呼び出され、親クラスの属性とメソッドが取得されますスーパーメソッドが追加されていない場合、レポートが報告されます。

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
  	super() // 如果不写super，则会报ReferenceError错误
  }
}
const c = new B()

スーパー メソッドでパラメータを渡すこともできます

class A {
  constructor (name) {
    this.name = name
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super('小红')
  }
}
const c = new B()
c.name // 小红

5 その他

5.1 メソッド内のこれは次を指します。

これがクラス メソッドにある場合、それはクラスのインスタンスを指します。ただし、単独で使用するとエラーが報告されます。

class A {
  constructor () {
    this.name = '小米'
  }
  show () {
    console.log(this.name)
  }
}
const b = new A()
b.show() // 小米
const { show } = b // Cannot read property 'name' of undefined

解決策は 2 つあります:

1. これをコンストラクターでバインドします

class A {
  constructor () {
    this.name = '小米'
    this.show = this.show.bind(this)
  }
  show () {
    console.log(this.name)
  }
}

2. アロー関数を使用します

class A {
  constructor () {
    this.name = '小米'
    this.show = () => this
  }
  show () {
    console.log(this.name)
  }
}

5.2 このクラスが継承されているかどうかを識別する

このクラスが継承されているかどうかを識別するには、Object.getPrototypeOf 関数を使用します。

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super()
  }
}
class C {}
Object.getPrototypeOf(B) === A // true 是继承的A类
Object.getPrototypeOf(B) === C // false 没有继承C类

[推奨学習:

JavaScript 上級チュートリアル

]

以上がJavaScriptにはクラスがないのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。