자바스크립트에는 클래스가 없나요?

ECMAScript6 사양 이전에는 JavaScript에는 클래스 개념이 없었고 생성자를 통한 클래스 시뮬레이션과 프로토타입을 통한 상속만 허용했습니다. ECMAScript 6 이후에는 class 키워드를 사용하여 클래스를 정의할 수 있습니다. 클래스를 정의하기 위해 class 키워드를 사용하는 작성 방법이 더 명확하고 객체 지향 구문과 유사합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

JavaScript는 객체 기반이지만 완전히 객체 지향 프로그래밍 언어는 아닙니다. JS 객체지향 프로그래밍 모델에는 객체와 클래스라는 두 가지 핵심 개념이 있습니다. ECMAScript6 사양 이전에는 JavaScript에는 클래스 개념이 없었고 생성자를 통해 클래스를 시뮬레이션하고 프로토타입을 통한 상속만 허용했습니다.

class 키워드는 클래스를 정의하기 위해 ES6에 추가되었습니다. class 키워드를 사용하여 클래스를 정의하는 것이 더 명확하고 객체 지향 구문과 비슷합니다. 그러나 이는 생성자이자 프로토타입의 개념이기도 하므로 구문 설탕으로 간주할 수 있습니다.

1 클래스 선언

클래스를 정의하는 방법에는 클래스 선언과 클래스 표현식이 있습니다.

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

2 구문 설탕이라고 부르는 이유

클래스는 실제로 함수이기 때문에 차이점은 constructor 함수 범위이고 클래스는 블록 수준 범위입니다. 클래스의 메서드는 모두 클래스의 프로토타입에 정의되어 있으므로 기사 시작 부분에서는 여전히 생성자와 프로토타입의 개념이라고 말합니다.

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 클래스에 포함된 속성 및 메서드

클래스에는 생성자 메서드, 인스턴스 메서드, getter, setter 및 정적 클래스 메서드가 포함될 수 있지만 필수는 아닙니다. 빈 클래스 정의는 여전히 유효합니다.

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

3.1 클래스 생성자

클래스의 생성자 키워드는 constructor이며 프로토타입의 프로토타입.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 키워드를 통한 클래스 상속.

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

4.2 슈퍼 메소드

하위 클래스가 생성자를 작성하지 않으면 기본적으로 생성자와 슈퍼 메소드가 있지만 생성자가 명시적으로 작성된 경우 하위 클래스 Add에 있어야 합니다. 슈퍼 메서드를 생성자에 추가한 후 상위 클래스의 생성자가 호출되고 상위 클래스의 속성과 메서드를 가져옵니다. 슈퍼 메서드가 추가되지 않으면 ReferenceError가 보고됩니다.

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 Others

5.1 메소드에서 This가

을 가리킵니다. 클래스의 메소드에 this가 있으면 다음을 가리킵니다. 클래스의 인스턴스. 하지만 단독으로 사용하면 오류가 보고됩니다.

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

두 가지 해결책이 있습니다:

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 이 클래스가 상속되었는지 구별합니다.

객체를 사용합니다. .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 고급 튜토리얼】

위 내용은 자바스크립트에는 클래스가 없나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!