对es6中class的理解

ES6提供了更接近传统语言的写法,引入Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。

// 定义类
class Point {
	constructor(x, y) {
		this.x = x;
		this.y = y;
	}
	toString() {
		return '(' + this.x + ',' + this.y + ')';
	}
}

传统的javascript中只有对象,没有类的概念。它是基于原型的面向对象语言。原型对象的特点就是讲自身的属性共享给新对象。
如果要生成一个对象实例,需要先定义一个构造函数,然后通过new操作符来完成。构造函数示例:

// 函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数)
function Person(name, age) {
	this.name = name;
	this.age = age;
}
Person.prototype.say = function() {
	return "我的名字叫" + this.name + "今年" + this.age + "岁了";
}
var obj = new Person("laotie", 88);		// 通过构造函数创建对象,必须使用new运算符
console.log(obj.say());		// 饿的名字叫laotie今年88岁了

构造函数生成示例的执行过程:

1. 当使用了构造函数,并且new构造函数(),后台会隐式执行new Object()创建对象;
2. 将构造函数的作用域给新对象,(即new Object()创建出的对象),而函数体内的this就代表new Object()出来的对象。
3. 执行构造函数的代码。
4. 返回新对象(后台直接返回)

ES6引入了Class(类)这个概念,通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰,更像是一种面向对象的语言。如果将之前的代码改为ES6的写法就会是这个样子:

class Person{		// 定义了一个名字为Person的类
	constructor(name, age) {		// constructor是一个构造方法,用来接收参数
			this.name = name;		// this代表的是实例对象
			this.age = age;
	}
	say() {		// 这是一个类的方法,注意千万不要加上function
			return "我的名字叫" + this.name + "今年" + this.age + "岁了";
	}
}
var obj = new Person("laotie", 88);
console.log(obj.say());		// 我的名字叫laotie今年88岁了

由下面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法!

console.log(typeof Person);		// function
console.log(Person===Person.prototype.constructor);	// true

以下代码说明构造函数的prototype属性,在ES6的类中依然存在着。
console.log(Person.prototype); // 输出的结果是一个对象
实际上类的所有方法都定义在类的prototype属性上。代码证明如下:

Person.prototype.say = function() {		// 定义与类中相同名字的方法。成功实现了覆盖!
		return "我是来证明的,你叫" + this.name + "今年" + this.age + "岁了";
}
var obj = new Person("laotie", 88);
console.log(obj.say());		// 我是来证明的,你交laotie今年88岁了

当然也可以通过prototype属性对类添加方法。如下:

Person.prototype.addFn = function() {
	return "我是通过prototype"新增加的方法,名字叫addFn";
}
var obj = new Person("laotie", 88);
console.log(obj.addFn());	// 我是通过prototype新增加的方法,名字叫addFn

还可以通过Object.assign方法来为对象动态增加方法

Object.assign(Person.prototype, {
	getName: function() {
			return this.name;
	},
	getAge: function() {
			return this.age;
	}
})
var obj = new Person("laotie", 88);
console.log(obj.getName());		// laotie
console.log(obj.getAge());		// 88

constructor方法是类的构造函数的默认方法,通过new命令生成对象实例时,自动调用该方法。

class Box {
	constructor() {
		console.log("啦啦啦,今天天气好晴朗");		// 当实例化对象是该行代码会执行。
	}
}
var obj = new Box();

constructor方法如果没有显示定义,会隐式生成一个constructor方法。所以即使你没有添加构造函数,构造函数也是存在的。constructor方法默认返回实例对象this,但是也可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例。

class Desk {
	constructor() {
		this.xixi = "我是一只小小小小鸟!哦";
	}
}
class Box {
	constructor() {
		return new Desk();		// 这里没有用this,直接返回一个全新的对象
	}
}
var obj = new Box();
console.log(obj.xixi);		// 我是一只小小小小鸟!哦

