11(class)面向对象与继承

最新推荐文章于 2024-05-24 13:39:19 发布

七色的天空

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量321

点赞数 8

分类专栏： 09_ES6 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/q506174602/article/details/136491309

版权

09_ES6 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>面向对象和继承</title>
</head>
<body>
	<script type="text/javascript">
		// es6
		/*
		ES6 引入了 类 的概念,创建的每一个class类,都会有一个constructor()方法,这是一个私有的属性方法,es6的class属于一种 '语法糖'所以只是写法更加优雅,更加像面向对象编程,其思想和 ES5是一致的
		*/
		class Animal {
			constructor(name) {
				// constructor 方法里面的this指向的是 被创建的实例对象
				this.name = name;
			}

			showName() {
				// console.log('动物的名字是' + this.name);
				console.log(`动物的名字是${this.name}`);
			}
			showDesc() {
				console.log('你们是真的狗');
			}
			// 等同于: Animal.prototype = {
			//		showName() {},
			//		push() {}	
			// }
		}
		let dog1 = new Animal('金毛');
		console.log(dog1);
		console.log(typeof dog1);//object
		console.log(typeof Animal);//function 由此可以印证js中的class只是一个语法糖，并非真正意义上的“类”

		// 子类继承父类, 会同时继承父类的私有属性和方法
		// class 可以通过 extends 关键字 来实现继承
		class Dog extends Animal {
			constructor(name, color) {
				// super() 使用extends 必须使用super()来调用父类的构造方法
				// es6要求子类的构造函数必须执行一次 super函数,否则会报错
				// 在子类的构造函数中,只有调用了 super之后,
				// 才可以使用this关键字,否则会报错,这是因为子类实例的构建,是基于父类实例,只有super方法才能调用父类实例
				super(name);//调用父类构造方法
				this.color = color;
			}
			showName() {
				super.showName();
				super.showDesc();
				// console.log(`动物的名字是${this.name}, 颜色是${this.color}`);
				return '等价于藏獒';
			}
		}

		let dog2 = new Dog('金毛', 'green');
		console.log(dog2);
		console.log(dog2.showName());
	</script>
</body>
</html>

上述运行结果：