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 키워드를 통해 클래스를 작동하면 이 생성자 함수가 호출되고 다음 작업을 수행합니다.
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~")
}
}앞서 객체에 대해 이야기했습니다. 객체가 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)
}
}class Person{
}
class Student extends Person{
}위 코드에서 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. 그렇다면 개발 중에 클래스에 유사한 기능을 더 추가해야 할 경우 어떻게 해야 할까요? 이때 mixin을 사용할 수 있습니다.
面向对象的三大特性：封装、继承、多态。
前面两个我们都已经详细解析过了，接下来我们讨论一下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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![Node.js 전체 입문 튜토리얼 [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![JavaScript 기본 구문 [dom|bom|es6 새 구문|jQuery|데이터 시각화 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
