클래스 클래스는 es6 구문입니까?

class는 es6 구문이며 es6의 새로운 기능입니다. ES6에서는 "클래스"를 빠르게 정의하기 위해 class 키워드가 도입되었지만 클래스의 본질은 함수입니다. 이는 객체 프로토타입 작성을 더 명확하고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다. . 클래스 메소드 "class Person{//클래스 선언}" 또는 "const Person=class{//클래스 표현식}"을 정의하려면 클래스를 사용하십시오.

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

class는 es6 구문이며 es6의 새로운 기능입니다.

ES6에서는 "클래스"를 빠르게 정의하기 위해 class 키워드가 도입되었습니다.

JS에서 "클래스"의 본질은 함수입니다. 이는 구문 설탕으로 간주될 수 있으며, 객체 프로토타입의 작성 방법을 더욱 간결하고 명확하게 만들어 객체 지향 프로그래밍의 구문에 더 가깝습니다.

클래스 정의 이해하기 클래스

이전 생성자 형식에 따라 클래스를 생성하는 것은 일반 함수를 작성하는 것과 너무 유사할 뿐만 아니라 코드도 이해하기 쉽지 않다는 것을 알게 됩니다.

ES6의 새로운 표준(ECMAScript2015)에서는 클래스 키워드를 사용하여 클래스를 직접 정의합니다. 그러나 클래스는 여전히 위에서 언급한 생성자와 프로토타입 체인에 대한 구문 설탕이므로 이전 생성자를 잘 배우십시오. 클래스의 개념과 상속 관계를 이해하는 데 더 도움이 됩니다.

그럼 클래스를 정의하기 위해 클래스를 사용하는 방법은 무엇입니까? –클래스 선언과 클래스 표현식의 두 가지 방법을 사용할 수 있습니다.

class Person{
    //类声明
}

const Person=class{
    //类表达式
}

클래스와 생성자의 유사점과 차이점

클래스의 몇 가지 기능을 살펴보겠습니다. 생성자와 유사하다는 것을 알 수 있습니다. 특성은 실제로 동일합니다.

console.log(Person.prototype)
console.log(Person.prototype.__proto__)//Object null 
console.log(Person.prototype.constructor)//Person
console.log(typeof Person) // function

var p = new Person()
console.log(p.__proto__ === Person.prototype) // true

클래스 생성자

객체를 생성할 때 일부 매개변수를 클래스에 전달하려면 이때 무엇을 해야 할까요?

• 각 클래스는 자체 생성자(메서드)를 가질 수 있습니다. 이 메서드의 이름은 고정 생성자입니다.
• new 연산자를 통해 클래스를 작동할 때 이 클래스의 생성자를 생성자라고 합니다.
• 각 클래스는 하나의 생성자만 가질 수 있습니다 여러 생성자가 포함된 경우 예외가 발생합니다.

new 키워드를 통해 클래스를 작동하면 이 생성자 함수가 호출되고 다음 작업을 수행합니다.

• 1. 메모리에 새 객체(빈 객체)를 만듭니다.
• 2. 이 객체 내부의 [[prototype]] 속성에는 클래스의 프로토타입 속성 값이 할당됩니다.
• 4. 생성자의 내부 코드(함수 본문 코드)를 실행합니다.
• 5. 생성자가 null이 아닌 개체를 반환하지 않으면 생성된 새 개체를 반환합니다. 클래스 메소드
• 위에서 정의한 속성은 모두 여기에 직접 배치됩니다. 즉, 생성된 새 객체에 배치된다는 의미입니다.

이제 클래스에서 직접 정의할 수 있습니다.

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 普通的实例方法
  // 创建出来的对象进行访问
  // var p = new Person()
  // p.eating()
  eating() {
    console.log(this.name + " eating~")
  }

  running() {
    console.log(this.name + " running~")
  }
}

클래스의 Accessor 메서드

