js的extends--js详解(十四)

最新推荐文章于 2024-04-16 20:06:21 发布

xiaosa3134

最新推荐文章于 2024-04-16 20:06:21 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： js继承 js的extends js详解微风

本文链接：https://blog.csdn.net/xiaosa3134/article/details/84795881

版权

js 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1、基于原型链的方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * js实现继承的第一种方式是基于原型链的方式
	 */
	function Parent() {
		this.pv = "parent";
	}
	Parent.prototype.pp = "ok";
	Parent.prototype.showParentValue = function() {
		alert(this.pv);
	}
	
	function Child() {
		this.cv = "child";
	}
	/**
	 * 如果想进行赋值之后，才进行原型链的设定，这样赋值的原型对象
	 * 就会被重写掉，赋值的对象就不存在在新的原型对象中
	 */
	// Child.prototype.showChildValue = function() {
		// alert(this.cv);
	// }
	/**
	 * 让Child的原型链指向Parent对象，也就等于完成了一次继承
	 * 注意内存模型
	 */
	Child.prototype = new Parent();
	
	Child.prototype.showChildValue = function() {
		 alert(this.cv);
	}
	/**
	 * 此时完成的对父类对象的覆盖
	 */
	Child.prototype.showParentValue = function() {
		alert("override parent");
	}
	/**
	 * 在使用原型链进行继承一定要注意一下问题：
	 * 1、不能在设定了原型链之后，再重新为原型链赋值
	 * 2、一定要在原型链赋值之后才能添加或者覆盖方法
	 */
	

	/**
	 * 当执行了下面这句话之后，意味着Child的原型又重写了
	 * 这样就不存在任何的继承关系了
	 * 使用原型链需要注意的第一个问题
	 */
	// Child.prototype = {
		// showChildValue:function() {
			// alert(this.v);
		// }
	// }
	
	var c = new Child();
	c.showParentValue();
	c.showChildValue();
	alert(c.pp);
	</script>
</head>
<body>
</body>
</html>

以下内存模型图分析

2、基于原型链的方式问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * js实现继承的第一种方式是基于原型链的方式
	 */
	function Parent() {
		this.pv = "parent";
		this.color = ["red","yellow"];
	}
	Parent.prototype.pp = "ok";
	Parent.prototype.showParentValue = function() {
		alert(this.pv);
	}
	
	function Child() {
		
		this.cv = "child";
	}
	/**
	 * 使用原型链继承，最大的缺点是，无法从子类中调用父类的构造函数
	 * 这样就没有办法把子类中的属性赋值到父类
	 * 第二个缺点就是，如果父类中有引用类型，此时这个引用类会添加到
	 * 子类的原型中，当第一个对象的修改了这个引用之后，其他对象的引用同时修改
	 * 所以一般都不会单纯的使用原型链来实现继承
	 */
	
	Child.prototype = new Parent();
	
	Child.prototype.showChildValue = function() {
		 alert(this.cv);
	}
	/**
	 * 此时完成的对父类对象的覆盖
	 */
	Child.prototype.showParentValue = function() {
		alert("override parent");
	}
	
	var c1 = new Child();
	//Child中的原型的color被修改
	c1.color.push("blue");
	alert(c1.color);//red,yellow blue
	var c2 = new Child();
	alert(c2.color);//red yellow blue
	</script>
</head>
<body>
</body>
</html>

3、call或apply伪造方式实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function Parent() {
		this.color = ["red","blue"];
		this.name = "Leon";
	}
	
	function Child() {
		//在Child中的this明显应该是指向Child的对象
		//当调用Parent方法的时候，而且this又是指向了Child
		//此时就等于在这里完成this.color = ["red","blue"]
		//也就等于在Child中有了this.color属性，这样也就变相的完成了继承
		Parent.call(this);
		//这种调用方式，就仅仅完成了函数的调用，根本无法实现继承
		//Parent();
	}
	
	
	var c1 = new Child();
	c1.color.push("green");	
	alert(c1.color);	//red,blue,green
	var c2 = new Child();
	alert(c2.color);	//red,blue
	alert(c2.name);	//Leon
	</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function Parent(name) {
		this.color = ["red","blue"];
		this.name = name;
	}
	
	function Child(name,age) {
		this.age = age;
		/*
		 * 使用伪造的方式就可以把子类的构造函数参数传递到
		 * 父类中
		 */
		Parent.call(this,name);
	}
	
	
	var c1 = new Child("Leon",12);
	var c2 = new Child("Ada",22);
	alert(c1.name+","+c1.age);	//Leon,12
	alert(c2.name+","+c2.age);	//Ada,22
	</script>
</head>
<body>
</body>
</html>

4、call或apply伪造方式实现的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function Parent(name) {
		this.color = ["red","blue"];
		this.name = name;
		this.say = function() {
			alert(this.name);
		}
	}
	/**
	 * 由于使用伪造的方式，不会完成Child的原型指向Parent
	 * 所以say方法不存在，解决方法是，将这个方法放置到
	 * Parent中使用this来创建，但是此时每个对象中又存在say
	 * 这样空间占用太大，所以也不会单独的使用伪造的方式实现继承
	 */
	 /* Parent.prototype.say = function() {
		 alert(this.name);
	 } */
	
	function Child(name,age) {
		this.age = age;
		/*
		 * 使用伪造的方式就可以把子类的构造函数参数传递到
		 * 父类中
		 */
		Parent.call(this,name);
	}
	
	
	var c1 = new Child("Leon",12);
	var c2 = new Child("Ada",22);
	c1.say();
	c2.say();
	</script>
</head>
<body>
</body>
</html>

5、通过组合的实现方式来解决两种方式的问题(组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现
	 * 注意内存模型
	 */
	function Parent(name) {
		this.color = ["red","blue"];
		this.name = name;
	}
	Parent.prototype.ps = function() {
		alert(this.name+"["+this.color+"]");
	}
	
	function Child(name,age) {
		//已经完成了伪造
		Parent.call(this,name);
		this.age = age;
	}
	Child.prototype = new Parent();
	Child.prototype.say = function() {
		alert(this.name+","+this.age+"["+this.color+"]");
	}
	
	
	var c1 = new Child("Leon",22);
	c1.color.push("green");
	c1.say();
	c1.ps();
	var c2 = new Child("Ada",23);
	c2.say();
	c2.ps();
	</script>
</head>
<body>
</body>
</html>

以下是内存模型图分析