`

JavaScript面向对象继承方式归纳

阅读更多

面向对象的语言多数都支持继承,继承最重要的优点就是代码复用,从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法,就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JS库继承方式也各不相同。从最简单的复用开始。

 

1、构造函数方式写类,通过方法调用复制父类属性/字段到子类 实现继承

这里父类,子类都采用构造函数方式写,不用原型。子类调用父类函数来复制父类的属性。

**
 * 父类Polygon:多边形
 * @param {Object} sides
 */
function Polygon(sides) {
	this.sides = sides;
	this.setSides = function(s) {this.sides=s;}
}

/**
 * 子类Triangle:三角形
 */
function Triangle() {
	this.tempfun = Polygon;//父类引用赋值给子类的一个属性tempfun
	this.tempfun(3);//调用
	delete this.tempfun;//删除该属性
	this.getArea = function(){};
}

//new个对象 
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有的方法

//缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
console.log(tri instanceof Triangle);//true
console.log(tri instanceof Polygon);//false

因为 JavaScript中具名函数的多种调用方式 ,子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。

function Triangle() {
	Polygon.call(this,3); //call方式调用父类
	this.getArea = function(){};	
}
function Triangle() {
	Polygon.apply(this,[3]); //apply方式调用父类
	this.getArea = function(){};
}
function Triangle() {
	var temp = new Polygon(3); //new方式调用父类
	for(atr in temp) { //全部复制给子类
		this[atr] = temp[atr];
	}	
	this.getArea = function(){};
}

 

2、原型方式写类,原型方式继承

core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统,而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承,代码复用以构建自己的功能模块。 

/**
 * 父类Polygon:多边形
 * 
 */
function Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function(s) {this.sides=s;}

/**
 * 子类Triangle:三角形
 */
function Triangle() {}
Triangle.prototype = new Polygon(); //这是原型继承关键的一句
Triangle.prototype.getArea = function(){}

//new个对象
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有方法

//instanceof测试
console.log(tri instanceof Triangle);//true,表明该对象是三角形
console.log(tri instanceof Polygon);//true,表明三角形也是多边形

 

虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides,但sides是0,怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数,即是原型方式的缺点。优点是正确的维护了"is a"的关系。

 

3、组合构造函数/原型方式写类,采用前面种方式继承

这种方式父类,子类的属性都挂在构造函数里,方法都挂在原型上。

/**
 * 父类Polygon:多边形
 */
function Polygon(sides) {
	this.sides = sides;
}
Polygon.prototype.setSides = function(s) {this.sides=s;}

/**
 * Triangle 三角形
 * @param {Object} base 底
 * @param {Object} height 高
 */
function Triangle(base,height) {
	Polygon.call(this,3);//复制父类属性给自己
	this.base = base;
	this.height = height;
}
Triangle.prototype = new Polygon();//复制父类方法给自己

Triangle.prototype.getArea = function(){ //最后定义自己的方法
	return this.base*this.height/2;
}

//new个对象
var tri = new Triangle(12,4);
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.base);//自有属性
console.log(tri.height);//自有属性
console.log(tri.getArea);//自有方法

//instanceof测试,表明正确的维护了"is a"的关系
console.log(tri instanceof Triangle);//true,表明该对象是三角形
console.log(tri instanceof Polygon);//true,表明三角形也是多边形

 

分享到:
评论

相关推荐

    JavaScript继承机制研究.pdf

    JavaScript继承机制研究 ...通过深入理解JavaScript继承机制,可以更好地理解JavaScript面向对象编程机制,并提高开发效率。本文对JavaScript继承机制的研究将有助于读者更好地理解和使用JavaScript语言。

    JavaScript的9种继承实现方式归纳

    ES6引入了class关键字,使得继承看起来更接近于传统意义上的面向对象编程。 ```javascript class Parent { constructor(value) { this.val = value; } getValue() { return this.val; } } class Child ...

    javascript刷题讲义.rar

    5. **原型和继承**:JavaScript的继承机制基于原型链,熟悉Object.prototype、__proto__、prototype等概念,以及class关键字的使用,有助于理解面向对象编程。 6. **异步编程**:包括回调函数、Promise、async/...

    实用页面设计方法_3_JavaScript.pdf

    - **面向对象特性**:JavaScript虽然支持面向对象编程,但并没有严格的类和继承的概念;Java Applet则是完全面向对象的语言。 - **变量类型**:JavaScript中的变量类型可以动态确定,而Java Applet则需要显式定义...

    毕向东 java、html、css、JavaScript讲解视频

    - **面向对象特性**:Java 支持封装、继承、多态等面向对象特性。 ### 3. HTML(HyperText Markup Language) #### 3.1 HTML 的作用 HTML 是一种标记语言,用于创建网页结构。它定义了网页的布局和内容,如文本、...

    Qcon2011 JS is JS ——编写JS独有风格的JS代码(程劭非)

    通过不同的编程范式(如面向对象、过程式、函数式等),演讲者深入分析了如何更好地利用JavaScript的语言特性来解决问题。下面我们将根据演讲的内容,详细阐述其中的关键知识点。 #### 抽象方法 **1. 简化** 简化...

    编程世界里只存在两种基本元素

    #### 从面向对象到JavaScript JavaScript作为一种典型的脚本语言,它的设计哲学在很大程度上体现了数据和代码的原始特性。JavaScript中的数据非常简洁,主要包括`undefined`, `null`, `boolean`, `number`, 和 `...

    软件设计师经典教材归纳

    2. **面向对象编程**:理解类、对象、继承、多态和封装,这是现代软件设计的核心理念。 3. **函数式编程**:学习函数、高阶函数、闭包等概念,以及如何利用这些概念提高代码的简洁性和可维护性。 4. **脚本语言与...

    [ASP.NET编程宝典(10年典藏版)].吕双等.扫描版

    根据提供的文件信息,我们可以归纳出一系列与ASP.NET编程相关的知识点,包括C#基本语法、面向对象编程(OOP)以及实际项目开发经验等。下面将详细展开这些知识点。 ### ASP.NET编程宝典(10年典藏版) #### C#基本...

    python全栈视频资料

    3. **面向对象编程**:Python支持面向对象编程,包括类的定义、对象的创建以及继承、多态等概念。面向对象编程有助于组织代码并提高代码的可重用性。 ### Python全栈开发技能 1. **前端技术**:全栈开发人员需要...

    java总结java总结java总结

    - **面向对象**:Java是一种完全的面向对象编程语言,支持封装、继承和多态等面向对象的核心概念。 - **安全性**:Java提供了一套强大的安全机制,可以防止恶意代码对系统的破坏。 - **垃圾回收机制**:Java自带了...

    360-2019校招笔试-Windows开发工程师客观题合集(一).docx

    5. C++ 面向对象编程 在C++中,类 P 和类 B 之间存在继承关系,类 B 继承自类 P。程序运行后的结果是 B:book1,因为在类 B 的构造函数中,调用了类 P 的构造函数,并将 nameP 设为 "book1"。 6. 循环优化方法 循环...

    小码哥-java基础班和就业班教学视频

    - **定义与历史**:Java是一种广泛使用的面向对象的高级编程语言,由Sun Microsystems公司于1995年发布。 - **特点**:跨平台性、安全性、面向对象等。 - **应用场景**:Web应用开发、移动应用(尤其是Android应用)...

    java综合知识点总结

    Java是一种广泛使用的面向对象的编程语言,其设计目标是具有高度的可移植性,灵活性和安全性。本篇文章将深入探讨在Java学习过程中的一些关键知识点和容易混淆的概念。 基础篇: 1. JDK常用的包:Java Development ...

Global site tag (gtag.js) - Google Analytics