개요
ES6에서는 객체지향(참고: JavaScript는 본질적으로 객체 기반 언어) 언어에 가까운 작성 방법을 제공하며 객체에 대한 템플릿으로 클래스(class)가 도입되고 클래스는 class 키워드를 통해 정의됩니다.
클래스의 본질은 기능이다.
이는 구문 설탕으로 간주되어 객체 프로토타입 작성을 더 명확하고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다. 대부분의 기능은 ES5에서 달성할 수 있으며, 새로운 클래스 작성 방법은 객체 프로토타입의 작성 방법을 더욱 명확하게 만들고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다.
클래스의 기본 구문
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
// 调用方法
console.log(bobi.kill());
- 위의 코드는 "클래스"를 정의하고 있는데, 그 안에 생성자 메서드인 생성자 메서드가 있고, this 키워드가 인스턴스 객체를 나타내는 것을 알 수 있습니다. 즉, ES5 생성자 Baby는 ES6 Baby 클래스의 생성자 메서드에 해당합니다.
- 위의 Baby 클래스에는 생성 메소드 외에 kill 메소드도 정의되어 있는 것을 볼 수 있는데, 참고 로 클래스의 메소드를 정의할 때 function이라는 키워드를 추가할 필요는 없고 정의만 넣으면 된다. 메소드 사이에 쉼표를 추가하지 마십시오. 오류가 보고됩니다 .
보시다시피 편집자는 여기에 오류를 직접 보고합니다. - 클래스를 사용하려면 ES5 이전과 다른 새로운 메소드를 사용해야 한다는 점에 유의해야 합니다.
var bobi = new Baby("bobi", 1);//这里正常
var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'
프로젝트에서 new 메소드를 사용하지 않을 때는 클래스를 사용하지 않도록 주의가 필요합니다
4. 또 한 가지 주의할 점은 클래스를 반복적으로 선언하면 안 된다는 점입니다. 그렇지 않으면 오류가 보고됩니다.
class MM {
}
class MM {
}
중복 선언은 허용되지 않습니다
. 5. 클래스 정의는 승격되지 않습니다. 즉, 액세스하기 전에 클래스를 정의해야 합니다. 그렇지 않으면 오류가 보고됩니다.
6. 클래스는 열거할 수 없습니다.
for (var key in Baby) {
console.log(key); // 没有任何内容打印出来
}
constructor 방법
생성자 메서드는 클래스의 기본 메서드이며 이 개체를 생성한 배열 함수에 대한 참조를 반환합니다. 클래스에는 생성자 메서드가 있어야 하며, 명시적으로 정의하지 않은 경우 기본적으로 빈 생성자 메서드가 추가됩니다.
생성자 메서드는 기본적으로 인스턴스 개체를 반환하지만 생성자 메서드가 복합 유형을 반환하는 경우 변경될 수 있습니다 .
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
// return 111; //返回Baby {name: "bobi", age: 1}
// return "asdfasd"; //返回Baby {name: "bobi", age: 1}
// return false; //返回Baby {name: "bobi", age: 1}
// return [1, 2] //返回[1,2]
// return {
// name: "111"
// } //返回{name:"111"}
return function fn() {
console.log(11);
} //返回函数
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
생성자와 일반 생성자의 차이점: 클래스의 생성자는 new를 사용하지 않으면 호출할 수 없으며 오류가 보고됩니다. 이는 new 없이 실행될 수 있는 일반 생성자와의 주요 차이점입니다.
위에는 데모가 있지만 여기에는 없습니다.
정적 키워드
클래스는 static 키워드를 통해 정적 메서드를 정의합니다. 정적 메서드는 클래스 인스턴스에서 호출할 수 없지만 클래스 자체를 통해 호출해야 합니다.
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy"
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(Baby.mama);
console.log(bobi.mama);
클래스 자체가 호출될 때만 사용할 수 있습니다. new에서 호출된 인스턴스화된 객체는 underfined입니다.
- 정적 메서드는 this 키워드를 사용하여 동일한 클래스의 다른 정적 메서드를 호출합니다.
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
console.log(Baby.father);//lucy honey
- 비정적 메서드에서는 this 키워드를 직접 사용하여 정적 메서드에 액세스할 수 없습니다. 대신 클래스 이름을 사용하여 호출하세요.
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
console.log(Baby.mama);
console.log(this.constructor.father);
//this指向新new出来的对象 this.constructor指向类
console.log(this.constructor);
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
var boby = new Baby("boby", 1)
요약하다
이번 글은 여기서 마치겠습니다. 추가할 내용이 있으면 댓글로 달아주세요. 도움이 되셨다면 좋아요 부탁드립니다~