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

JavaScript OOP

阅读更多

JavaScript OOP

1. 什么是JavaScript

JavaScript 是一种描述性的脚本语言(Script Language),它可以非常自由地被嵌入到HTML 的文件之中。使用JavaScript 可以做什么呢?它的作用很简单,就是对网页浏览者当前所触发的事件进行处理或对网页进行初始化工作。它是事先在网页中编写好代码(或叫做“脚本”),然后 此代码伴随Html文件一起传送到客户端的浏览器上,由浏览器对这些代码进行解释执行,而其执行期间并没有劳驾服务器帮忙,这样就减轻了服务器的负担。
许多编程高手都瞧不起JavaScript编程,认为只是小孩子的玩意。的确,JavaScript作为一种脚本语言,比起其他语言来说,显得非常简单,没有很复杂的语法,没有庞杂的体系架构。

2. 面向对象编程(Object-Oriented Programming)

一个世界,可以完全由对象组成,而将算法所基于的世界只用对象表现出来,再进行后续代码的编写,这种编程方法就被称作面向对象的编程思想。
OOP的三大要素:
1. 封装
2. 继承
3. 多态

3. JavaScript如何实现OOP
3.1. 封装(Wrap)

JavaScript的对象封装,主要依靠function来实现。以下是一个简单的示例:

//*********************************************
// 定义Pet(宠物)对象
//*********************************************
function Pet() {
    //名称
    this.name = null;
    //颜色
    this.color = null;
    //获取名称
    this.getName = function() {
        return this.name;
    };
    //设置名称
    this.setName = function(newName) {
        this.name = newName;
    };
    //获取颜色
    this.getColor = function() {
        return this.color;
    };
    //设置颜色
    this.setColor = function(newColor) {
        this.color = newColor;
    };
    //定义一个需要实现的方法
    this.getFood = null;
    //获取宠物的描述信息
    this.toString = function() {
        return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
    };
}
3.2. 继承(inheritance)

JavaScript的继承的实现主要依靠prototype(原型)来实现,下面为Pet类编写一个子类。

//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
    //实现Pet中定义的getFood方法
    this.getFood = function() {
        return "fish";
    };
}

//声明Cat的原型,即Cat的父类
Cat.prototype = new Pet;

多层次继承
//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}

//声明PersianCat的原型,即PersianCat的父类
PersianCat.prototype = new Cat;
3.3.    重载(override)与多态(Polymorphism)
//重载Pet的toString方法
PersianCat.prototype.toString = function() {
    return "It's just a persian cat.";
};


注意:Override和Overload的区别,JavaScript是不支持Overload的,原因是……你自己想想吧。

JavaScript是一种弱类型的语言,所以不要把它与C++、JAVA等语言进行比较。

4. 附录
4.1. 完整的示例
4.1.1. Pet.js
//*********************************************
// 定义Pet(宠物)对象
//*********************************************
function Pet() {
    //名称
    this.name = null;
    //颜色
    this.color = null;
    //获取名称
    this.getName = function() {
        return this.name;
    };
    //设置名称
    this.setName = function(newName) {
        this.name = newName;
    };
    //获取颜色
    this.getColor = function() {
        return this.color;
    };
    //设置颜色
    this.setColor = function(newColor) {
        this.color = newColor;
    };
    //定义一个需要实现的方法
    this.getFood = null;
    //获取宠物的描述信息
    this.toString = function() {
        return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
    };
}

//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
    //实现Pet中定义的getFood方法
    this.getFood = function() {
        return "fish";
    };
}

//声明Cat的原型,即Cat的父类
Cat.prototype = new Pet;

//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}

//声明PersianCat的原型,即PersianCat的父类
PersianCat.prototype = new Cat;

//重载Pet的toString方法
PersianCat.prototype.toString = function() {
    return "It's just a persian cat.";
};

//*********************************************
// 定义Dog(狗)对象
//*********************************************
function Dog() {
    //实现Pet中定义的getFood方法
    this.getFood = function() {
        return "bone";
    };
}

//声明Dog的原型,即Dog的父类
Dog.prototype = new Pet;
4.1.2. Pet.htm

<script language="javascript" src="Pet.js" >
</ script >
< script language="javascript">
//定义一个Cat对象
var cat = new Cat();
cat.setName("MiMi");
cat.setColor("white");

//定义一个Dog对象
var dog = new Dog();
dog.setName("WangWang");
dog.setColor("yellow");

//定义一个PersianCat对象
var persianCat = new PersianCat();

//定义数组,保存上面的三个对象
var pets = new Array(3);
pets[0] = cat;
pets[1] = dog;
pets[2] = persianCat;

//测试程序
for(var i=0,size=pets.length;i<size;i++) {
    alert(pets[i].toString());
}
</script>
4.1.3. 运行结果


弹出三个对话框,分别如下:
The pet is MiMi,it's white,and it likes fish.
The pet is WangWang,it's yellow,and it likes bone.
It's just a persian cat.
本示例在IE6.0下测试通过。

分享到:
评论

