`
luogankun
  • 浏览: 19430 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript类的继承特性

阅读更多

在js中并没有类似于java中的extends关键字去继承其他的一个类。我们可以通过以下的方式去实现js中的继承特性。

 

方法一:对象冒充

function Parent(username) {
	this.username = username;
	this.hello=function() {
		alert(this.username);
	}
}

function Child(username,password) {
	this.method = Parent;
	this.method(username); //这句话是关键
	delete this.method;

	this.password = password;
	this.world=function(){
		alert(this.password);
	}
}
	
var parent = new Parent("lgk");
parent.hello();  //lgk
	
var child = new Child("ahau","aaa");
child.hello();  //ahau
child.world();  //aaa

 

 

方法二:function的call()方法

function Parent(username) {
	this.username = username;
	this.hello=function() {
	alert(this.username);
	}
}

function Child(username,password) {
	Parent.call(this, username);

	this.password = password;
	this.world=function(){
		alert(this.password);
	}
}
	
var parent = new Parent("lgk");
parent.hello();  //lgk
	
var child = new Child("ahau","aaa");
child.hello();  //ahau
child.world();  //aaa

 call是每个function中都有的方法,call中的第一个参数表示将谁传递给调用了call方法的函数(在这里也就是将Child传递给Parent),从第二个开始后面的参数都是以此对应传递给Parent中的参数

 

方法三:function的apply()方法

function Parent(username) {
	this.username = username;
	this.hello=function() {
		alert(this.username);
	}
}

function Child(username,password) {
	Parent.apply(this, new Array(username));

	this.password = password;
		this.world=function(){
			alert(this.password);
		}
	}
  var parent = new Parent("lgk");
parent.hello();  //lgk
	
var child = new Child("ahau","aaa");
child.hello();  //ahau
child.world();  //aaa

 apply中的第一个参数和call中的一样,apply中只有2个参数,第二个参数是一个数组,数组中的元素依次对应Parent中的参数。

 

方法四:原型链方式。

function Parent() {
		
}
Parent.prototype.username = "lgk";
Parent.prototype.sayHello=function(){
	alert(this.username);
}


function Child() {
		
}
Child.prototype = new Parent();//这句话是最关键的,它将Parent上的所有属性和方法都附加在了Child.prototype上
Child.prototype.password = "ahau";
Child.prototype.sayWorld=function(){
	alert(this.password);
}
	
var child = new Child("ahau","aaa");
child.sayHello();   //lgk
child.sayWorld();  //ahau

 

 方法五:混合方式(属性用构造方法的方式,方法用原型的方式)

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("ahau","aaa");
child.sayHello(); //ahau
child.sayWorld(); //aaa

 

分享到:
评论

相关推荐

    JavaScript继承的特性与实践应用深入详解

    伪类的概念在JavaScript继承中扮演着重要角色。通过构造函数,我们可以创建出一个继承自其他对象的对象。例如,我们可以定义一个`Mammal`构造函数,然后创建一个新的`Cat`构造函数,使其原型指向`Mammal`的实例。...

    JavaScript中的类继承

    对于代码复用,类继承提供了一种方式,使对象可以从一个或多个基对象继承特性,避免重复编写相同或相似的代码。 在JavaScript中实现类继承的一种方法是通过构造函数和原型链。例如,`Parenizor`构造函数创建了一个...

    javascript 原生态js类继承实现的方式

    几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。...但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。

    JavaScript实现继承的几种方式

    继承是面向对象的核心特性之一,它允许一个对象(子类)从另一个对象(父类)获取属性和方法,从而形成类之间的层次结构。本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型...

    JavaScript学习之三 — JavaScript实现继承的7种方式

    继承是面向对象的核心特性之一,它允许一个对象(子类)获取另一个对象(父类)的属性和方法。本篇文章将深入探讨JavaScript实现继承的七种常见方式,帮助你更好地理解和运用这一概念。 1. 原型链继承(Prototype ...

    javascript控件开发之继承关系

    在这个主题中,“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构,以及如何通过继承来实现代码的复用和模块化。 在JavaScript中,继承是基于原型...

    Javascript类的继承,使用this.callParent调用超类方法

    在本话题中,我们将深入探讨JavaScript中的类继承,并特别关注`this.callParent`这个方法,它是如何被用来调用超类方法的。 首先,让我们了解JavaScript中的构造函数。构造函数是一种特殊的函数,用于创建和初始化...

    javascript 继承派生

    在JavaScript中,面向对象编程是其核心特性之一,而继承和派生则是实现面向对象的重要机制。本资料集合关注的是JavaScript中的继承派生以及与之相关的`apply`和`call`方法。 **继承**是面向对象编程的关键概念,...

    javascript中类和继承(代码示例+prototype.js)

    JavaScript的类和继承机制是其面向对象特性的重要组成部分。通过函数构造器、原型链以及`prototype.js`文件中可能提供的类和继承工具,我们可以创建复杂的对象结构和组织代码。理解并掌握这些概念有助于提升...

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

    1. **JavaScript继承** - **原理**:JavaScript的继承主要是通过原型链(prototype chain)来实现的。每个JavaScript对象都有一个内部属性[[Prototype]],通常可以通过`__proto__`访问,或通过`Object....

    简洁理解JavaScript中的封装与继承特性_.docx

    3. **闭包创建私有变量**:利用JavaScript中函数的作用域特性,将变量定义在构造函数内部,使其成为局部变量,只有构造函数内的方法才能访问。这种方式可以防止外部直接访问,但每次创建新对象时,都会为这些私有...

    javascript的prototype继承

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

    详解Javascript继承的实现

    本文将深入探讨JavaScript继承的实现方式,以及其中的问题和解决方案。 首先,我们来看混合方式的实现,这种方式结合了原型链和对象冒充。在JavaScript中,构造函数是用于创建特定类型对象的函数。例如,`Employee`...

    Javascript面向对象特性实现(封装、继承、接口).doc

    JavaScript是一种动态类型的脚本语言,虽然它不像Java或C#那样是典型的面向对象语言,但JavaScript仍然支持面向对象编程的概念,包括封装、继承和接口。下面我们将深入探讨这些概念。 **封装**是面向对象编程的基本...

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

    虽然有传言JavaScript 2.0将加入类继承机制,但考虑到要让所有浏览器支持新特性可能需要很长时间,因此目前只能依靠现有的机制来实现对象的继承。 在JavaScript中,继承主要通过原型链实现。首先,我们需要区分几个...

    JavaScript面向对象继承详解

    6. **ES6的类继承**:ES6引入了`class`语法糖,使得JavaScript的继承看起来更像传统的面向对象语言。实际上,`class`和`extends`关键字仍然基于原型链,但提供了更简洁的语法。 在JavaScript中,还有其他一些与继承...

    JavaScript的面向对象特性浅析与范例.pdf

    4. 类的继承:JavaScript支持类的继承,但它的继承机制不同于其他面向对象语言。JavaScript使用prototype链来实现继承。例如,可以使用Circle类的原型来创建一个新的类Sphere,並继承Circle类的属性和方法。 5. ...

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

    在JavaScript中,由于其动态类型和基于原型的特性,实现继承的方式比传统的面向对象语言更为灵活,但也相对复杂。本文将深入探讨JavaScript中的继承原理与用法,并通过实例进行讲解。 首先,JavaScript的对象由两...

    javascript面向对象特性代码实例

    在本篇文章中,作者详细阐述了JavaScript面向对象编程的几个关键特性,并通过代码示例展示了这些特性的具体应用。首先,我们来了解几个核心概念:类、静态成员、对象和重载。 类在面向对象编程中扮演着基础的角色,...

Global site tag (gtag.js) - Google Analytics