es6의 클래스 기능 사용 사례에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 es6의 클래스 기능 사용 사례에 대해 자세히 설명하겠습니다. es6의 클래스 기능 사용 시 주의사항은 무엇인가요?

javaScript 언어에서 인스턴스 객체를 생성하는 전통적인 방법은 constructor를 사용하는 것인데, 이는 전통적인 객체 지향 언어(예: C++ 및 Java)와는 매우 다릅니다. 전통적인 언어에 더 가까워서 클래스(class)라는 개념을 객체에 대한 템플릿으로 도입합니다. 클래스는 class 키워드를 통해 정의할 수 있습니다.

es6 클래스와 es5 객체 지향의 차이점:

1. 다양한 작성 방법, 키워드 클래스를 사용합니다.

2. 인스턴스를 새로 만들 때 기본적으로 생성자 메서드가 있고, 인스턴스 개체 (this)는 기본적으로 반환되며 다른 객체를 반환할 수도 있습니다

3. 클래스의 모든 메소드는 프로토타입 속성에 있지만 열거 가능하지 않으며 각 메소드 끝에 세미콜론을 사용할 수 없습니다

4 . 클래스에 대한 호출은 new 인스턴스를 전달해야 하며 클래스 Strict 모드는 기본적으로 내부적으로 사용됩니다.

5. 변수 승격이 없으며 먼저 선언한 다음 호출해야 합니다.

6. 이 클래스 포인트 기본적으로 현재 클래스의 정적 메서드에

7. 클래스에는 static 키워드를 사용하고 new는 필요하지 않으며 클래스를 통해 직접 호출됩니다.

8. 인스턴스 속성을 작성하는 방법 및 정적 속성은 인스턴스 속성을 사용하여 직접 작성합니다. 클래스 내에서 방정식(=)을 사용하거나 생성자 메서드에서 작성할 수 있습니다. 정적 속성은 인스턴스 속성 앞에 키만 추가하면 됩니다. 클래스 상속은 상속 메커니즘을 사용합니다.

es5의 상속 원칙: 먼저 하위 클래스의 인스턴스 객체 this를 새로 만든 다음 상위 클래스의 메서드와 특성을 하위 클래스의 On this에 추가합니다(parents.call(this)).

　Es6의 상속 원칙: 먼저 상위 클래스의 인스턴스 객체 this를 생성하므로 생성자()를 사용하여 this를 사용하여 상위 클래스의 속성에 액세스하려면 먼저 super() 메서드를 호출해야 합니다. 그런 다음 하위 클래스

10．의 생성자()를 통해 이를 수정합니다. 클래스 상속은 기본 생성자를 상속할 수 있지만 es5는 상속할 수 없습니다.

1. 일반적인 작성 방법(es5 및 es6)

//一.ES5写法：
function Animate(name){
  this.name = name;
}
Animate.prototype.getname = function(){
  console.log(this.name)
}
var p =new Animate("lity");
p.getname();
//二.ES6,面向对象的写法,calss,
class Person{
  //constructor()：构造方法是默认方法，new的时候回自动调用，如果没有显式定义，会自动添加
  //1.适合做初始化数据
  //2.constructor可以指定返回的对象
  constructor(name,age){
  　　 this.name = name;
  　　 this.age = age;
　　}
  getval(){
    console.log(`你是${this.name},${this.age}岁`);
  }
}      
var c1 = new Person("lity",20); 
c1.getval();

로그인 후 복사

ES6의 클래스는 단지 구문 설탕으로 간주할 수 있으며 해당 기능의 대부분은 ES5에서 달성할 수 있습니다

참고: 클래스의 본질은 여전히 함수이며 클래스 자체는 생성자를 가리킵니다.

typeof Person  //function
Person === Person.prototype.constructor // true

로그인 후 복사

Object의 일부 속성이나 메서드를 사용하여 es6

