ES6의 수업 지식 포인트를 요약하고 정리합니다.-JS 튜토리얼-php.cn

이 글에서는javascript에 대한 관련 지식을 소개합니다. 주로 클래스 클래스에 관한 내용을 소개합니다. ES6에서는 클래스 클래스의 개념을 소개하는데, 클래스는 우리와 더 일치합니다. 우리가 일반적으로 이해하는 객체지향 언어에 대해 모두에게 도움이 되기를 바랍니다.

ES6의 수업 지식 포인트를 요약하고 정리합니다.

【관련 추천:javascript 동영상 튜토리얼,웹 프론트엔드】

클래스 소개

기존 JS는 객체 개념만 있고 클래스 개념은 없습니다. JS는 객체 지향이기 때문입니다. 프로토타입 기반의 언어 프로토타입 객체의 특징은 새로운 객체와 모든 속성을 공유한다는 것입니다.

ES6에서는 클래스라는 개념을 도입했습니다. 클래스는 우리가 일반적으로 이해하는 것과 더 일치하는 객체 지향 언어입니다.

class Person{ //定义一个名为Person的类 // 构造函数，用来接受参数 constructor(x,y){ this.x = x; //this代表的是实例对象 this.y = y; } todoSome(){ //这是个类的方法，不需要加function，有多个方法也不用逗号隔开 alert(this.x + "的年龄是" +this.y+"岁"); } } export default Person;

로그인 후 복사

정적 메서드 및 정적 속성

정적 메서드 및 정적 속성은정적 키워드

정적 메서드

static classMethod(){ console.log('123456') }

로그인 후 복사

정적 메서드는 하위 클래스에서 상속되지 않으며 하위 클래스는 상속될 수 없습니다.
정적 메서드를 호출할 때 이는 클래스의 인스턴스가 아닌 클래스를 가리킵니다. 따라서정적 메서드는 인스턴스가 아닌 클래스 이름을 통해서만 호출할 수 있습니다

let p = new Point(); p.classMethod(); // 报错

로그인 후 복사

정적 속성

static prop = 1 ; // 静态属性

로그인 후 복사

정적 속성은 하위 클래스에서 상속할 수 없으며 하위 클래스는 호출할 수 없습니다.
정적 속성은 통해 호출 클래스 이름으로 호출되지만 클래스 인스턴스에서 호출할 수 없습니다.

클래스 상속 확장

클래스는 확장 키워드를 사용하여 상속할 수 있습니다.
ES6 상속, 하위 클래스 생성자에서 super()를 사용해야 합니다. . ES6 상속은 먼저 상위 클래스 인스턴스 객체의 속성과 메서드를 여기에 추가한 다음 하위 클래스의 생성자를 호출하여 이를 수정하기 때문에 하위 클래스가 생성자 메서드를 정의하지 않으면 super()가 기본적으로 이를 추가합니다. 하위 클래스는 상위 클래스의 메서드와 속성을 상속하지만 정적 메서드와 속성은 하위 클래스의 클래스 이름을 통해 호출해야 합니다

import classtest from "./classtest"; //先引入父类 class Man extends classtest{ constructor(x,y){ //构造函数尽量与父类参数保持一致 super(); //利用super()关键字，这个必须放在子类构造函数中的第一位置 this.x = x; this.y = y; } } export default Man;

로그인 후 복사

값 함수 getter와 저장 함수 setter는 할당 및 값 동작을 사용자 정의할 수 있습니다. 속성에 getter만 있고 setter가 없는 경우 속성은 읽기 전용 속성이므로 값을 할당할 수 없으며 초기화할 수도 없습니다. 처음으로.

변수가 private으로 정의된 경우(클래스의 중괄호 외부에 정의됨) setter 없이 getter만 사용할 수 있습니다.

let data=[1,2,3,4]; //放在类外面，属于私有变量，可以只读取 class Person{ // 构造函数 constructor(x,y){ this.x = x; this.y = y; } get x(){ console.log('获得name'); return this._name; //get读取属性 } set x(x){ console.log("设置name"); this._name=x; //set给属性赋值 } get data(){ return data; //只读属性，属性返回的值只能是私有变量 } todoSome(){ alert(this.x + "的年龄是" +this.y+"岁"); } static dayin(){ alert("dayin"); } } export default Person;

로그인 후 복사

사용 방법:

var test= new this.$myutils.classtest('haha','18'); test.x="haha3"; //改变了实例化时候的x的值 test.todoSome(); //输出：haha3的年龄是18岁。这里就已经不是实例化时候的haha了 console.log(test.data); //结果：打印[1,2,3,4]

로그인 후 복사

주의 사항:1. JS의 생성자는 function으로 정의되기 때문에 클래스에서 메서드를 정의할 때 function 키워드를 메서드에 추가할 수 없습니다. 분리.