小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • 什么是闭包?js闭包的2个最大用途以及注意事项

    什么是闭包?js闭包的2个最大用途以及注意事项

    各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。简单的说,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因……
    199人已经看过了
您的位置:首页 > 前端开发 > Javascript > 原生JS

ES6中类class的定义和用法以及类的继承

分类: 原生JS30个赞

ES6中添加了对类的支持,引入了class关键字

ES6中提供的类实际上只是JS原型模式的包装。现在提供class支持后,对象的创建、继承更加直观。

class类中,可以包含 构造方法、实例方法、静态方法。


类的定义

class A {
    //ES6中的构造方法(类的属性,定义在构造方法中)
    constructor(name) {
        this.name = name;
        this.age = 30;
    }
    //实例方法
    say() {
        console.log('我是A中的实例方法say,我的名字是 '+this.name);
    }
    //静态方法(静态方法与实例方法 同名互不影响)
    static say(){
        console.log("我是A中的静态方法say");
    }
}


直接调用静态方法

A.say();


实例化类 调用实例方法

var a = new A('Tom');

a.say();


类也有原型对象

console.log(A.prototype);

console.log(a.__proto__)



使用类的注意事项:


1.class类中不能直接定义属性,只能定义方法,方法之间不需要也不能使用逗号隔开

2.类只能先定义,再使用,没有提升效果。

3.静态方法只能通过类名直接调用,实例方法只能将实例化成对象后调用。


类的继承

继承是一种新建类的方式,新建的类称为子类,被继承的类称为父类

继承的特性是:子类会遗传父类的属性

继承是类与类之间的关系

注意:父类有构造函数,子类构造函数中,需要调用super() 实现父类的构造函数,否则报错。

为什么要用类继承?

使用类继承可以减少代码的冗余

类继承的特性:

单继承: 一个类只能继承一个类,但是可以子类继承父类,父类再继承另一个类


类继承DEMO

	// 定义子类时,使用extends关键字 继承父类
	// 不需要实例化父类
	//父类
	class A{
		constructor(){
			this.age = 30;
		}
		say(){
			console.log('我是A中的实例方法say');
		}
		static coding(){
			console.log('我是A中的静态方法coding');
		}
	}

	//子类
	class B extends A{
		//子类构造方法
		constructor(){
			//函数形式的super() 表示调用父类的构造方法
			//如果子类定义了构造方法(使用了this),必须先调用super()
			super();

			this.sex = '保密';
		}
		//super.方法() 写法,如果当前方法是实例方法,则调用父类的实例方法
		//如果当前方法是静态方法,则调用父类的静态方法
		//同名的实例方法,子类会覆盖父类
		say(){
			//如果需要同时执行父类的方法
			//需要使用super.父类方法(); 调用
			super.say();
			console.log('我是B中的实例方法say');
		}
		//同名的静态方法,子类会覆盖父类
		//
		static coding(){
			//如果需要同时执行父类的方法
			//需要使用super.父类方法(); 调用
			// super.coding();
			console.log('我是B中的静态方法coding');
		}
	}

	//实例化子类得到子对象
	var obj = new B();
	obj.say();
	console.log(obj.age)

	//调用静态方法
	B.coding();


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> ES6中类class的定义和用法以及类的继承