`
emptyhan
  • 浏览: 29723 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 面向对象,定义类

阅读更多

    在javascript中定义类或对象有下面几种常用的方式:

    (1)工厂方式
    powered by 25175.net
    function createCar(color, doors, mpg){
    var tempCar = new Object;
    tempCar.color = color;
    tempCar.doors = doors;
    tempCar.mpg = mpg;
    tempCar.showColor = function (){
    alert(this.color);
    };
    return tempCar;
    }

    var car1 = createCar("red", 4, 23);
    var car2 = createCar("blue", 3, 25);
    car1.showColor();
    car2.showColor();

    定义了一个能创建并返回特定类型对象的工厂函数,看起来还是不错的,但有个小问题,每次调用时都要创建新函数showColor,我们可以把它移到函数外面,

    function showColor(){
    alert(this.color);
    }
    在工厂函数中直接指向它
    tempCar.showColor = showColor;

    这样避免了重复创建函数的问题,但看起来不像对象的方法了。

    (2)构造函数方式

    function Car(sColor, iDoors, iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.showColor = function (){
    alert(this.color);
    };
    }

    var car1 = new Car("red", 4, 23);
    var car2 = new Car("blue", 3, 25);

    car1.showColor();
    car2.showColor();

    可以看到与第一中方式的差别,在构造函数内部无创建对象,而是使用this 关键字。使用new 调用构造函数时,先创建了一个对象,然后用this来访问。
    这种用法于其他面向对象语言很相似了,但这种方式和上一种有同一个问题,就是重复创建函数。

    (3)混合的构造函数/原型方式

    这种方式就是同时使用构造函数方式和原型方式,综合他们的优点,构造函数方式前面介绍过了,现在看一下原型方式

    function Car(){

    }
    Car.prototype.color = "red";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 23;
    Car.prototype.showColor = function(){
    alert(this.color);
    };

    var car1 = new Car();
    var car2 = new Car();

    首先定义了构造函数Car,但无任何代码,然后通过prototype 添加属性
    优点:
    a. 所有实例存放的都是指向showColor 的指针,解决了重复创建函数的问题
    b. 可以用 instanceof 检查对象类型
    alert(car1 instanceof Car); //true

    缺点,添加下面的代码:

    Car.prototype.drivers = new Array("mike", "sue");

    car1.drivers.push("matt");

    alert(car1.drivers); //outputs "mike,sue,matt"
    alert(car2.drivers); //outputs "mike,sue,matt"

    drivers是指向Array对象的指针,Car的两个实例都指向同一个数组。

    下面就用一下混合方式:

    function Car(sColor, iDoors, iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("mike", "sue");
    }
    Car.prototype.showColor = function (){
    alert(this.color);
    };

    var car1 = new Car("red", 4, 23);
    var car2 = new Car("blue", 3, 25);

    car1.drivers.push("matt");
    alert(car1.drivers);
    alert(car2.drivers);

    这样就没有问题了,并且还可以使用 instanceof

    (4)动态原型法

    function Car(sColor, iDoors, iMpg){
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("mike", "sue");

    if(typeof Car.initialized == "undefined"){
    Car.prototype.showColor = function (){
    alert(this.color);
    };
    Car.initialized = true;
    }
    }

    var car1 = new Car("red", 4, 23);
    var car2 = new Car("blue", 3, 25);

    car1.drivers.push("matt");
    alert(car1.drivers);
    alert(car2.drivers);

    这种方式是我最喜欢的,所有的类定义都在一个函数中完成,看起来非常像其他语言的类定义,不会重复创建函数,还可以用 instanceof 
分享到:
评论

相关推荐

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

    ### 面向对象JavaScript精要 #### 一、书籍概览 本书《面向对象JavaScript精要》由Nicholas C. Zakas编写,是面向对象编程领域中的权威指南之一,尤其针对JavaScript这门语言。作者深入浅出地介绍了面向对象编程的...

    Javascript 面向对象的JavaScript进阶

    ### JavaScript面向对象进阶知识点详解 #### 8.1 面向对象编程的基本特性 在探讨面向对象的JavaScript之前,我们首先需要了解面向对象编程(Object-Oriented Programming, OOP)的基本特性:封装性、抽象性、继承...

    JavaScript面向对象编程指南(第2版).rar

    JavaScript是一种广泛...通过深入学习这本《JavaScript面向对象编程指南(第2版)》,开发者不仅能掌握JavaScript的面向对象编程基础,还能了解到实际项目中如何有效地运用这些知识,提升编程技巧和解决问题的能力。

    Javascript面向对象编程

    ### JavaScript面向对象编程详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发领域占据着举足轻重的地位。尽管JavaScript本质上是一种基于原型的语言,但它也支持面向对象编程的一些特性,使得...

    JavaScript面向对象编程指南.pdf

    JavaScript面向对象编程是指在JavaScript语言中使用面向对象的方法来编写程序。JavaScript是一种高级的、解释型的编程语言,它支持面向对象的编程范式,允许开发者创建对象、使用继承和多态等面向对象的特性。以下是...

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

    ### JavaScript面向对象精要 #### 一、概述 《JavaScript面向对象精要》是一本深入讲解JavaScript面向对象编程原理的专业书籍。本书由知名的前端开发者Nicholas C. Zakas撰写,全面介绍了JavaScript作为一种动态...

    javascript面向对象编程.pdf

    总而言之,学习现代JavaScript面向对象编程,有助于开发者在认识这门语言演化的基础上,运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时,测试和调试是保证代码质量不可或缺的环节,...

    JavaScript面向对象编程指南 pdf

    下面将详细探讨JavaScript面向对象编程的基本原理、特性以及实际应用。 1. **类与对象** - 在JavaScript中,对象是键值对的集合,可以通过字面量语法或构造函数创建。例如: ```javascript const person = { ...

    JavaScript面向对象编程指南

    JavaScript是一种广泛应用于Web开发的动态编程语言,尤其在构建交互式网页和富互联网应用...《JavaScript面向对象编程指南》这本书将帮助你进一步探索这个主题,通过实例和详细的解释,提升你的JavaScript编程技能。

    javascript面向对象编程(中文).pdf

    ### JavaScript面向对象编程知识点概述 #### 一、现代JavaScript编程概览 - **JavaScript的演进**:自诞生以来,JavaScript经历了从一个简单的脚本语言到现今被广泛应用于构建复杂应用的强大编程语言的过程。它的...

    javascript面向对象

    ### JavaScript面向对象编程详解 #### 引言 在软件工程领域,面向对象编程(OOP)是一种编程范式,它使用“对象”来设计软件。每个对象都可以包含数据(属性)和方法(行为)。JavaScript虽然起初并非为面向对象...

    面向对象JavaScript开发

    JavaScript,作为一种广泛应用于Web开发的动态脚本语言,最初被设计为简单的客户端脚本语言,但随着技术的发展,它已经发展出了丰富的面向对象编程(OOP)特性。面向对象JavaScript开发是现代Web开发中不可或缺的一...

    JavaScript面向对象基础.ppt

    在JavaScript中,面向对象编程(OOP)是其核心概念之一,允许开发者通过类和对象来组织和管理代码,提高代码的可重用性和可维护性。 8.1 面向对象术语 面向对象编程的基础包括类、对象、继承和多态等概念。类是对象...

    JavaScript 面向对象编程详细讲解文档

    JavaScript是一种动态类型的脚本语言,虽然它不像Java或C#那样拥有传统的类和实例机制,但它的面向对象编程能力仍然非常强大。JavaScript的核心在于对象、原型和隐式继承,这些都是理解其面向对象特性的重要概念。 ...

    javascript面向对象框架

    "javascript面向对象框架"这一主题涵盖了JavaScript中实现面向对象编程的框架,特别是Prototype和MooTools这两个优秀的库。 Prototype是JavaScript的一个开源库,它扩展了JavaScript的基本对象和函数,提供了强大的...

    基于闭包的JavaScript面向对象编程框架.pdf

    3. 基于闭包的JavaScript面向对象编程框架可以实现类的定义、继承和多态特征。 4. 闭包可以用来指定类的名称、父类、类的静态私有成员和公共成员。 5. 闭包可以用来实现继承,并指定子类和父类之间的关系。 6. 闭包...

    第15章 javascript面向对象与原型

    在深入讲解JavaScript面向对象与原型的知识点之前,首先需要了解JavaScript的基础知识。在JavaScript中,面向对象编程(OOP)的概念虽然存在,但是它的实现与传统基于类的语言有所不同。ECMAScript,也就是...

    JavaScript面向对象编程案例

    `JavaScript面向对象编程讲解.pptx`可能提供了更详细的理论解释和更多示例,帮助读者深入理解面向对象编程在JavaScript中的应用。 学习JavaScript面向对象编程,不仅有助于理解代码的结构和复用性,还有助于提高...

Global site tag (gtag.js) - Google Analytics