앞서 객체에 대해 이야기했습니다. 객체가 setter를 추가할 수 있다고 속성 설명자에서 언급했습니다.

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 类的访问器方法
  get address() {
    console.log("拦截访问操作")
    return this._address
  }

  set address(newAddress) {
    console.log("拦截设置操作")
    this._address = newAddress
  }
}

클래스의 정적 메서드

정적 메서드는 일반적으로 클래스를 사용하여 직접 실행되는 메서드를 정의하는 데 사용됩니다. 클래스의 인스턴스는 다음을 사용하여 정의할 필요가 없습니다. 정적 키워드:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }
  // 类的静态方法(类方法)
  // Person.createPerson()
  static randomPerson() {
    var nameIndex = Math.floor(Math.random() * names.length)
    var name = names[nameIndex]
    var age = Math.floor(Math.random() * 100)
    return new Person(name, age)
  }
}

ES6 클래스의 상속 - 확장

우리는 ES5의 상속 구현에 대해 논의하는 데 많은 시간을 보냈습니다. 비록 결국 상대적으로 만족스러운 상속 메커니즘을 달성했지만 그 과정은 여전히 ​​매우 번거롭습니다. .

상속 구현을 쉽게 도울 수 있는 확장 키워드가 ES6에 새로 추가되었습니다.

class Person{
    
}

class Student extends Person{
    
}

super 키워드

위 코드에서 super 키워드를 사용했다는 것을 알 수 있습니다. 이 슈퍼 키 단어는 다음에서 사용할 수 있습니다. 다양한 방법: 참고: 하위(파생) 클래스의 생성자에서 이를 사용하거나 기본 객체를 반환하기 전에 먼저 super!를 통해 상위 클래스의 생성자를 호출해야 합니다.

Super는 생성자, 인스턴스 메서드, 하위 클래스의 정적 메서드 등 세 가지 위치에서 사용할 수 있습니다.

내장 클래스 상속

또한 클래스가 내장 클래스에서 상속되도록 할 수도 있습니다. , 예: Array :

class HYArray extends Array {
  firstItem() {
    return this[0]
  }

  lastItem() {
    return this[this.length-1]
  }
}

var arr = new HYArray(1, 2, 3)
console.log(arr.firstItem())
console.log(arr.lastItem())

class mixin

JavaScript 클래스는 단일 상속만 지원합니다. 즉, 상위 클래스는 하나만 있을 수 있습니다

. 그렇다면 개발 중에 클래스에 유사한 기능을 더 추가해야 할 경우 어떻게 해야 할까요? 이때 mixin을 사용할 수 있습니다.

JavaScript中的多态

面向对象的三大特性：封装、继承、多态。

前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。JavaScript有多态吗？

维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一

个单一的符号来表示多个不同的类型。

非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

那么从上面的定义来看，JavaScript是一定存在多态的。

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(foo) {
  console.log(foo.getArea())
}

var obj1 = {
  name: "why",
  getArea: function() {
    return 1000
  }
}

class Person {
  getArea() {
    return 100
  }
}

var p = new Person()

calcArea(obj1)
calcArea(p)

// 也是多态的体现
function sum(m, n) {
  return m + n
}

sum(20, 30)
sum("abc", "cba")

// 传统的面向对象多态是有三个前提:
// 1> 必须有继承(是多态的前提)
// 2> 必须有重写(子类重写父类的方法)
// 3> 必须有父类引用指向子类对象

// Shape形状
class Shape {
  getArea() {}
}

class Rectangle extends Shape {
  getArea() {
    return 100
  }
}

class Circle extends Shape {
  getArea() {
    return 200
  }
}

var r = new Rectangle()
var c = new Circle()

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(shape: Shape) {
  console.log(shape.getArea())
}

calcArea(r)
calcArea(c)

export {}

【相关推荐：javascript视频教程、编程视频】

위 내용은 클래스 클래스는 es6 구문입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!