ES6에서는 클래스에서 직접 호출하는 속성과 메서드를 정적 멤버라고 합니다. 클래스의 변수나 함수에 static 키워드를 추가하면 정적 멤버가 됩니다. 정적 멤버는 새 개체의 요소로 인스턴스화되지 않습니다. 정적 멤버와 인스턴스 멤버의 차이점은 다음과 같습니다. 1. 인스턴스 멤버는 특정 개체에 속하지만 정적 멤버는 모든 개체에서 공유됩니다. 2. 정적 멤버는 클래스 이름이나 생성자를 통해 액세스하고 인스턴스 멤버는 인스턴스화된 개체를 통해 액세스합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
객체 지향의 주요 아이디어는 해결해야 할 문제를 객체로 분해하는 것입니다. 객체를 구축하는 것은 단계를 구현하는 것이 아니라 객체의 동작을 설명하는 것입니다. 문제를 해결하는 데 있어 각 객체, 객체지향의 핵심은 객체입니다.
객체 지향의 장점:
객체 지향 기능:
ES6 : ES는 JavaScript의 구문 사양인 ECMAScript의 약어입니다. ES6는 ES5를 확장하고 객체지향 프로그래밍 관련 기술과 클래스 개념을 추가합니다.
Class: 동일한 속성과 동작을 가진 컬렉션을 클래스라고 합니다(클래스는 객체를 추상화한 것입니다). 클래스에 있는 대부분의 데이터는 이 메소드를 통해서만 처리될 수 있습니다. 수업.
Object: 클래스의 인스턴스입니다(클래스의 구체화입니다)
class 키워드: 클래스의
class 类名{// "类名"是一个用户标识符 通常建议首字母大写
属性;
函数;
}ES6에서 생성자()를 사용하여 생성자를 정의합니다. 해당 기능은 개체의 속성(멤버 변수)을 초기화하는 것입니다. 생성자는 필요하지 않습니다. 사용자가 생성자를 정의하지 않으면 시스템은 매개 변수가 없는 기본 생성자를 생성합니다.
函数名([参数]){
函数体语句
}变量名 = function([参数]){
函数体语句
} class Person{
constructor(name,age,sex){// 构造函数 初始化对象的成员
this.name = name;// this指向构造函数新创建的对象
this.age = age;
this.sex = sex;
}
tt = function(){ //普通的成员函数
console.log(this.name);
console.log(this.age);
console.log(this.sex);
}
}
var p = new Person('李相赫',25,'男')// p1是一个对象 通过调用构造函数对p1的三个属性进行了初始化
p.fun(); class Circle{// 定义类Circlie
constructor(r){
this.radius = r;
};
area(){ // 计算圆的面积
var s = Math.PI*this.radius**2;
return s;
};
// 计算圆的周长
CircleLength = function(){
return 2*Math.PI*this.radius;
};
};
var c1 = new Circle(5);
console.log('半径为5的圆的面积='+c1.area());
console.log('半径为5的圆的周长='+c1.Circle_length());결과는 다음과 같습니다.
// 用类实现简单的四则运算
class Number{// 定义类Number
constructor(n1,n2){
this.n1=n1;
this.n2=n2;
};
add(){
var sum = this.n1+this.n2;
return sum;
};
sub(){
var sum1 = this.n1-this.n2;
return sum1;
};
mut(){
var sum2 = this.n1*this.n2;
return sum2;
};
p(){
if(this.n2!=0){
var sum3 = this.n1/this.n2;
return sum3;
}
}
}
var p1 = new Number(12,21);
console.log(p1.add());
console.log(p1.sub());
console.log(p1.mut());
console.log(p1.p());JavaScript에서 상속은두 클래스 간의 관계를 나타내는 데 사용됩니다. 수업 당신 상위 클래스로부터 일부 속성과 메서드를 상속할 수 있으며, 상속 후에 고유한 속성과 메서드를 추가할 수도 있습니다.
문법:
class 子类名 extends 父类名{
函数体语句;
};상속에 대한 참고 사항:
super 키워드
하위 클래스는 상위 클래스의 생성자를 상속할 수 없습니다. 상위 클래스의 생성자를 호출하려면 super 키워드를 사용할 수 있습니다.
**참고:** 상위 클래스의 생성자를 호출하기 위해 하위 클래스의 생성자에서 super를 사용하는 경우 호출 문은 하위 클래스 생성자의 첫 번째 문이어야 합니다.
상위 클래스의 생성자를 호출합니다.
super([参数])
일반 멤버 함수 호출
super.函数名([参数])
메소드 재정의
하위 클래스에 정의된 함수와 상위 클래스의 함수 이름이 같은 경우 하위 클래스 함수가 상위 클래스의 함수를 재정의하고, 일반 멤버 동일한 이름을 가진 상위 클래스의 함수를 하위 클래스에서 호출할 수 있습니다.
class Father{ //父类(基类或超类)
constructor(type,color){
this.type = type;
this.color = color;
}
money(){
console.log(100);
}
show(){
console.log('类型：'+this.type);
console.log('颜色：'+this.color);
}
}
class Son extends Father{ //Son是子类(又称派生类)
constructor(type,color,weight){
super(type,color); //调用父类的构造函数 要放在首位
this.weight = weight;
};
show(){
super.show();// 调用父类的普通成员函数
console.log('重量：'+this.weight);
};
other(){
return '子类的其他方法';
};
};
var s1 = new Son('iPhone 12','黑色','3000g');//s1为子类的实例
s1.show();
console.log(s1.other());
정적 멤버 를 해결하려면: 클래스 이름 또는 생성자
인스턴스를 통해 액세스되는 멤버 멤버 : 인스턴스 개체 를 통해 액세스되는 멤버를 인스턴스 멤버라고 합니다
차이:
function Student(name,age,sex){
Student.school = '西安邮电大学';// school是静态成员
this.name = name;
this.age = age;
this.sex = sex;// name age sex都是实例成员
this.show = function(){
console.log('姓名：'+this.name);
console.log('年龄：'+this.age);
console.log('性别：'+this.sex);
};
};
var f = new Student('李相赫',23,'男');
f.show();
console.log(Student.school);// 西安邮电大学
console.log(f.school);// undefined class Foo{
constructor(){
this.color = '红色';// color是实例成员
}
}
Foo.prop = 45;// prop是静态成员
var f1 = new Foo();
console.log('静态属性：'+Foo.prop);// 45
console.log(f1.prop);// undefinedstatic 키워드
를 사용하여 정적 속성을 정의하세요 class Foo{
static prop = 45; //prop是静态成员
constructor(){
this.color = '红色';
}
}
var f2 = new Foo();
console.log('静态属性：'+Foo.prop);// 45
console.log(f2.prop);// undefined클래스와 생성자의 차이점
클래스의 멤버 메서드는 클래스를 사용하여 객체를 생성한 후 객체의 메소드는 모두 동일한 메소드를 참조하므로 메모리 공간을 절약할 수 있습니다. class Person {
sing(){
console.log('hello');
}
}
var p1 = new Person();
var p2 = new Person();
console.log(p1.sing === p2.sing); // 输出结果：trueweb front-end
】위 내용은 es6에서 클래스의 정적 멤버는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
