ECMAScript6을 시작하기 위한 클래스 객체의 예에 대한 자세한 설명

이 글은 주로 ECMAScript6 - Class 객체에 대한 자세한 소개를 소개합니다. 편집자가 꽤 좋다고 생각해서 이제 공유하고 참고용으로 올려보겠습니다. 편집기를 따라가서 살펴보겠습니다.

객체지향 언어의 한 가지 특징은 모두 클래스 개념을 가지고 있으며 이를 통해 동일한 속성과 메서드를 가진 객체를 얼마든지 생성할 수 있다는 것입니다.

ECMAScript5에는 클래스 개념이 없으므로 클래스 기반 언어의 개체와 개체가 다릅니다.

Javascript에서 객체를 생성하는 전통적인 방법은 생성자를 통해 이루어졌습니다.

function Person(name, age){
  this.name = name;
  this.age = age;
  this.sayHello = function(){
    return "Hello "+ this.name;
  }
}

var person = new Person("dahan",18);
person.sayHello();
//Hello dahan

위 메소드는 Javascript에서 메소드를 선언하는 형태와 동일하기 때문에 객체와 메소드의 구분이 명확하지 않습니다. 혼란스러워지기 쉽습니다.

ES6에서는 Class(클래스) 개념을 도입했습니다. ES6 구문을 통해 객체를 생성할 때 class 키워드를 사용하여 Java 구문과 마찬가지로 클래스를 정의할 수 있습니다. 물론 이 구문의 기능은 ES5를 통해서도 구현될 수 있습니다. 이는 클래스 정의를 더 명확하고 이해하기 쉽게 만듭니다.

//类的定义
class Person {
  //ES6中新型构造器
  constructor(name) {
    this.name = name;
  }
  //实例方法
  sayName() {
    console.log("我的名字叫"+ this.name);
  }
}
//类的继承
class Programmer extends Person {
  constructor(name) {
    //直接调用父类构造器进行初始化
    super(name);
  }
  program() {
    cosnole.log("这是我的地盘");
  }
}
//运行测试
var person = new Person('lingxiao');
var coder = new Programmer('coder');

person.sayName();
//我的名字叫lingxiao
coder.sayName();
//我的名字叫coder
coder.program();
//这是我的地盘

이제 위 코드에 나타나는 구문에 주목해 보겠습니다.

constructor

constructor는 클래스의 기본 메서드입니다. Java의 기본 메서드와 마찬가지로 모든 클래스에는 constructor 메서드가 있어야 합니다.

이 new을 통해 객체를 인스턴스화하면 자동으로 constructor 메서드를 호출하고 반환되는 값은 constructor에서 반환하는 값입니다. constructor기본적으로 현재 클래스의 인스턴스 객체가 반환되지만（this）, 물론 다른 객체를 지정할 수도 있습니다. 이렇게 하면 인스턴스화된 객체가 현재 클래스의 인스턴스가 아닙니다.

class Person {
  constructor(){
    var ob = new Object();
    return Ob;
  }
  sayHello(){
    return "Hello World"
  }
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function

객체를 인스턴스화할 때 ES6에서는 new 키워드를 사용하도록 규정합니다. 객체를 직접 호출하면 함수로 호출됩니다.

class Person {
  constructor(name){
    this.name = name;
  }
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without 'new'

this

첫 번째 코드에서 보면 클래스의 this가 인스턴스 자체를 가리키지만 클래스의 메서드에 있는 경우 If 이 메소드를 단독으로 호출하면 오류가 발생합니다.

class Person{
  constructor(name){
    this.name = name;
  }
  sayHello() {
    return "Hello "+this.name
  }
}
var person = new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property 'name' of undefined

이를 위해 간단히 바인딩 this

class Person{
  constructor(name){
    this.name = name;
    this.sayHello = this.sayHello.call(this);
  }
  sayHello() {
    return "Hello "+this.name
  }
}

inherit extend

클래스에 속해 일부 속성을 확장하고 싶지만 Done 원래 클래스를 수정하고 싶지 않아 상속이 사용됩니다.

//类的继承
class Programmer extends Person {
  constructor(name,age) {
    this.age = age;//报错
    //直接调用父类构造器进行初始化
    super(name);
  }
  program() {
    cosnole.log("这是我的地盘");
  }
}

상속을 사용할 때는 super 키워드를 사용하여 상위 클래스를 호출해야 합니다. super(name) 상위 클래스의 constructor 메서드를 호출하면 됩니다.

또한 상속을 사용할 때 super 키워드는 this의 포인터를 변경하는 데에도 도움이 되므로 super을 사용하기 전에 먼저 this 메서드를 호출해야 합니다. ES6에서는 하위 클래스의 생성자가 super 함수를 한 번 실행해야 하며, 그렇지 않으면 오류가 보고됩니다.

마지막으로

class 키워드의 등장으로 Javascript도 좀 더 객체 지향 언어처럼 보이도록 만들어졌으면 좋겠습니다. .

위 내용은 ECMAScript6을 시작하기 위한 클래스 객체의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!