//1.查看实例对象c1的proto是否指向Person的原型(Person.prototype)
 console.log(c1.proto==Person.prototype)//true
 console.log(c1.proto)//原型对象的所有方法
 //2.isPrototypeOf:检测实例对象是否是某个函数的原型
  console.log(Person.prototype.isPrototypeOf(c1));//true
//3.constructor:查看某个对象的构造函数
   console.log(c1.constructor);
 //4.hasOwnProperty:检测某个属性是否是自己的属性；不是原型对象上的属性和方法
   console.log(c1.hasOwnProperty("name"))//true;
 //5.in：通过in可以检测属性是否在自己中(this)或者是原型中存在
    console.log("getval" in c1)//原型上存在，true
    console.log("name" in c1)//constructor(自己上存在)，true
 //6.自定义检测属性是否是存在
    function hasproperty(attr,obj){
       return obj.hasOwnProperty(attr)&&(attr in obj);
    }
    console.log(hasproperty("name",c1));//true;

로그인 후 복사

2. 표현식 작성 방법

//class表达式
const Myclass = class Me{//这里的Me是没有作用的
  constructor(name,jog){
    this.name = name;
    this.jog = jog;
  }
  getval(){
    console.log(`name is ${this.name},job is a ${this.jog}`);
  }
}
 var obj1 = new Myclass("lylt","teacher");
 obj1.getval();

로그인 후 복사

3. 클래스의 전용 메서드(ES6에서는 쓰기 메서드를 제공하지 않음)와 전용 속성(또한 제공하지 않음) 작성 메소드 제공) , 제안은 #)으로 식별됩니다

소위 프라이빗 메소드와 프라이빗 속성은 클래스 내부에서만 사용할 수 있고 클래스 외부에서는 호출할 수 없음을 의미합니다

4.ES6에서는 Class 클래스를 다음과 같이 규정합니다. 정적 속성이 없고 정적 메서드만 있습니다. static

소위 정적이라고 하며 객체를 인스턴스화할 필요가 없으며

class Foo {
   static classMethod() {
      return 'lity';
    }
 }
 console.log(Foo.classMethod()) // 'hello'

로그인 후 복사

5.new.target 속성을 직접 호출합니다.

new는 생성자에서 인스턴스를 생성하는 명령입니다. ES6은 new에 대해 .target 속성을 제공하며,

는 새 명령을 통해 인스턴스 객체를 반환합니다. 클래스(생성자)는 일반적으로 클래스 내부에서 사용됩니다

//ES5：原始写法对象
function objtarge(name){
  if(new.target==undefined){
    throw new Error("必须实例化对象");
  }else{
    this.name = name
  }
}
var targets = new objtarge("litys");
console.log(targets.name);//litys
//es6写法:class内部使用new.target，返回当前的calss
class caltartget{
  constructor(name){
    console.log(new.target==caltartget);//true
    if(new.target!==caltartget){
      throw new Error("实例化对象不是caltrget");
    }else{
      this.name = name;
    }
  }
}
var caltart = new caltartget("lity");
console.log(caltart.name);//lity

로그인 후 복사

6.this는

을 가리킵니다. 기본적으로 클래스의 인스턴스를 가리킵니다. 그러나 매우 주의해야 합니다. 이 메서드를 단독으로 사용하면 오류가 보고될 수 있습니다. 다음 예는 실행 중인 환경을 가리키므로 this.print() 메서드를 사용할 수 없기 때문에 오류가 보고됩니다. 찾을 수 있습니다.

위 방법으로 이 포인팅 문제를 해결하려면:

(1).bind(this)

(2)를 사용하세요. () => {}

(3).

