`
haibin369
  • 浏览: 60228 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript中的继承

阅读更多

1.对象冒充

      对象冒充指的是在子类中使用子类的this冒充父类的this去执行父类的构造函数,从而获得了父类的属性和方法,但是这种方式只能继承父类构造函数中定义的属性和方法,原型上的任何属性和方法对子类都不可见:

    	//使用对象冒充实现继承
  function SuperType()
		{
			this.prop = ["prop"];
			
			this.method = function(){return "method";};
		}
		SuperType.prototype.protoProp = "proto";
		
		function SubType()
		{
			//临时方法
			this.inherit = SuperType;
			//冒充继承
			this.inherit();
			//删除临时方法
			delete this.inherit;
		}
		
		var sub = new SubType();
		alert(sub.prop);					//property,继承父类属性
		alert(sub.method());				//method,继承父类方法
		alert(sub.protoProp);				//undefined,不能继承父类原型的属性

 

2.原型链继承

      使用原型链可以很方便继承父类的属性和方法,但是若父类的属性是引用类型时可能会存在父类或子类的多个实例的相互影响问题,即某个实例改变了属性,可能对另外的实例可见。

  //原型链继承
		function SuperType()
		{
			this.prop = ["prop"];
			
			this.method = function(){return "method";};
		}
		SuperType.prototype.protoProp = "proto";
		
		function SubType()
		{
		}
		//使用原型链继承
		SubType.prototype = new SuperType();
		
		var sub = new SubType();
		alert(sub.prop);					//property,继承父类属性
		alert(sub.method());				//method,继承父类方法
		alert(sub.protoProp);				//proto,继承父类原型的属性
		
		var sub1 = new SubType();
		var sub2 = new SubType();
		sub1.prop[0] = "another prop";		//改变sub1的属性
		alert(sub2.prop);					//another prop,sub2属性受影响

 

3.借用构造函数

      借用构造函数是指在子类的构造函数中调用了父类的构造方法从而继承并初始化父类的属性和方法。但是这种继承方式不能继承父类原型中的属性或者方法,并且方法不能得到复用。

		//借用构造函数实现继承
		function SuperType()
		{
			this.prop = ["property"];
			
			this.method = function(){return "method";};
		}
		SuperType.prototype.protoProp = "proto";
		
		function SubType()
		{
			//调用父类构造函数实现继承
			SuperType.apply(this);		
		}
		
		var sub = new SubType();
		alert(sub.prop);				//property,继承父类属性
		alert(sub.method());			//method,继承父类方法
		alert(sub.protoProp);			//undefined,不能继承父类原型中的属性和方法
		
		var sub1 = new SubType();
		var sub2 = new SubType();
		sub1.prop[0] = "another prop";	//改变sub1的属性
		alert(sub2.prop);				//prop,属性不受sub1影响

 

4.组合继承

      组合继承是组合了原型链和借用构造函数的优点,使用原型链继承方法,用借用构造函数继承属性。但是,使用组合继承会两次调用父类的构造方法。第一次是在创建子类的原型对象的时候,这时候会在原型中创建父类的属性和方法;第二次是当需要创建子类实例的时候,在子类构造函数内部调用,这时会创建父类的属性和方法,去屏蔽原型上相应的属性和方法。

		//使用组合继承实现继承
		function SuperType()
		{
			//属性保存在构造函数内
			this.prop = ["property"];
		}
		//方法保存在原型上
		SuperType.prototype.method = function(){return "method";};
		
		function SubType()
		{
			//调用父类构造函数继承属性
			SuperType.apply(this);
		}
		//使用原型继承父类方法
		SubType.prototype = new SuperType();
		
		var sub = new SubType();
		alert(sub.prop);				//property,继承父类属性
		alert(sub.method());			//method,继承父类方法
	
		var sub1 = new SubType();
		var sub2 = new SubType();
		sub1.prop[0] = "another prop";	//改变sub1的属性
		alert(sub2.prop);				//prop,属性不受sub1影响

 

 5.寄生组合式继承

      使用寄生组合式会复制父类的原型赋给子类的原型,从而避免在子类的原型上创建不必要的、多余的属性。

		//使用寄生组合式继承
		//用于复制并继承父类的原型
		function inheritPrototype(superType, subType)
		{
			function Temp(){};
			Temp.prototype = superType.prototype;
			var prototype = new Temp();
                        prototype.constructor = subType;
                        subType.prototype = prototype;
		}
		
		function SuperType()
		{
			//属性保存在构造函数内
			this.prop = ["property"];
		}
		//方法保存在原型上
		SuperType.prototype.method = function(){return "method";};
		
		function SubType()
		{
			SuperType.apply(this);
		}
		
  inheritPrototype(SuperType, SubType);
		
		var sub = new SubType();
		alert(sub.prop);				//property,继承父类属性
		alert(sub.method());			//method,继承父类方法

 

 

分享到:
评论

相关推荐

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

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

    JavaScript中继承用法实例分析

    在给定的文件内容中,我们看到一个具体的JavaScript继承的例子,主要分为以下几个步骤: 1. 定义父类`Person`,这个类有一个原型方法`walk`和`sayHello`,它们分别用于定义行走和打招呼的行为。 ```javascript ...

    JavaScript中继承的一些示例方法与属性参考

    JavaScript继承是面向对象编程(OOP)中的一个核心概念,它允许一个对象(称为子类或派生类)继承另一个对象(称为父类或基类)的属性和方法。JavaScript是一种基于原型的编程语言,它实现继承的方式与其他基于类的...

    base-object:JavaScript 中继承的实现

    JavaScript 中继承的实现 怎么建? git clone 这个仓库 切换到新目录 npm install npm run build 用法 var Person = BaseObject . extend ( { init : function ( name , age ) { this . name = name ; this . ...

    JavaScript继承

    JavaScript中的继承是一个核心概念,它在面向对象编程中扮演着至关重要的角色。与其他面向对象语言相比,JavaScript的继承机制更为复杂。在Java或C++等语言中,继承通常只需要一个关键字,如`extends`,但在...

    JavaScript中实现继承的八种方式

    详细介绍了JavaScript中继承的实现方式以及其优缺点分析。

    JavaScript实现继承的几种方式

    寄生组合继承解决了组合继承中父类构造函数会被调用两次的问题,通过创建父类的一个不被使用的实例,然后将子类的原型指向这个实例的原型。 ```javascript function inheritPrototype(subType, superType) { let ...

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

    在JavaScript中,选择合适的继承方式取决于具体需求。理解并熟练掌握这些继承方式,能让你在编写代码时更加游刃有余。文章中的`inheritance.html`和`inheritance.js`文件可能包含示例代码,帮助你直观地了解每种继承...

    javascript控件开发之继承关系

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

    JavaScript中的类继承

    JavaScript中的类继承是一种模拟传统面向对象编程中类概念的方式,因为JavaScript本身是一种基于原型的面向对象语言。在JavaScript中,对象可以直接从其他对象继承属性和方法,而不是通过类的实例化。这种继承机制...

    实现JavaScript中继承的三种方式

    在原型链继承中,子类型的原型对象指向父类型的实例,从而使得子类型的实例可以继承父类型原型上的属性和方法。原型链继承允许子类型访问父类型的实例属性和方法,这在JavaScript中是通过设置子类型的prototype指向...

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

    本文将详细介绍六种实现JavaScript继承的方法。 1. 原型链继承 原型链继承是通过改变子类型的原型对象来实现继承的。子类型构造函数的原型被替换为超类型构造函数的一个实例,这样子类型就可以继承超类型的所有属性...

    javascript继承之为什么要继承.docx

    JavaScript 中的继承机制是指子类继承父类的属性和方法,使得子类可以拥有父类的所有特征。继承是面向对象编程的基本机制之一,它可以实现代码复用、提高编程效率和增强代码的可维护性。 在 JavaScript 中,继承是...

    理解Javascript原型继承原理

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

    JavaScript继承机制研究.pdf

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

Global site tag (gtag.js) - Google Analytics