es6类的静态成员是什么
本篇内容主要讲解“es6类的静态成员是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6类的静态成员是什么”吧!
为东港等地区用户提供了全套网页设计制作服务,及东港网站建设行业解决方案。主营业务为成都网站建设、做网站、东港网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
在es6中,由类直接调用的属性和方法叫静态成员。在类里面对变量、函数加static关键字,那它就是静态成员;静态成员不会被实例化成为新对象的元素。静态成员和实例成员的区别:1、实例成员属于具体的对象,而静态成员为所有对象共享;2、静态成员是通过类名或构造函数访问,实例成员是通过实例化的对象访问。
面向对象
面向对象的主要思想就是把需要解决的问题分解成一个个对象,建立对象不是为了实现一个步骤,而是为了描述每个对象在解决问题中的行为,面向对象的核心是对象。
面向对象的优势:
模块化更深,封装性强
更容易实现复杂的业务逻辑
更易维护、易复用、易扩展
面向对象的特征:
封装性: 对象是属性和行为的结合体
多态性: 同一消息被不同的对象接收后 会产生不同的效果
继承性: 子类可以继承父类的信息
ES6面向对象语法
ES6:ES是ECMAScript的简写,它是JavaScript的语法规范。ES6是在ES5基础上扩展,增加了面向对象编程的相关技术以及类的概念。
类和对象
类:具有相同属性和行为的集合称为类(类是对象的抽象),类中的大多数数据只能用本类的方法进行处理。
对象:是类的实例(是类的具体化)
class关键字:用来定义类的
class 类名{// "类名"是一个用户标识符 通常建议首字母大写
属性;
函数;
}
构造函数
在ES6中使用constructor()来定义构造函数,作用是初始化对象的属性(成员变量),构造函数不是必须的,若用户没有定义构造函数,系统会生成一个默认的、无参的构造函数。
普通的成员函数
函数名([参数]){
函数体语句
}
变量名 = 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());
ES6中类的继承
在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());
静态成员和实例成员
静态成员:通过类名或构造函数访问的成员
实例成员:通过实例对象访问的成员称为实例成员
区别:
实例成员属于具体的对象,而静态成员为所有对象共享
静态成员是通过类名或构造函数访问,实例成员是通过实例化的对象访问
在ES5中定义静态属性
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
在ES6中静态属性定义
1、先创建类
2、在类的外部定义静态属性:类名.静态属性名
class Foo{
constructor(){
this.color = '红色';// color是实例成员
}
}
Foo.prop = 45;// prop是静态成员
var f1 = new Foo();
console.log('静态属性:'+Foo.prop);// 45
console.log(f1.prop);// undefined
在ES7中静态属性定义
在类定义时 使用static关键字定义静态属性
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); // 输出结果:true
到此,相信大家对“es6类的静态成员是什么”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网页题目:es6类的静态成员是什么
网站路径:http://pwwzsj.com/article/psjpec.html