`
conkeyn
  • 浏览: 1524374 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Javascript的类与子类创建

 
阅读更多

声明父类与子类的示例:

/**
 * Created by Administrator on 2015/12/23.
 */
//声明Rectangle类
function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}
Rectangle.prototype.area = function () {
    return this.width * this.height;
}
//父类定义了toString()方法+
Rectangle.prototype.toString = function(){
    return "[width:" + this.width +",height:"+this.height+"]";
}

//2.1 声明PositionedRectangle子类
function PositionedRectangle(x,y,w,h){
    //通过调用call()或apply()来调用Rectangle的构造方法。
    Rectangle.call(this,w,h);
    this.x=x;
    this.y=y;
}
//2.2 如果我们需要使PositionedRectangle继承Rectangle,那么必需显式的创建PositionedRectangle的prototype属性。
PositionedRectangle.prototype=new Rectangle();

//2.3 删除不需要属性
//delete PositionedRectangle.prototype.width;
//delete PositionedRectangle.prototype.height;

//2.4 然后定义PositionedRectangle的构造函数为PositionedRectangle;
PositionedRectangle.prototype.constructor=PositionedRectangle;

//2.5 定义PositionedRectangle的函数
PositionedRectangle.prototype.contains=function(x,y){
    return (x>this.x && x<this.x+this.width &&y>this.y && y<this.y+this.height);
}

PositionedRectangle.prototype.toString = function(){
    return "("+this.x +","+this.y+")"+Rectangle.prototype.toString.apply(this);
}


// 3.1
function ZPositionedRectangle(z,x,y,width,height){
    this.z =z;
    //调用PositionedRectangle的构造方法,相当于继承于PositionedRectangle类。
    PositionedRectangle.call(this,x,y,width,height);
}
ZPositionedRectangle.prototype = new PositionedRectangle();
ZPositionedRectangle.prototype.constructor=ZPositionedRectangle;

ZPositionedRectangle.prototype.toString = function(){
    return "z:"+this.z+" "+PositionedRectangle.prototype.toString.apply(this);
}

//运行

//var r = new Rectangle(4,3);
var r = new PositionedRectangle(23,44,4,3);
console.log("area:"+r.area());

console.log("rectangle:"+ r.toString());

var r = new ZPositionedRectangle(2,23,44,4,3);
console.log("z rectangle:"+ r.toString());

for(prop in r){
    console.log(prop+":"+ r.hasOwnProperty(prop));
}

r.pi=4;
console.log(r.pi);

 

 d

分享到:
评论

相关推荐

    由浅到深了解JavaScript类

    总之,JavaScript类提供了一种组织和抽象代码的方式,通过类我们可以创建具有特定属性和方法的对象。了解和熟练掌握JavaScript类的概念和用法,对于进行软件开发和程序设计至关重要,尤其是在构建复杂应用时。

    javascript对象创建

    本文将深入探讨JavaScript中的对象创建方式,包括类和继承的概念。 首先,让我们从最基础的创建对象的方式开始。在JavaScript中,可以使用字面量语法来创建一个简单的对象: ```javascript var obj = { name: '...

    JAVASCRIPT-使用面向对象的技术创建高级 Web 应用程序

    ### JavaScript使用面向对象的技术创建高级Web应用程序 #### JavaScript对象的本质:词典模型 在深入了解如何使用面向对象的技术创建高级Web应用程序之前,理解JavaScript中的对象是如何工作的至关重要。与C++或C#...

    面向对象JavaScript精要(英文原版pdf)

    - **第三章:JavaScript中的类和对象**:详细介绍如何使用JavaScript创建类和对象。 - **第四章:继承**:探讨JavaScript中实现继承的不同方式。 - **第五章:封装和私有性**:讲解如何在JavaScript中实现封装以及...

    Javascript 类和对象的实现

    ### JavaScript 类和对象的实现:深入探讨 #### 引言 JavaScript 作为一种脚本语言,其强大之处在于能够灵活地支持面向对象编程(OOP),尽管它最初设计时并非专门为此目的。JavaScript 的对象模型允许开发者以多种...

    子类化实现判断文本框的滑块是否到底

    1. **创建子类**: 首先,我们需要创建一个新的JavaScript类,比如叫做`ScrollAwareTextArea`。这个类将继承自原生的`HTMLTextAreaElement`,利用JavaScript的`class`关键字和`extends`关键字来实现: ```javascript...

    第15章 javascript面向对象与原型

    总的来说,JavaScript中的面向对象编程与传统的基于类的OOP有所不同,它通过原型链和构造函数来实现对象的创建和继承。正确理解并运用这些概念,可以让开发者更有效地利用JavaScript进行面向对象的编程。

    Javascript 面向对象的JavaScript进阶

    在面向对象的JavaScript中,类的成员可以根据它们与类和对象的关系分为“类成员”和“实例成员”。 ##### 8.2.1 实例属性和实例方法 **定义:** 实例成员包括实例属性和实例方法。每个对象实例都有自己的实例属性...

    JavaScript中的类继承

    总的来说,JavaScript中的类继承并不是一种与生俱来的特性,而是通过构造函数、原型链和继承辅助方法(如`inherits`和`uber`)模拟出来的。这种方式提供了面向对象编程的许多优点,同时保持了JavaScript原型继承的...

    javascript中的类理解

    JavaScript 中的类是一种重要的编程概念,它用于模拟现实世界中的对象和它们之间的关系。在 JavaScript 中,类的...随着对 JavaScript 更深入的学习,你将能够利用类来创建复杂的对象模型,实现更高级的面向对象编程。

    pro javascript design patterns

    在JavaScript中,可以通过创建一个新的类来“包装”原有的类,并提供一个符合新接口的方法。 ### 组合模式(Composite Pattern) 组合模式将对象组合成树形结构以表示部分整体的层次结构。在JavaScript中,这可以...

    JavaScript核心指南

    JavaScript作为一门基于原型的编程语言,其对象模型与基于类的面向对象编程语言(如Java和C++)存在显著差异。在基于类的语言中,类与实例是两个截然不同的概念。类是一个抽象的模板,用于定义一系列具有相同属性的...

    JavaApplet与JavaScript

    1. 创建一个继承自 `java.applet.Applet` 的公共子类,子类名应与源程序文件名相同。 2. 编译该源代码文件生成 `.class` 文件。 3. 在 HTML 文件中添加 `&lt;applet&gt;` 标签,指定 `.class` 文件的位置。 4. 当用户访问...

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

    当我们谈论类的继承时,我们指的是一个类(子类)可以获取另一个类(父类或超类)的属性和方法,从而实现代码复用和扩展。在本话题中,我们将深入探讨JavaScript中的类继承,并特别关注`this.callParent`这个方法,...

    javascript面向对象

    本文旨在深入解析JavaScript面向对象编程的基础,包括对象的基本概念、类与对象的关系、对象的属性与方法、封装、继承与多态,以及JavaScript中对象的实现方式。 #### 对象的基本概念 面向对象编程的核心在于对...

    javascript 继承派生

    **派生**,或称为子类化,是指创建一个新类(子类),该类基于现有类(父类)并可能添加新的属性和方法或者重写已有的。在JavaScript中,可以使用`Object.create()`方法或者通过构造函数的原型链(`new Constructor...

    类:练习创建Javascript类

    自ES6(ECMAScript 2015)起,JavaScript引入了类语法,使得代码更加简洁易读,同时也保持了与现有基于原型的继承体系的兼容性。本练习旨在帮助你掌握如何在JavaScript中创建和使用类。 一、定义类 在JavaScript中...

    JavaScript与OOP

    1. **类与对象**:在许多静态类型的面向对象语言中,类是创建对象的模板。然而,JavaScript并没有真正的类,而是使用构造函数和原型链来模拟类的行为。对象是实例化的结果,通过构造函数或工厂函数创建。 2. **封装...

    JavaScript继承

    例如,如果多个类都需要`toString`方法,可以通过创建一个基础类,然后让这些类继承该基础类,而不是在每个类中重复定义。 4.2 类式继承 虽然JavaScript没有真正的类,但是可以通过函数模拟类的结构。一个函数作为...

    详解Javascript继承的实现

    3. **浪费内存**:子类实例与父类实例共享了不必要的属性副本。 为解决这些问题,我们可以探索其他继承策略,比如使用`Object.create()`、ES6的类或继承库,如`_.extend()`(Lodash)、`inherit()`(Prototype.js)...

Global site tag (gtag.js) - Google Analytics