js构造继承

最新推荐文章于 2022-10-26 10:55:46 发布

红豌豆

最新推荐文章于 2022-10-26 10:55:46 发布

阅读量471

点赞数

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

本文链接：https://blog.csdn.net/qq_64353584/article/details/123096486

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中的构造继承，包括原型链继承、构造方法继承、实例继承、拷贝继承和组合继承等方法。这些继承方式允许将相同部分提取成基类，提高代码复用。虽然继承带来了实现简单、调用父类属性和函数的优点，但也存在父类属性暴露、不安全的缺点。

摘要由CSDN通过智能技术生成

继承关系不光存在于java代码中，js中也会有继承，将相同的部分提取出来，组建一个类也成为函数，可以称之为“”基类，通俗一点也叫父类。

继承
原型链继承      将实例作为子类的原型
构造方法继承       使用父类的构造方法来增强子类类型的属性，如果使用到原型，则子类可以调用父类的原型方法
实例继承      将父类实例作为子类对象的返回
拷贝继承      拷贝父类的属性到子类
组合继承      父类作为子类的原型可以实现父类函数的重用

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script>
	function An(name){//定义一个父类
		this.name=name||'旺财'; //初始化属性方法;
		this.sleep=function(){
			console.log(this.name+'喜欢和主任玩耍！'); //实力方法
		};
	};
	An.prototype.run=function(sport){//原型方法
		console.log('喜欢和主人打'+sport);
	};
	An.prototype.eat=function(foot){//原型方法
		alert('喜欢吃草莓'+foot);
	};
	function Dog(){
		//An.call(this); //this-->new Dog();
		this.age = 12;
	}
	Dog.prototype.color='黄色';
	Dog.prototype = new An;
	Dog.prototype.name='大黑'; //通过原型链修改name的值
	// Dog.prototype.color=function(){
	// 	console.log(this.name+'毛色是黄色的');
	// }
	var wangCai = new Dog();
	console.log(wangCai.name);
	console.log(wangCai.run('爬山')); //这是父类的函数
	alert(wangCai.eat('带肉的'));//undefined 子类实例化后不可以调用父类的原型的函数方法
	console.log(wangCai.sleep());
	console.log(wangCai instanceof An);//ture
	console.log(wangCai instanceof Dog); //ture
	//来自原型对象的属性被所有实例共享
	console.log(wangCai.age);
	var an = new An();
	console.log(an.age);//undefined
	console.log(an.color);//undefined
	</script>
</head>
<body>
	
</body>
</html>

优点

1.简单，利于实现
2.可以调用父类的属性和原型函数

缺点

不安全父类属性和方法都会暴露在子类面前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function An(name){
			this.name=name||'Tome';
			this.sleep=function(){//实例 
				console.log(this.name+'正在睡觉');
				//alert(this.name+'正在睡觉');
			}
		};
		An.prototype.eat=function(){
			console.log(this.name+'喜欢吃鱼');
		};
		function Dog(name){
			// An.call(this,name);
			An.call(this);
			this.name=name||'旺财';
			// alert(this.name);
		}
		//Dog.prototype=An.prototype;
		var dog = new Dog();
		console.log(dog.name);
		//console.log(dog.sleep());
		//console.log(dog.eat());
		dog.sleep()
		//dog.eat(); //必须	Dog.prototype=An.prototype;
		console.log(dog instanceof An);//有Dog.prototype=An.prototype;为ture 否则false
		console.log(dog instanceof Dog); //ture
		</script>
	</head>
	<body>
	</body>
</html>