`

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>
	</head>
	<body>
	</body>
</html>
分享到:
评论

相关推荐

    学习javascript面向对象 javascript实现继承的方式

    在JavaScript中,面向对象编程是通过构造函数、原型链和继承实现的。继承是面向对象编程的核心概念之一,它允许我们创建一个新对象,该对象继承现有对象的属性和方法。在JavaScript中,实现继承有多种方式,每种方式...

    javascript原型继承代码案例

    javascript原型继承,prototype的使用,可以像java一样继承

    理解Javascript原型继承原理

    ### 理解Javascript原型继承原理 #### 一、引言 在JavaScript中,原型继承是一种非常核心且独特的机制,它使得对象能够继承其他对象的属性和方法。本文旨在深入探讨这一机制,并通过具体的示例代码帮助读者更好地...

    JavaScript继承机制研究.pdf

    在本文中,我们将深入探讨JavaScript继承机制的实现方式,并对基于原型的继承、构造函数方式继承、组合继承、寄生式继承等继承机制进行了总结归纳和分析。 基于原型的继承 JavaScript是一门基于原型的语言,它不像...

    JavaScript继承机制探讨及其应用.pdf

    JavaScript继承机制探讨及其应用 JavaScript是一门弱类型语言,具有函数式编程和面向对象编程的特点。随着近几年JavaScript生态圈的发展和成熟,项目的编码量和复杂度也在呈几何级数增长。JavaScript面向对象编程中...

    浅析javascript原型继承机制

    ### 浅析JavaScript原型继承机制 #### 一、引言 JavaScript作为一种动态语言,其对象模型与传统的面向对象编程语言有所不同。在JavaScript中,并没有直接提供类的概念,而是通过原型来实现继承。本文将深入探讨...

    JavaScript中继承原理与用法实例入门

    JavaScript中的继承是面向对象编程的重要概念,它允许一个对象(子对象)继承另一个对象(父对象)的属性和方法。在JavaScript中,由于其动态类型和基于原型的特性,实现继承的方式比传统的面向对象语言更为灵活,但...

    javascript原型继承工作原理和实例详解_.docx

    ### JavaScript原型继承工作原理及实例详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。其独特的面向对象机制是通过原型继承来实现的,这种机制使得JavaScript能够灵活地...

    浅析Javascript原型继承 推荐第1/2页

    在深入探讨JavaScript的原型继承之前,首先要明确的是JavaScript中并没有类似其他编程语言中的类继承的概念。虽然有传言JavaScript 2.0将加入类继承机制,但考虑到要让所有浏览器支持新特性可能需要很长时间,因此...

    JavaScript继承与多继承实例分析.docx

    JavaScript的继承机制主要基于原型链,本文将深入探讨JavaScript的继承与多继承,并通过实例进行分析。 1. **JavaScript继承** - **原理**:JavaScript的继承主要是通过原型链(prototype chain)来实现的。每个...

    详解Javascript继承的实现

    JavaScript中的继承是面向对象编程的重要概念,允许子类继承父类的属性和方法。本文将深入探讨JavaScript继承的实现方式,以及其中的问题和解决方案。 首先,我们来看混合方式的实现,这种方式结合了原型链和对象...

    JavaScript继承详解.doc

    JavaScript中的继承是面向对象编程的重要概念,它允许一个对象(子对象)获取另一个对象(父对象)的属性和方法,从而实现代码复用和多态性。JavaScript支持多种继承实现方式,包括以下四种: 1. **构造函数继承**...

    Javascript原型继承

    JavaScript原型继承是面向对象编程在JavaScript中的实现方式之一,它基于原型(Prototype)和对象的特性,使得一个对象可以继承另一个对象的属性和方法。在JavaScript中,每个对象都有一个特殊的内部属性`[...

    JavaScript面向对象继承详解

    5. **寄生组合继承**:结合寄生继承和组合继承,避免了冗余的构造函数调用,通常被认为是JavaScript中实现继承的最佳实践。 6. **ES6的类继承**:ES6引入了`class`语法糖,使得JavaScript的继承看起来更像传统的...

    javascript的prototype继承

    JavaScript的原型继承是其面向对象编程的一大特性,它基于原型链机制实现,允许一个对象可以从另一个对象继承属性和方法。这种继承方式不同于类继承,而是通过将子类的原型对象设置为父类的一个实例来实现。 在...

    史上最为详细的javascript继承(推荐)

    JavaScript 继承是面向对象编程中的关键概念,它允许创建基于现有对象的新对象,从而能够复用和扩展已有功能。本文将深入探讨JavaScript中的几种继承方式,包括它们的基本原理、优缺点以及适用场景。 首先,原型链...

    Antechinus JavaScript Editor v10.0

    Antechinus JavaScript Editor可以使你轻松快速的在网页中插入JavaScript代码,友好的用户界面,快捷的工具栏,智能的语法填充助手,方便的鼠标单击文档导航条,丰富的分类源代码库,一切的设计都让你的效率倍增

Global site tag (gtag.js) - Google Analytics