106-(面向对象)继承的实现

最新推荐文章于 2024-07-28 20:27:10 发布

七色的天空

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量23

点赞数

分类专栏： 04_JavaScript 文章标签： javascript 原型模式前端

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

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>继承</title>
</head>
<body>
	<script>
		/*
		实现继承的方式: 
		一.原型链继承
		二.构造函数继承(call)
		 */
		


		// 一.原型链继承
		function Parent1() {
			this.lastName = '张';
			this.cars = ['玛莎拉蒂', '卡宴', 'POLO'];

			this.getName = function() {

			}
		}
		Parent1.prototype.getMoney = function() {
			return "没有快捷方式, 自己想";
		}
		function Children1() {
			this.edu = "985";
			// this.lastName = "李"; 如果自己也有这个属性, 则先显示自己的, 没有的时候再去找prototype 的
		}

		Children1.prototype = new Parent1(); // 
		var children11 = new Children1();
		var children12 = new Children1();
		console.log(children11.getMoney());
		children11.cars.push('雷克萨斯'); // 大哥自己买了辆 雷克萨斯

		console.log(children11.cars); // ['玛莎拉蒂', '卡宴', 'POLO', '雷克萨斯']
		console.log(children12.cars); // 但是老二也拿到了这两新车 ['玛莎拉蒂', '卡宴', 'POLO', '雷克萨斯']
		// 因为children 1 2  这两个实例用的是同一个原型对象, 内存空间是同一个, 一个变则都变
		// 这是原型链继承的一个缺点
		
		console.log('========');
		// 二.构造函数继承(call)
		function Parent2() {

			console.log('父类中的this---1', this);
			this.lastName = '张';
			this.cars = ['玛莎拉蒂', '卡宴', 'POLO'];
			console.log('父类中的this---2', this);
		}
		Parent2.prototype.getMoney = function() {
			return "没有快捷方式, 自己想 Parent2";
		}
		
		Parent2.prototype.class = '6班';
		function Children2() {
			console.log('子类中的this---', this);
			// this.lastName = '李';
			Parent2.call(this);
			// console.log('继承完了-----1', this);
			this.edu = "985";
			// var aa = {a: 10};
			// Parent2.call(aa);
			// console.log('a-----', aa);
			// Parent2.call(Children2);
			console.log('继承完了-----2', this);
			
		}
		var children2 = new Children2();
		console.log('最终的children2-----', children2);
		console.log(new Parent2());
		// 总结: 通过call , 确实把父类的lastName 和 cars 继承来了,但是 父类原型中自定义的方法, 子类无法继承.
		
		console.log('============================');
		// 第三种组合继承
		function Parent3() {
			console.log('Parent3333333333');
			this.lastName = '张';
			this.cars = ['玛莎拉蒂', '卡宴', 'POLO'];
		}
		Parent3.prototype.getMoney = function() {
			return "没有快捷方式, 自己想";
		}

		function Children3() {
			Parent3.call(this);

			this.edu = "985";
		}

		// 第一次在调用父类Parent3()
		Children3.prototype = new Parent3();
		Children3.prototype.constructor = Children3;


		var children31 = new Children3();
		// var children32 = new Children3();
		// children31.cars.push('凯德拉克');
		// console.log(children32);
		// Parent3 会执行2次
		// 第一次是改变 Children3的prototype的时候
		// 第二次是 通过call 调用Parent3
		// 改变this指向的时候, Parnet3多构造一次,就多一次性能消耗, 这也不是很完美

		console.log('============================');
		function Parent4() {
			console.log('Parent44444444');
			this.lastName = '张';
			this.cars = ['玛莎拉蒂', '卡宴', 'POLO'];
		}
		Parent4.prototype.getMoney = function() {
			return "赚钱没有快捷方式, 自己想.  Parent444";
		}

		function Children4() {
			Parent4.call(this);
			this.edu = "985";
		}
		Children4.prototype = Object.create(Parent4.prototype);
		Children4.prototype.constructor = Children4;

		Children4.prototype.selfMethod = function() {

		}
		var children41 = new Children4();
		var children42 = new Children4();
		var parent4 = new Parent4();
		// children41.cars.push('路虎');

		console.log(children42);
		console.log(parent4);
		console.log({});
	</script>

</body>
</html>

上述运行结果：