constructor中定义的属性可以称为实例属性(即定义在this对象上),constructor外声明的属性都是定义在原型上的,可以称为原型属性(即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值,true说明是实例属性,false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

class Box {
	constructor(num1, num2) {
		this.num1 = num1;
		this.num2 = num2;
	}
	sum() {
		return num1 + num2;
	}
}
var box = new Box(12, 88);
console.log(box.hasOwnProperty("num1"));	// true
console.log(box.hasOwnProperty("num2"));	// true
console.log(box.hasOwnProperty("sum"));		// false
console.log("num1" in box);	// true
console.log("num2" in box);	// true
console.log("sum" in box);		// true
console.log("say" in box);		// false

类的所有实例共享一个原型对象,它们的原型都是Person.prototype,所以proto属性是相等的

class Box {
	constructor(num1, num2) {
		this.num1 = num1;
		this.num2 = num2;
	}
	sum() {
		return num1 + num2;
	}
}
// box1与box2都是Box的实例。它们的__proto__都指向Box的prototype
var box1 = new Box(12, 88);
var box2 = new Box(40, 60);
console.log(box1.__proto__ === box2.__proto__);	// true

由此,也可以通过proto来为类增加方法。使用实例的proto属性改写原型,会改变Class的原始定义,影响到所有实例,所以不推荐使用!

class Box {
	constructor(num1, num2) {
		this.num1 = num1;
		this.num2 = num2;
	}
	sum() {
		return num1 + num2;
	}
}
var box1 = new Box(12, 88);
var box2 = new Box(40, 60);
box1.__proto__.sub = function() {
	return this.num2 - this.num1;
}
console.log(box1.sub());		// 76
console.log(box2.sub());		// 20

class不存在变量提升,所以需要先定义在使用。因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,ES5存在变量提升,可以先使用,然后定义。

// ES5可以先使用再定义,存在变量提升
new A();
function A(){}
// ES6不能先使用再定义,不存在变量提升 会报错
new B();		// B is not defined
class B {}
继承

继承是面向对象中一个比较核心的概念。

class Cucurbit {
	constructor(name, color) {
		console.log("farther")
		this.name = name;
		this.color = color;
	}
	say() {
		console.log("我的名字叫" + this.name + "我是" + this.color + "颜色的");
	}
}
class First extends Cucurbit {
	constructor(name, color) {
		super(name, color);		// 调用父类的constructor(name, color)
	}
	say() {
		console.log("我是child");
		super.say();
	}
}
var wa = new First("大娃", "红色");
wa.say();

输出:

farther
我是child
我的名字叫大娃我是红色颜色的

上面代码中,自雷的constructor方法和say方法中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。
子类必须在constructor方法中调用super方法,之后才能使用this关键字,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super方法,子类就得不到this对象。在这一点上ES5的继承与ES6正好相反,ES5先创建自己的this对象然后再将父类的属性方法添加到自己的this当中。
如果子类First没有显式的定义constructor,那么下面的代码将被默认添加。换言之,如果constructor函数中只有super的话,该constructor函数可以省略。

constructor(name, color) {
	super(name, color);		// 调用父类的constructor(name, color)
}

总结super在子类中一般有三种作用

1. 作为父类的构造函数调用(已说明)
2. 在普通方法中,作为父类的实例调用(已说明)
3. 在静态方法中,作为父类调用(下篇文章会做介绍)

实例:
创建一个tab切换,页面中有三个按钮内容分别为“中”,“日”,“韩”。要求点击按钮,按钮以及切换的内容的背景颜色分别会变为红,黄,绿。

首先创建一个tab.html页面,内容为:

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>切换</title>
	<style>
		#country input {
			margin: 10px;
			padding: 10px;
		}
		#country div {
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
<div id="country">
	<input type="button" value="中">
    <input type="button" value="日">
    <input type="button" value="韩">
    <div>中国</div>
    <div>日本</div>
    <div>韩国</div>
</div>
</body>
<script src="tag.js"></script>
<script>
    new Tag("#country");
</script>
</html>

然后创建一个tag.js内容为:

class Tag {
	constructor(id) {
		this.id = document.querySelector(id);
		this.btn = this.id.querySelectorAll("input");
		this.div = this.id.querySelectorAll("div");
		this.colorArr = ["red", 'yellow', "green"];
		this.index = 0;
		this.init();
	}
	init() {		// 初始化
		this.hide();
		this.show();
		// 给按钮增加事件
		for(let i = 0; i < this.btn.length; i++) {
			this.btn[i].onclick = function() {
				this.index = i;
				this.hide();
				this.show();
			}.bind(this)
		}
	}
	hide() {		// 隐藏DIV,去除按钮背景色
		for(var i = 0; i < this.btn.length; i++) {
			this.btn[i].style.background = null;
			this.div[i].style.display = "none";
		}
	}
	show() {		// 显示指定的DIV,按钮与DIN的背景颜色进行设置
			this.div[this.index].style.display = "block";		// 将DIV进行显示
			// 按钮与DIV的背景颜色进行设置
			this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
	}
}

