JavaScript에서 클래스 및 클래스 상속 만들기

JavaScript에서 클래스 및 클래스 상속 만들기

JavaScript는 객체 지향 언어입니다. 참조 데이터 유형은 함수를 포함한 모든 객체입니다. 동시에 객체 객체를 통해 객체를 사용자 정의 할 수 있습니다.
그러나 다른 객체 지향 언어 (예 : Java 및 기타 고급 언어)와 비교할 때 큰 차이가 있습니다 .JS에는 클래스 또는 인터페이스 개념이 없으므로 추상 클래스를 직접 정의 할 수 없습니다. 상속은 직접 구현할 수 없습니다. 그러나 프로그래밍의 편의를 위해 JS에서 클래스의 동작과 상속을 시뮬레이션 할 수 있습니다.
간단히 말해서 Javascript에는 클래스의 개념이 없지만 생성자를 사용하여 클래스 함수를 구현할 수 있습니다. 일반 생성자 이름의 첫 글자는 대문자입니다
. 실제로 클래스는 "특수 함수"입니다. 정의 할 수있는 함수 표현식 및 함수 선언과 마찬가지로 클래스를 생성하는 방법에는 두 가지가 있습니다.

  1. 방법 1 : 클래스 선언
class Star {
  constructor(name, age) {
	    this.name = name;
	    this.age = age;
  }
}
  1. 방법 2 : 클래스 표현
var Star = class {
       constructor(name, age) {
            this.uname = name;
            this.age = age;
       }
}
console.log(Star.name);  //Star

참고 : 함수 선언과 클래스 선언의 중요한 차이점은 함수 선언은 승격되지만 클래스 선언은 승격되지 않는다는 것 입니다. 먼저 클래스를 선언 한 다음 액세스해야합니다. 그렇지 않으면 다음과 같은 코드에서 ReferenceError가 발생합니다.

var p = new Star(); // ReferenceError
class Star {
	constructor(name, age) {
            this.uname = name;
            this.age = age;
    }
} //要先声明类,才能使用它

클래스는 인스턴스화하기 위해 new 키워드를 사용해야합니다.

var ldh = new Star("刘德华", 55);
var zxy = new Star("张学友", 25);
console.log(ldh.name, ldh.age);  //刘德华,55
console.log(zxy.uname, zxy.age);  //张学友, 55
  1. 클래스 상속
//语法
          class Father{

          }
          class Son extends Father{
        		//子类继承父类
          }
class Father {
            constructor() {

            }
            money() {
                console.log(100);
            }  //给类中添加了方法
}
class Son extends Father {

}
var son = new Son();
son.money();  //100(继承了父亲的100元)
class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
}
class Son extends Father {
            constructor(x, y) {
                super(x, y);
                //super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数
            }
}
var son = new Son(1, 2);
son.sum();

추천

출처blog.csdn.net/Angela_Connie/article/details/110536716