es6 클래스는 무엇을 합니까?

es6의 클래스 키워드는 "클래스"를 빠르게 정의하는 데 사용됩니다. 클래스의 본질은 구문 설탕으로 간주될 수 있는 함수이므로 객체 프로토타입 작성을 더 명확하고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다. . 클래스를 승격할 때 변수 승격은 없습니다. 클래스의 모든 메서드는 클래스의 프로토타입 속성에 정의됩니다. 클래스 인스턴스에서 메서드를 호출하는 것은 실제로 프로토타입에서 메서드를 호출하는 것입니다.

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

Basics

• es6에서는 클래스 개념을 소개하며, class 키워드를 사용하여 "클래스"를 빠르게 정의합니다. 새로운 클래스 작성 방법을 사용하면 객체 프로토타입 작성이 더욱 명확해지고 객체 지향 프로그래밍의 구문과 유사하며 이해하기 쉬워집니다.

• 사실 그 뒤에는 프로토타입과 생성자의 개념이 여전히 사용되고 있습니다.

• 엄격 모드 코드가 클래스와 모듈 내에 작성되어 있는 한 엄격 모드만 사용할 수 있으므로 use strict를 사용할 필요가 없습니다.

• 클래스를 개선할 때 변수 승격이 없습니다(상속으로 인해 하위 클래스가 상위 클래스 다음에 정의되도록 해야 합니다).

• 클래스의 모든 메소드는 클래스의 프로토타입 속성에 정의됩니다. 클래스의 인스턴스에서 메소드를 호출하는 것은 실제로 프로토타입 메소드를 호출하는 것과 같습니다. 프로토타입 메소드는 인스턴스 객체를 통해 호출할 수 있지만 그럴 수는 없습니다. 클래스 이름을 통해 호출하면 오류가 보고됩니다

class는 es6의 클래스를 정의하는 데 사용됩니다

• 사실 클래스는 단지 문법적 설탕이자 생성자를 작성하는 또 다른 방법입니다

• (Syntactic sugar는 코딩 오류를 방지하고 효율성을 높이기 위한 일종의 코딩입니다. 문법 수준의 우아한 솔루션은 단순히 이식 가능한 작성 방법입니다.)

코드 보기

class Person{
}
console.log(typeof Person)                               //funciton
console.log(Person.prototype.constructor === Person)     //true

사용법 코드 보기
사용법 생성자를 사용하는 것과 동일합니다. new를 사용하여 객체 인스턴스를 생성하세요

class person2 {
}
let json = new person2;

속성과 메서드

생성자에 정의된 속성과 메서드는 이에 대해 호출되는 인스턴스 속성과 메서드입니다. 그렇지 않으면 프로토타입 속성과 메서드입니다.

class Person {
  constructor (name) {
    this.name = name            //constructor内定义的方法和属性是实例对象自己的，
  }
  say () {                      //而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
    console.log('hello')
  }
}
let jon = new Person()
jon.hasOwnPrototype('name')     //true
jon.hasOwnPrototype('say')      //false

정적 메소드

인스턴스 객체 없이 클래스를 통해 직접 호출할 수 있는 메소드 this는 클래스 자체를 가리킵니다.

class Person {
  static doSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay()              //hello
***********************************************************************************************
//静态方法可以被子类继承
class Sub extends Person { 
}
Sub.doSay() // hello

//静态方法可以通过类名调用，不能通过实例对象调用，否则会报错
class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)        //  TypeError p.sum is not a function

name 속성

name 속성은 클래스의 이름을 반환합니다. 이는 클래스 바로 뒤에 오는 이름입니다.

class Person {
}
Person.name // Person

이것은 기본적으로 클래스의 인스턴스를 가리킵니다.

클래스의 메소드에 이것이 포함된 경우 이 메소드만 단독으로 사용하면 오류가 보고될 가능성이 높습니다.
이것이 잘못된 방향을 가리키는 경우 1. 화살표 함수를 사용합니다. 2. 이것을 생성자에 바인딩합니다.

값 함수(getter) 및 저장 값 함수(setter)

class Person {
  get name () {
    return 'getter'
  }
  set name(val) {
    console.log('setter' + val)
  }
}

let jon = new Person()
jon.name = 'jon' // setter jon
jon.name         // getter

//클래스 선언은 반복할 수 없습니다.

class Person {}

class Person {}
// TypeError 식별자 'Person'이 이미 있습니다. 선언되었습니다

생성자 키워드

생성자 메서드
• 생성자 메서드는 클래스의 기본 메서드입니다. new 명령을 통해 개체 인스턴스가 생성되면 이 메서드가 자동으로 호출됩니다(이 메서드가 반환하는 인스턴스 개체). 기본).
• 클래스에는 생성자 메서드가 있어야 합니다. 명시적으로 정의하지 않으면 기본적으로 빈 생성자 메서드가 추가됩니다.
• 클래스에는 "생성자"라는 특수 메서드가 하나만 있을 수 있습니다. 클래스에 생성자 메서드가 여러 개 포함되어 있으면 SyntaxError가 발생합니다.

• class Person {
     constructor(x, y) {
      this.x = x    //默认返回实例对象 this
      this.y = y
    }
    toString() {
      console.log(this.x + ', ' + this.y)
    }
  }

생성자란 무엇인가요?