在上面的切换示例基础上,再加一个模块,该切换需要在原来可点击的基础上实现自动切换功能,以及点击页面空白区域也可实现切换。
将tag.html页面修改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换</title>
    <style>
        #country input,#news input{
            margin:10px;
            padding:10px;
        }
        #country div,#news div{
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
<div id="country">
    <input type="button" value="中">
    <input type="button" value="日">
    <input type="button" value="韩">
    <div>中国</div>
    <div>日本</div>
    <div>韩国</div>
</div>
<div id="news">
    <input type="button" value="娱乐">
    <input type="button" value="财经">
    <input type="button" value="体育">
    <div>娱乐</div>
    <div>财经</div>
    <div>体育</div>
</div>

</body>
<script src="tag.js"></script>
<script>
    new Tag({
        id:"#country",
        index:1,
        colorArr:["red","green","blue"]
    });
    new autoTag({
        id:"#news",
        index:2,
        colorArr:["black","pink","purple"]
    });
</script>
</html>

将tag.js修改为:

class Tag {
	constructor(obj) {
		this.id = document.querySelector(obj.id);
		this.btn = this.id.querySelectorAll("input");
		this.div = this.id.querySelectorAll("div");
		this.colorArr = obj.colorArr;
		this.index = obj.index;		// 显示元素的下标。
		this.init();
	}
	init() {		// 初始化
		this.hide();
		this.show();
		var that = this;
		// 给按钮增加事件
		for(let i = 0; i < this.btn.length; i++) {
			this.btn[i].onclick = function(ev) {
				this.index = i;
				this.hide();
				this.show();
				ev.cancelBubble = true;
			}.bind(this)
		}
	}
	hide() {		// 隐藏DIV,去除按钮背景色
		for(var i = 0; i < this.btn.length; i++) {
			this.btn[i].style.background = null;
			this.div[i].style.display = "none";
		}
	}
	show() {		// 显示指定的DIV,按钮与DIV的背景颜色进行设置
			this.div[this.index].style.display = "block";		// 将DIV进行显示
			// 按钮与DIV的背景颜色进行设置
			this.div[this.index].style.background = this.btn[this.index].style.background = this.colorArr[this.index];
	}
}
class autoTag extends Tag{
	constructor(id) {
		super(id);
		this.autoInit();
	}
	autoInit() {
		document.body.onclick = this.change.bind(this);
		setInerval(this.change.bind(this), 5000)
	}
	change() {
		this.index += 1;
		if(this.index >= this.btn.length)
			this.index=0;
		this.hide();
		this.show();
	}
}
静态方法

不需要实例化类,即可直接通过该类来调用的方法,即称之为“静态方法”。将类中的方法设为静态方法也很简单,在方法前加上static关键字即可。这样该方法就不会被实例继承!

class Box {
	static a() {
		return "我是Box类中的,实例方法,无须实例化,可直接调用!"
	}
}
// 通过类名直接调用
console.log(Box.a());		// 我是Box类中的,实例方法,无须实例化,可直接调用!

上面的代码一,类Box的a方法前有static关键字,表名该方法是一个静态方法,可以直接在Box类上调用。静态方法只能在静态方法中调用,不能再实例方法中调用。

class Box {
	static a() {
		return "我只允许被静态方法a"
		console.log(this.a());
	}
}
Box.b();	// 输出:我只允许被静态方法调用

通过实例方法来调用静态方法会报错:

class Box {
	static a() {
		return "我只允许被静态方法调用哦"
	}
	b() {
		console.log(this.a());		// TypeError: this.a is not a function
	}
}
var obj = new Box()
obj.b();

父类的静态方法,可以被子类继承:

class Box {
	static a() {		// 父类Box的静态方法
			return "我是父类的静态方法a";
	}
}
class Desk extends Box {}
// 子类Desk可以直接调用父类的静态方法a
console.log(Desk.a());

倘若想通过子类的静态方法调用父类的静态方法,需要从super对象上调用:

class Box {
	static a() {
		return "我是通过super来调取出来的";
	}
}
class Desk extends Box {
	static a() {
		return super.a();
	}
}
console.log(Desk.a());

静态属性
静态属性指的是Class本身的属性,即Class.propname,而不是定义在实例对象(this)上的属性。

class Box {
	constructor() {
		this.name = "实例属性"
	}
}
Box.prop1 = "静态属性1";
Box.prop2 = "静态属性2";
console.log(Box.prop1, Box.prop2);		// 静态属性1 静态属性2
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值