我要评论一、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类的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持代码网。
发表评论