JavaScript 的 class

JavaScript中 class与构造函数类似,但是规定了额外的效果,如继承、多态、封装

传统的 JS 只有 对象 的概念,没有class类的概念,因为 JS 是基于原型的面向对象语言,原型对象特点就是将属性全部共享给新对象

但 ES6 引入了 class 类这个概念,通过 class 关键字可以定义类,这就是更符合我们平时所理解的面向对象的语言

// 定义一个名为Person的类
class Person{ 
// 构造函数,用来接受参数
constructor(x,y){
this.x = x; // this代表的是实例对象
this.y = y;
}
todoSome(){ //这是个类的方法,不需要加function,有多个方法也不用逗号隔开
alert(this.x + “的年龄是” +this.y+”岁”);
 }
}

constructor 构造函数

该 函数 可以接收传递过来的参数,同时返回实例对象。在类中该函数无需用 function 声明

constructor 函数 只要 new 生成实例时,就会自动调用到这个函数。( 即使我们不写constructor ,系统也会自动生成这个函数 )

class Human{
    // 该 函数 可以接收传递过来的参数
    constructor(user){
        this.user=user;
    }
}

extends 继承

继承类的声明,使用 extends 来实现 子类继承父类 的属性 (需要super()) 与方法

super() 可让子类调用父类的构造函数成员,实现属性继承;

// 定义父类
class Human{
    constructor(user){
        this.user=user;
    }
    introduce(){
        console.log(‘该用户名字为’+this.user);
    }
}
//类的继承
class Student extends Human{
    constructor(user,score){
        // 调用父类构造函数中的成员,可写多个成员
        super(user);
        this.score=score;
    }
    // 类方法的复写
    introduce(){
        console.log(‘该学生名字为’+this.user+’。成绩为’+this.score+’分’);
    }
}

new 类的实例化

当类定义完成后,需要实例化才能使用这些方法与属性,在js中 class 类似 于模板的存在。需要实例化 赋值给 变量 后,该变量 将继承 目标类的所有属性和方法

// 实例化 teacher 类并赋值给 变量 smm
let smm = new Teacher(‘屎猫’,’JS’);
// 实例化 teacher 类并赋值给 变量 aipo
let aipo = new Student(‘AIpo’,50);
//调用 类方法
smm.introduce();
aipo.introduce();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。...
    emmet7life阅读 351评论 0 0
  • 面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是JavaS...
    又菜又爱分享的小肖阅读 1,251评论 0 0
  • Class 学过Java的小伙伴会发现, 这个class和Java里的class基本语法并没有什么区别... 下面...
    刘翾阅读 964评论 2 2
  • 旧js定义一种类型需要构造函数和原型对象 构造函数和原型对象是分开的 定义一种类型使用class{}包裹构造函数和...
    呗_bei阅读 126评论 0 0
  • ES6中的class基于原型继承创建类。 (1)class只是原型继承的语法糖 相当于: 注: class定义中...
    何幻阅读 246评论 0 0