相关推荐

    javascript oop模式讲解

    JavaScript OOP(面向对象编程)模式是编程领域中一种重要的设计思想,它允许开发者通过类和对象来组织和管理代码,提高代码的可重用性和可维护性。在这个讲解中,我们将深入探讨JavaScript中的OOP模式,特别是如何...

    javascript oop开发滑动(slide)菜单控件.docx

    ### JavaScript OOP 开发滑动 (Slide) 菜单控件 #### 一、概述 在本篇文章中,我们将探讨如何使用JavaScript面向对象编程(OOP)来开发一个可滑动的菜单控件。该控件能够根据用户的交互(如鼠标悬停)动态展示或隐藏...

    Javascript(OOP).rar_javascript_javascript O_oop javascript

    JavaScript,作为一种广泛应用于Web开发的动态编程语言,其面向对象编程(Object-Oriented Programming,简称OOP)特性是理解其高级用法的关键。本文档深入探讨了JavaScript中的面向对象特性,包括类、对象、继承、...

    Javascript oop设计模式 面向对象编程简单实例介绍

    JavaScript中的面向对象编程(OOP)是一种强大的编程范式,它允许我们以更接近现实世界的方式来组织代码。在JavaScript中,我们通常通过构造函数、原型和封装等概念来实现OOP。 首先,让我们看下传统的JavaScript...

    javascript-OOP:JavaScript OOP

    JavaScript OOP,即JavaScript面向对象编程,是JavaScript语言中一种重要的编程范式,它使得代码更加结构化、可维护和可重用。在JavaScript中,OOP主要通过类(Class)和对象(Object)来实现,同时利用了封装、继承...

    SoftUni---JavaScriptOOP:为 SoftUni 的 JavaScript OOP 课程提供作业解决方案

    JavaScript面向对象编程(Object-Oriented Programming,简称OOP)是JavaScript编程中极其重要的...在SoftUni---JavaScriptOOP-master这个压缩包中,可能包含了这些知识点的练习和示例代码,供学生实践和巩固所学知识。

    JAVASCRIPT OOP -- 参考资料

    NULL 博文链接:https://orange5458.iteye.com/blog/1387988

    玩转JavaScript OOP – 类的实现详解

    总的来说,JavaScript的OOP主要包括对象的创建、属性和方法的定义、以及继承和多态等概念。通过构造函数和原型对象,我们可以模拟类的结构,实现面向对象的设计模式,有效地组织和复用代码。理解这些概念对于编写...

    JavaScriptOOP:JavaScript 面向对象编程

    JavaScriptOOP,即JavaScript面向对象编程,是JavaScript编程中一种重要的编程范式,它使得代码更加模块化、可维护性和可重用性更强。在JavaScript中,面向对象编程主要依赖于三大特性:封装、继承和多态。接下来,...

    Sample-JavaScript-OOP-Exam-Restaurant-Manager:示例 JavaScript OOP 考试 - 餐厅经理

    在本项目"Sample-JavaScript-OOP-Exam-Restaurant-Manager"中,我们探讨了如何使用面向对象编程(OOP)技术来构建一个餐厅管理系统的JavaScript应用。这个项目主要适用于学习JavaScript OOP概念和实践的学员,通过...

    JavaScriptOOP-Homeworks

    JavaScriptOOP-Homeworks 是一个关于JavaScript面向对象编程(Object-Oriented Programming,简称OOP)的学习资源,可能是某个在线课程或教程的作业集合。这个压缩包可能包含了一系列的练习、项目或代码示例,旨在...

    javascript-oop-presentation:Javascript OOP演示

    JavaScript面向对象编程(OOP)是现代Web开发中不可或缺的一部分,尤其对于构建复杂、可维护的应用程序至关重要。在这个演示中,我们将深入探讨JavaScript中的面向对象编程概念,以便软件工程师能够更好地理解和应用...

    JavaScipt-OOP:JavaScript OOP课程作业

    JavaScript面向对象编程(Object-Oriented Programming,OOP)是JavaScript开发中不可或缺的一部分,它允许开发者组织代码,创建可重用的组件,并实现更复杂的逻辑。在这个“JavaScript OOP课程作业”中,我们将会...

    JavaScript OOP面向对象介绍

    ### JavaScript OOP面向对象介绍 #### 一、面向对象编程(OOP)概念 面向对象编程(Object-Oriented Programming,简称OOP)是一种程序设计思想。它将计算机程序视为一组对象的集合,而每个对象都可以接收其他对象...

    js_oop_info:关于 JavaScript OOP 的信息

    Javascript OOP 基础术语Field::一个不是函数的变量var x = 1; 方法:一个变量就是一个函数var x = function(){}; 成员:方法或字段Class : 一个旨在通过使用new关键字被多个实例重用的函数(还有其他方法可以创建一...

    javascriptoop:oo js的代码段

    以下是关于"javascriptoop:oo js的代码段"中涉及的关键知识点: 1. **类**: 在ES6(ECMAScript 2015)之前,JavaScript并没有内置的类机制,而是通过函数和原型来模拟类的概念。ES6引入了`class`关键字,提供了一...

    javascript的oop

    JavaScript的面向对象编程(OOP)是Web开发中不可或缺的一部分,它允许我们通过类和对象来组织和管理代码,提高代码的复用性和可维护性。这篇博客文章(链接已提供)深入探讨了JavaScript中的OOP概念,我们将在这里...

    JavaScriptOOP

    JavaScriptOOP,即JavaScript面向对象编程,是JavaScript语言中一种重要的编程范式,它使得代码更加模块化、可重用且易于维护。在JavaScript中,面向对象编程主要依赖于对象、类、继承、封装和多态等核心概念。 1. ...

Global site tag (gtag.js) - Google Analytics