ES6基础语法之class类介绍
更新时间：2022年05月02日 13:41:27 作者：農碼一生
这篇文章介绍了ES6中class类的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、class基本语法
JavaScript 语言中,编写一个学生类,代码如下：（prototype可以个对象添加属性和方法）
function Student(stuno,stuname)
{
this.stuno = stuno;
this.stuname = stuname;
}
Student.prototype.stusex = "";
Student.prototype.sayHi = function()
{
console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno+",性别:"+this.stusex);
}
var stu = new Student("001","孙悟空");
stu.stusex = "男";
//或
// var stu = new Student();
// stu.stuno = "001";
// stu.stuname = "孙悟空";
// stu.stusex = "男";
stu.sayHi(); //大家好,我是孙悟空,我的学号是001,性别:男ES6提供了更接近传统语言的写法,引入了Class这个概念：
constructor为构造函数,当创建对象的时候自动调用：
class Student
{
constructor(stuno,stuname) {
this.stuno = stuno;
this.stuname = stuname;
}
sayHi()
{
console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
}
}
var stu = new Student("001","孙悟空");
//或
// var stu = new Student();
// stu.stuno = "001";
// stu.stuname = "孙悟空";
stu.sayHi(); //大家好,我是孙悟空,我的学号是001注意:类的声明第一行除了class Student外,还可以如下写法:
let Student = class let Student = class Student
二、类的属性和方法
实例属性和实例方法：
class Student
{
stuno = "";
stuname = "";
sayHi() //此处方法有的地方称为原型方法
{
console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
}
}
var stu = new Student();
stu.stuno = "001";
stu.stuname = "孙悟空";
stu.sayHi();静态属性和静态方法：
class Student
{
stuno = "";
stuname = "";
static proName = ""; //专业名称
static proIntroduce()
{
console.log("专业名称:"+Student.proName);
}
sayHi()
{
console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
}
}
Student.proName = "计算机";
Student.proIntroduce();三、实例方法的两种写法
方案一：（又称原型方法）
class Student
{
sayHi()
{
console.log("hi!");
}
}
let stu = new Student();
stu.sayHi();等同于ES5中：
function Student(){ }
Student.prototype.sayHi=function()
{
console.log("hi!");
}
var stu = new Student();
stu.sayHi();方案二：
class Student
{
constructor()
{
this.sayHi = function()
{
console.log("hi");
}
}
}
let stu = new Student();
stu.sayHi();等同于ES5中：
function Student()
{
this.sayHi = function()
{
console.log("hi");
}
}
var stu = new Student();
stu.sayHi();当两个方案冲突的时候,constructor里面的函数会覆盖外面的函数：
class Student
{
sayHi() //等同Student.prototype.sayHi=function(){...}
{
console.log("hi!");
}
constructor()
{
this.sayHi = function() //等同在function内部定义
{
console.log("hello!");
}
}
}
let stu = new Student();
stu.sayHi(); //hello!等同于ES5中：
function Student()
{
this.sayHi = function()
{
console.log("hello!");
}
}
Student.prototype.sayHi=function()
{
console.log("hi!");
}
var stu = new Student();
stu.sayHi(); //hello!四、class属性封装
在类的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class Student
{
get stuAge(){
return this._stuAge;
}
set stuAge(age)
{
if(age >= 18 && age <= 120)
this._stuAge = age;
else
{
this._stuAge = 18;
console.log("年龄有错误,设置默认值18!");
}
}
}
let stu = new Student();
stu.stuAge = 17; //年龄有错误,设置默认值18!
console.log(stu.stuAge); //18
//------------------------------------------------------------------------------
//注意:
//(1)在get和set后的属性名不能和函数里的取值和设置值的变量名相同(stuAge和_stuAge)
//(2)getter不可单独出现
//(3)getter与setter必须同级出现(不能一个在父类,一个在子类)五、继承
通过 extends 实现类的继承。
//通过 extends 实现类的继承。
class People //父类
{
name = "";
sex = "";
age = 0;
sayHi()
{
console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age}`);
}
}
class Student extends People //子类继承父类,拥有父类的属性和方法
{
}
class Teacher extends People //子类继承父类,拥有父类的属性和方法
{
salary = 0; //子类在父类基础上扩展一个属性
sayHi() //子类在父类基础上重写父类方法
{
console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age},月薪:${this.salary}`);
}
}
let stu = new Student();
stu.name = "孙悟空";
stu.sex = "男";
stu.age = 500;
stu.sayHi(); //姓名:孙悟空,性别:男,年龄:500
let tc = new Teacher();
tc.name = "唐僧";
tc.sex = "男";
tc.age = 100;
tc.salary = 6000;
tc.sayHi(); //姓名:唐僧,性别:男,年龄:100,月薪:6000六、继承和构造方法
子类通过super()调用父类构造方法：
class People
{
constructor(name,sex,age)
{
this.name = name;
this.sex = sex;
this.age = age;
}
sayHi()
{
console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age}`);
}
}
class Student extends People
{
constructor(name,sex,age)
{
super(name,sex,age);
}
}
class Teacher extends People
{
constructor(name,sex,age,salary)
{
super(name,sex,age);
this.salary = salary;
}
sayHi()
{
console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age},月薪:${this.salary}`);
}
}
let stu = new Student("孙悟空","男",500);
stu.sayHi(); //姓名:孙悟空,性别:男,年龄:500
let tc = new Teacher("唐僧","男",100,6000);
tc.sayHi(); //姓名:唐僧,性别:男,年龄:100,月薪:6000
//------------------------------------------------
//注意:
//(1)子类 constructor 方法中必须有 super ，且必须出现在 this 之前。
//(2)调用父类构造函数,只能出现在子类的构造函数。
// 例如在sayHi()中调用super就会报错;到此这篇关于ES6基础语法之class类的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
DOM精简教程...2006-10-10
本文没有详细描述这些新特性，因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码，他可以让你快速了解这个新的javascript规范2017-03-03
这篇文章主要介绍了多个javascript闭包入门示例，理解了这几个例子，对于闭包，应该可以算是入门了,需要的朋友可以参考下2014-04-04
有时候由于我们编写js的时候不规范，造成js加密后IE会有脚本错误提示，那么我们应该如何避免这种现象产生呢？2014-11-11
这篇文章主要介绍了通过实例了解js函数中参数的传递，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
Ruffy javascript 学习笔记2009-11-11
这篇文章主要介绍了ECMAscript 变量作用域，通过使用var操作符声明和未使用var操作符声明两种情景做出了解释，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
本片文章给大家分享一下作者学习Javascript装饰设计模式后的心得以及要点分享，有兴趣的朋友参考下。2018-02-02
Javascript实例教程(19) 使用HoTMetal(4)
Javascript实例教程(19) 使用HoTMetal(4)...2006-12-12
javascript中没有块级作用域,取而代之的javascript使用的是函数作用域,下面使用示例学习一下js作用域的使用方法2014-01-01
最新评论