javascript10.0(承继)-JavaSript-爱易网页

javascript10.0(承继)

日期：2014-05-16　浏览次数：20375 次

javascript10.0(继承)
17. JavaScript中的继承。
1）对象冒充

<html>
	<head>
		<script type="text/javascript">
			function Parent(username) {
				this.username = username;
				
				this.sayHello = function() {
					alert(this.username);
				}
			}
			
			function Child(username, password) {
				//下面三行代码时重点
				this.method = Parent;
				this.method(username);
				delete this.method;
				
				this.password = password;
				
				this.sayWorld = function() {
					alert(this.password);
				}
			}
			
			var parent = new Parent("zhangsan");
			var child = new Child("lisi", "123");
			
			parent.sayHello();
			child.sayHello();
			child.sayWorld();

		</script>
	</head>
	<body>
	</body>
</html>

parent中的this已经被child替换，所以才可以实现这个功能。
2） call方法方式。
call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，call方法的第一个参数会被传递给函数中的this，从第2个参数开始，逐一赋值给函数中的参数。

<html>
	<head>
		<script type="text/javascript">
			function Parent(username) {
				this.username = username;
				
				this.sayHello = function() {
					alert(this.username);
				}
			}
			
			function Child(username, password) {
				Parent.call(this, username);

				this.password = password;
				
				this.sayWorld = function() {
					alert(this.password);
				}
			}
			
			var parent = new Parent("zhangsan");
			var child = new Child("lisi", "123");
			
			parent.sayHello();
			child.sayHello();
			child.sayWorld();

		</script>
	</head>
	<body>
	</body>
</html>

3） apply方法方式
下面这个就相当于call的简化写法，它把参数都放在了数组里面。

<html>
	<head>
		<script type="text/javascript">
			function Parent(username) {
				this.username = username;
				
				this.sayHello = function() {
					alert(this.username);
				}
			}
			
			function Child(username, password) {
				Parent.apply(this, new Array(username));

				this.password = password;
				
				this.sayWorld = function() {
					alert(this.password);
				}
			}
			
			var parent = new Parent("zhangsan");
			var child = new Child("lisi", "123");
			
			parent.sayHello();
			child.sayHello();
			child.sayWorld();

		</script>
	</head>
	<body>
	</body>
</html>

4）原型链方式（无法给构造函数传参数）

<html>
	<head>
		<script type="text/javascript">
			function Parent() {
				
			}
			
			Parent.prototype.hello = "hello";
			Parent.prototype.sayHello = function() {
				alert(this.hello);
			}
			
			function Child(username, password) {
				
			}
			
			Child.prototype = new Parent();
			
			Child.prototype.world = "world";
			Child.prototype.sayWorld = function() {
				alert(this.world);
			}
			
			var child = new Child();
			
			child.sayHello();
			child.sayWorld();

		</script>
	</head>
	<body>
	</body>
</html>

5）混合方式（推荐）
下面方法的好处是，即不共享变量，同时使用的还是同一个函数。

<html>
	<head>
		<script type="text/javascript">
			function Parent(hello) {
				this.hello = hello;
			}
			
			Parent.prototype.sayHello = function() {
				alert(this.hello);
			}
			
			function Child(hello, world) {
				Parent.call(this, hello);
				
				this.world = world;
			}
			
			Child.prototype = new Parent();
			
			Child.prototype.sayWorld = function() {
				alert(this.world);
			}
			
			var child = new Child("hello", "world");
			
			child.sayHello();
			child.sayWorld();

		</script>
	</he

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript10.0(承继)

相关资料更多>

推荐阅读更多>