0

0

es6中什么是类的静态成员

青灯夜游

青灯夜游

发布时间:2022-11-03 18:38:50

|

1509人浏览过

|

来源于php中文网

原创

在es6中,由类直接调用的属性和方法叫静态成员。在类里面对变量、函数加static关键字,那它就是静态成员;静态成员不会被实例化成为新对象的元素。静态成员和实例成员的区别:1、实例成员属于具体的对象,而静态成员为所有对象共享;2、静态成员是通过类名或构造函数访问,实例成员是通过实例化的对象访问。

es6中什么是类的静态成员

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

面向对象

面向对象的主要思想就是把需要解决的问题分解成一个个对象,建立对象不是为了实现一个步骤,而是为了描述每个对象在解决问题中的行为,面向对象的核心是对象

面向对象的优势:

  • 模块化更深,封装性强
  • 更容易实现复杂的业务逻辑
  • 更易维护、易复用、易扩展

面向对象的特征:

  • 封装性: 对象是属性和行为的结合体
  • 多态性: 同一消息被不同的对象接收后 会产生不同的效果
  • 继承性: 子类可以继承父类的信息

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调用父类的构造函数,则调用语句必须作为子类构造函数的第一条语句

调用父类构造函数

同徽B2B电子商务软件 V46
同徽B2B电子商务软件 V46

同徽B2B电子商务软件是国内第一个基于J2EE架构的电子商务商业程序,在国内同类软件中市场占有率位居第一。目前客户分布二十多个省份,三十几个行业,直接和间接服务500万企业,其中包括多家部级单位和世界500强企业:商务部、农业部、德赛集团、宝钢集团、江苏龙华集团、深圳中农股份、中集集团等。 。 网站参数管理运营商可对整个网站进行灵活的配置,适应不同的运营需求网站更新将信息生成静态页面,加快浏览速

下载
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

【相关推荐:javascript视频教程web前端

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

103

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2025.12.24

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

56

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

52

2025.11.27

java多态详细介绍
java多态详细介绍

本专题整合了java多态相关内容,阅读专题下面的文章了解更多详细内容。

15

2025.11.27

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

0

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号