class Logger {
 printName(name = 'there') {
  this.print(`Hello ${name}`);
 }
 print(text) {
  console.log(text);
 }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

로그인 후 복사

7.class의 get() 및 set() 메소드

는 ES5와 동일합니다. "class" 내부의 get 및 set 키워드를 사용하여 특정 속성에 대한 저장 기능과 값 기능을 설정할 수 있습니다. 속성의 액세스 동작을 가로챕니다.

//1.bind()方法
class Logger {
 constructor() {
  this.printName = this.printName.bind(this);
 }
 // ...
}
//2.箭头函数 （）=>{}
class Logger {
 constructor() {
  this.printName = (name = 'there') => {
   this.print(`Hello ${name}`);
  };
 }
 // ...
}
//3. Porxy()
.................

로그인 후 복사

8.상속

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

//es5 的继承
//父类
function Person(name,sex){
  this.name = name;//属性
  this.sex = sex;//属性       
}
//定义一个原型方法
Person.prototype.show = function(){
  console.log("我的姓名是"+this.name+"==="+"我的性别是"+this.sex)
}
//子类
function Worker(name,sex,job){      
  //构成函数伪装：使用call()方法绑定this，伪装继承父级的属性
  Person.call(this,name,sex);
  this.job = job;
}
//继承父类的原型方法：（介绍三种方法）
//写法一：通过遍历父级的原型一个个赋给子级的原型(es5 的原型是可枚举的，es6的不可以枚举)
(var i in Person.prototype){
  Worker.prototype[i] = Person.prototype[i];
}
//写法：重新new一个父级对象赋给子级的原型
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
//写法三：创建一个原型对象赋给子级的原型；(es5 推荐)
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.constructor = Worker;
var workers = new Worker("小明","男","job")
//es6 的继承
class Person{
  constructor(name,sex){
    this.name = name;//属性
  　　 this.sex = sex;//属性
   }
}
class Worker extends Person{
   constructor(name,sex,job){
     super();
     this.job =job;
   }
}
var workers = new Worker("小明","男","job")

로그인 후 복사

8.1:super关键字：在子类中不同情况用法不同,既可以当作函数使用，也可以当作对象使用。

(1)：super作为函数，只能在constructor中使用:代表父类，返回子类的this

(2)：super作为对象，在普通函数中，cuper指向父类的原型对象，可以访问原型对象的属性和方法,注意，父类的实例的属性和方法是访问不了的

(3)：super作为对象，在静态方法中，cuper指向的是父类，不是父类的原型对象

示例分析如下：

//父类
class Aniamte{
  constructor(){
    if(new.target == Aniamte){
      throw new Error("本类不能实例化，只能有子类继承");
    }
  }
  //静态方法
  static getval(mgs){
    console.log("父类的static",mgs)
  }
  //普通方法      
  setname(){
    console.log("该方法有子类重写")
  }      
}
//子类
class Dog extends Aniamte{
  constructor(){
    super();//调用此方法,this才用可以用,代表父类的构造函数，返回的却是子类
    //super() ==父类.prototype.constructor.call(子类/this)
    console.log(this)//Dog {}
    this.age = 20;
    }
  //静态方法,super在静态方法中作为对象使用，指向父类；
  static getval(mgs){
    super.getval(mgs)//父类的static niceday
    console.log("子类的static",mgs)//子类的static niceday
  }
  setname(name){
    //普通方法，super作为对象使用，指向父类的原型对象，父类.prototype;
    super.setname();//该方法有子类重写
    this.name = name;
    return this.name
  }
};
Dog.getval("niceday");//静态方法，直接调用
//var parAni = new Aniamte();//报错
var dogs = new Dog();//new 一个示例对象
dogs.setname("DOYS");////DOYS

로그인 후 복사

8.2.原生构造函数的继承，ES5不支持，ES6利用extend可以继承原生构造函数

//ESMAScript的构造函数有以下几种
/* Boolean()
* Unmber()
* String()
* Array()
* Date()
* Function()
* RegExp()
* Error()
* Object()
*/
//实例一：自定义类Myarray 继承了原生的数组的构造函数，拥有原生数组的属性和方法了
class Myarray extends Array{
  constructor(){
  super();
  console.log(this.constructor.name)//Myarray
  }
}
var myarr = new Myarray();
console.log(Object.prototype.toString.call(myarr));//[object Array]
myarr.push(1,2,1);
console.log(myarr.length)//3

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！