모든 클래스에는 생성자가 있어야 합니다. 명시적인 선언이 없으면 js 엔진은 자동으로 빈 생성자를 추가합니다

class person3 {
}
//等于 
class person3 {
    constructor(){}
}

참고 클래스에서 메서드를 선언할 때 메서드 앞에 function 키워드를 추가하지 마세요. 메소드를 쉼표로 구분하지 마십시오. 그렇지 않으면 오류가 보고됩니다. 클래스 내부에 정의된 모든 메소드는 열거 불가능합니다

es5와 마찬가지로 인스턴스의 속성은 명시적으로 자체(예: 이 객체)에 정의되지 않는 한 프로토타입에 정의됩니다.

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
    
  }
  toString(){
    return `this.x + this.y`;
  }
}
var point = new Point();
point.toString()    //(2,3)
point.hasOwnProperty("x")        //true
point.hasOwnProperty("y")        //true   在这x&&y都是实例对象point自身的属性(因为定义在this变量上) // 所以返回true 
point.hasOwnProperty("toString") //false  toString是原型对象的属性 (因为定义在Point类上)             //所以返回false 
point._proto_.hasOwnProperty("toString") //true  

//加两个实例 
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_                //true    这个不建议使用 
//上面代码中 p1和p2 都是point的实例 他们的原型都是Point.prototype 所以 _proto_属性是相等的 
//即是说 可以通过实例的_proto_ 属性为 "类" 添加方法

슈퍼 키워드

The super 키워드는 상위 클래스의 생성자를 호출하거나 상위 클래스의 일반 함수를 호출하는 데 사용됩니다.

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){
            console.log("你的名字" + this.surname)  //你的名字锤子
        }
    }
    //在这里 子继承父类
    class Son extends Father {
        constructor(surname,name){
            super(surname)
            this.name = name 
        }
        say(){
            super.say()
            console.log('调用普通' + this.name)    //调用普通铁的
        }
    }
    var son = new Son('锤子',"铁的")
    son.say()
    console.log(son)   //打印  {surname: "锤子", name: "铁的"
    //在子类的构造函数如果使用 super 调用父类的构造函数 必须写在 this之前  
    //还可以 调用父类的普通方法 
    //在es6中 类没变量提升 必须先定义 才能通过实例化对象类里面的 共有属性 和方法 通过this 调用
    //类 里面的this 代表什么
    //constructor 里面this指向实例对象  
    // 方法里面this 代表 方法的 调用者

상속을 확장합니다

상속은 하위 상속입니다. 상위 산업 실제로는 프로그램의 하위 클래스는 상위 클래스로부터 일부 메서드와 속성을 상속받을 수 있습니다. 상속은 코드 작성을 줄이고 키워드 확장을 용이하게 할 수 있는 주요 객체 지향 기능입니다.

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){                                     //父级Father里面有一个方法 say()  
            console.log("你的名字" + this.surname)
        }
    }

    class Son extends Father {                     //在这里Son 继承了 Father父级里面的方法   关键字extends 
    }

    var son = new Son('锤子')                      //new 出来实例   
    son.say()                                      //打印  你的名字锤子

类的方法

class Person  {
         constructor(name, age) {    
    // 构造函数，接收一个name和age
             this.name = name
             this.age = age 
         }
         say(){
    // 一个方法  //注意类里面的方法不加function关键字  方法与方法之间不用,号隔开 
             console.log("你好",this.name)
         }
         // ....sayWhat(){} saySome(){}
    }
     var person  = new Person('老王',44)
    //调用方法
     person.say()  //老王
    //在类的实例上调用方法 其实就是调用 原型上的方法

类的表达式

与函数一样 calss 也可以使用表达式的形式定义  采用class表达式 可以写出立即执行的Class!!
注意与函数表达式类似 类表达式在他们被求值前也不能使用(即赋值变量 之前调用) 但 与函数定义不同 虽然函数声明可以提升 但类不能

类表达式（类定义）
类表达式可以是被命名的或匿名的

匿名类

let Person = class {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

命名的类

let Person = class Person {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}
const Mycalss = class Me {
    getClassName(){
        return Me.name;
    }
};     //这里用 表达式(即赋值变量一个) 
       //注意! 这个类的名字是Mycalss而不是 Me Me只在Class的内部代码可用 指代当前类
let inst = new Mycalss();
inst.getClassName()   //Me   
Me.name               //报错  Me只在Class内部有定义

采用class表达式 可以写出立即执行的Class!!

let person = new class {
    constructor(name) {
       this.name = this.name; 
    }    
    sayname(){
        console.log(this.name);
    }
}("常东东")         //这段代码中class是立即执行的实例

补充案例

class Animal {                       //class定义了一个“类”
        constructor(){
            this.type = 'animal'     //有一个constructor方法，这就是构造方法   //this关键字则代表实例对象
        }                            //constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    let animal = new Animal()
    animal.says('hello')    //animal says hello

    class Cat extends Animal {       //通过extends关键字实现继承  //定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
        constructor(){
            super()                  //super关键字 它指代父类的实例（即父类的this对象）子类必须在constructor方法中调用super方法，否则新建实例时会报错。
            this.type = 'cat'        //这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。   
        }
    }
    let cat = new Cat()
    cat.says('hello')       //cat says hello

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

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