`
mutongwu
  • 浏览: 448426 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

实现JavaScript继承

阅读更多
javasript是基于prototype对象实现,继承的要点如下:
1. 构造函数会存放"私有数据"--对实例而言。
2. 函数的原型prototype对象会存放"公有"数据及函数
3. 在子类的构造函数里面,调用 父类的构造方法--使用call(this)的形式,并定义自己的数据
4. 设置子类的原型prototype对象指向一个父类的实例(或者是一个空函数的实例,该空函数的prototype指向父类的prototype对象),从而可以访问到父类的原型里面的"公有"数据及函数。
function SuperType(name){
	this.name = name;
	this.colors = ['red','green','blue'];
};
SuperType.prototype.getName = function(){
	return this.name;
}

function SubType(name,age){
	//继承所有属性
	SuperType.call(this,name);
	this.age = age;
}
//继承父类的方法
SubType.prototype = new SuperType();
//修复constructor的指向
SubType.prototype.constructor = SubType;

SubType.prototype.getAge = function(){
	return this.age;
}
var s1 = new SubType('Tom',10);
alert(s1.getName());
alert(s1.getAge());
alert(s1.getColor());
s1.color.push('black');

var s2 = new SubType('Jerry',8);
alert(s2.color);
//函数prototype上的属性都是共有
alert(s1.getAge === s2.getAge);//true

alert(s1 instanceof SubType);//true
alert(s1 instanceof SuperType)//true

alert(s1.constructor == SubType)//ture
alert(s1.constructor == SuperType);//false

alert(s1.getName === s2.getName);//true



可以看到,1.实例之间拥有独立的从父类继承的属性,2.实例之间拥有共同的父类方法。上述代码的一个关键就是 SubType.prototype = new SuperType();
最终“类图”如下:



上面要点4括号里提到了另外一种继承方式(本质其实一样),先来看看一个函数:
function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

//使用示例
//引用类型的属性将被共享
var person = {
	name: 'Tomy',
	friends:['1','3','4']
}
var p2 = object(person);
p2.name = 'Jack';
p2.friends.push([5,6]);
alert(p2.friends);//1,3,4,5,6

var p1 = object(person);
alert(p1.name)//Tomy
alert(p1.friends);//1,3,4,5,6

可以看到,object方法实现的就是创建一个函数(F)的实例,该函数的prototype指向某一个对象,返回的函数(F)的实例,
从而,实际上效果就是:返回的实例是入参的“子类”。
其“类图”如下:



有了上面对object函数的分析,我们可以用第二种形式实现继承:
function inheritPrototype(subType,superType){
	var prototype = object(superType.prototype);
	prototype.constructror = subType;
	subType.prototype = prototype;
	
}
举例:
function SuperType(name){
	this.name = name;
	this.colors = ['red','green','blue'];
};
SuperType.prototype.getName = function(){
	return this.name;
}

function SubType(name,age){
	//继承所有属性
	SuperType.call(this,name);
	this.age = age;
}
//继承父类的方法
inheritPrototype(subType,superType);
//子类共有方法
SubType.prototype.getAge = function(){
	return this.age;
}


整理自《Professional.JavaScript.for.Web.Developers.2nd.Edition》
  • 大小: 21.2 KB
  • 大小: 10.8 KB
分享到:
评论

相关推荐

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

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

    javascript继承问题

    在给定的代码示例中,我们看到了两种不同的尝试实现JavaScript继承的方式,一种是通过`call()`方法进行对象冒充,另一种是通过修改`prototype`属性实现原型链继承。下面我们将详细探讨这两种方式以及它们在实际代码...

    详解Javascript继承的实现

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

    JavaScript实现继承的几种方式

    本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型(prototype)机制是实现继承的基础。每个函数都有一个prototype属性,这个属性指向一个对象,这个对象的属性和方法可以被...

    JavaScript继承机制研究.pdf

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

    JavaScript继承

    在Java或C++等语言中,继承通常只需要一个关键字,如`extends`,但在JavaScript中,实现继承需要采用一系列技术。 JavaScript使用的是原型式继承,这是它与其他语言的一大区别。原型(Prototype)是JavaScript实现...

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

    本篇文章将深入探讨JavaScript实现继承的七种常见方式,帮助你更好地理解和运用这一概念。 1. 原型链继承(Prototype Chain Inheritance) 原型链是JavaScript实现继承的基础。每个函数都有一个`prototype`属性,这...

    java script 继承的实现

    这篇博客文章 "Java Script 继承的实现" 探讨了如何在 JavaScript 中实现继承机制。 在 JavaScript 中,继承主要有以下几种实现方式: 1. **原型链继承**:这是最基础的继承方式,JavaScript 对象都有一个内部 `[...

    javascript中如何实现封装,继承和多态

    javascript中如何实现封装,继承和多态

    关于js继承笔记.doc

    这里我们主要探讨三种实现JavaScript继承的方式:原型链继承、构造函数继承和组合继承。 首先,原型链继承是JavaScript最常用的继承方式。在JavaScript中,每个函数都有一个prototype属性,这个属性是一个对象,它...

    javascript继承之工具函数二

    1. **原型链继承**:这是JavaScript默认的继承方式,通过`__proto__`或`Object.create()`来实现。子对象的原型被设置为父对象的实例,从而继承其属性和方法。 2. **构造函数继承**:通过调用父类的构造函数来实现,...

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

    在 JavaScript 中,继承是通过 prototypeChain 来实现的。当我们创建一个对象时,它会自动继承其 prototype 中的所有属性和方法。例如,我们可以创建一个 Animal 类,并在其 prototype 中添加一个 walk 方法,然后...

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

    而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象...

    JavaScript继承详解.doc

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

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

    这里我们将深入探讨JavaScript继承的特性以及实践应用。 首先,JavaScript的继承基于原型链。每个对象都有一个`__proto__`属性,指向创建它的构造函数的原型对象。当试图访问对象的一个属性时,JavaScript会沿着...

    JavaScript — 原型链与作用域链1

    `F`的`prototype`属性则定义了实例的原型,这是实现JavaScript继承的一种方式。 接下来,我们讨论**原型链**。原型链是JavaScript实现面向对象特性的关键机制,它允许对象间共享属性和方法。每个JavaScript对象都有...

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

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

    JavaScript面向对象的程序设计(犯迷糊的小羊)

    原型链是实现JavaScript继承的主要方法。通过将一个对象直接赋值给另一个对象的原型,子对象会继承父对象的属性和方法。 8. 借用构造函数 借用构造函数通过在子对象的构造函数中调用父对象的构造函数,实现对父对象...

Global site tag (gtag.js) - Google Analytics