JavaScript面向对象编程入门教程

尽管面向对象JavaScript与其他语言相比之下存在差异,并由此引发了一些争论,但毋庸置疑,JavaScript具有强大的面向对象编程能力

本文先从介绍面向对象编程开始,然后回顾JavaScript对象模型,最后演示JavaScript中的面向对象编程概念。

JavaScript回顾

如果你对诸如变量(variables)、类型(types)、函数(functions)、以及作用域(scope)等JavaScript概念觉得心里没底,那么你可以阅读重新介绍JavaScript中的这些主题。你还可以查阅JavaScript 1.5核心指南
面向对象编程

面向对象编程是一种编程范式(paradigm),即使用抽象来创建基于真实世界的模型。它使用了几种以前建立的范式技术,包括模块化(modularity)、多态(polymorphism)、和封装(encapsulation)。今天,许多流行的编程语言(比如Java、JavaScript、C#、C++、Python、PHP、Ruby、以及Objective-C)都支持面向对象编程(OOP)。

面向对象编程可视为使用协作对象集合来进行软件设计,这与传统观点相反,传统观点把程序视为函数集合,或者简化为计算机指令列表。在面向对象编程中,每个对象都具有以下能力:接收消息、处理数据、以及给其他对象发送消息。每个对象都可以视为一个独立的具有不同角色或责任的小机器。
面向对象编程旨在为编程提升更大的灵活性和可维护性,并在大规模软件工程中广泛流行。由于其非常重视模块化,因此面向对象代码旨在让开发更简单、稍后理解起来更容易,而且相对于较少采用模块化的编程方法,使得对于复杂情况及步骤的分析、编码和理解更加直接。

专用术语

类(Class)
~ 定义对象的特征(characteristics)。
对象(Object)
~ 类的实例(Instance)。
属性(Property)
~ 某一对象特征(characteristic),例如颜色。
方法(Method)
~ 某种对象能力,例如行走。
构造函数(Constructor)
~ 实例化(instantiation)时所调用的方法。
继承(Inheritance)
~ 一个类可以继承来自另一个类的特征。
封装(Encapsulation)
~ 一个类只定义该对象的特征,一个方法只定义该方法如何执行。
抽象(Abstraction)
~ 将某一对象的复杂继承、方法、属性结合在一起,而且必须能够模拟某一现实模型。
多态(Polymorphism)
~ 不同类可能会定义相同的方法或属性。
对于面向对象编程的进一步描述,参阅维基百科的面向对象编程词条。

基于原型的编程

基于原型的编程(Prototype-based programming)是一种面向对象编程风格,其中类(classes)并不存在,并且行为重用(在基于类的语言中称为继承)是通过粉饰充当原型的现存对象来完成的。这种模式也称为无类的(class-less)、面向原型的(prototype-oriented)、或基于实例(instance-based)的编程。
关于基于原型语言的最初(且非常规范的)示例就是由David Ungar和Randall Smith开发的Self编程语言。然而,这种无类编程风格最近越来越受欢迎,并且已被一些编程语言采用,例如avaScript、Cecil、NewtonScript、Io、MOO、REBOL、Kevo、Squeak(当使用Viewer框架来操纵Morphic组件时)、及其他几种语言。

JavaScript面向对象编程

核心对象(Core Objects)

JavaScript有几个包含在其核心中的对象;例如,Math、Object、Array、以及String等对象。下面的示例演示了如何使用Math对象的random()方法获取随机数。

代码如下:

alert(Math.random());

提示:本例和所有其他示例都假设已在全局范围内定义了函数名alert(正如包含在web浏览器中的alert一样)。alert函数实际上不是JavaScript本身的一部分。

JavaScript核心对象列表,参阅JavaScript 1.5核心参考:全局对象(Global Objects)。
JavaScript中的每个对象都是一个Object对象的实例,并因此继承其所有属性和方法。

自定义对象(Custom Objects)

类(The Class)

JavaScript是基于原型的语言,其中不包含可在如 C++或Java中找到的类声明(class statement)。有时这会让一些习惯于具有类声明语言(languages with a class statement)的程序员感到困惑。不过,JavaScript用函数(functions)作为类。定义一个类简单到就是定义一个函数。在下例中,我们定义了名为Person(人)的新类。


代码如下:

function Person() { }

对象(类实例)(The Object (Class Instance))

要创建obj对象的一个新实例,我们使用语句new obj,同时将结果(其类型是obj)赋给某个变量(variable),以便稍后访问。
在下例中,我们首先定义名为Person的类,然后创建两个实例(person1和person2)。


代码如下:

function Person() {}
var person1 = new Person();
var person2 = new Person();

还可参阅新的实例化替代方法Object.create

构造函数(The Constructor)

当实例化时(创建对象实例的瞬间)是会调用构造函数。构造函数是类的一个方法。而在JavaScript中,会函数(function)作为作为该对象的构造函数;因此,也就无需显式定义一个构造函数方法。类中声明的每个行为在实例化时都会执行。

构造函数用于设置对象属性或调用方法为使用该对象做准备。本文稍后会介绍,通过使用一种不同的语法来添加类方法及其定义 。

在下例中,当实例化Person时,Person类的构造函数会显示一个警告框。

代码如下:

function Person() {
    alert('Person instantiated');
}
var person1 = new Person();
var person2 = new Person();

属性(对象属性)(The Property (object attribute))

属性是包含在类中的变量;每个对象实例都有这些属性。属性应设置在类(函数)的原型(prototype)属性中,以便继承正常工作。
在类中操作属性是通过this关键字实现的,this引用当前对象。在类外部访问(读或写)某个属性要通过以下语法:InstanceName.Property;这与C++、Java、以及其他一些语言所用语法相同。(在类内部使用this.Property的语法来获取或设置属性值)。

在下例中,我们为Person类定义gender(性别)属性,然后在初始化时定义该属性。


代码如下:

function Person(gender) {
    this.gender = gender;
    alert('Person instantiated');
}
var person1 = new Person('Male'); // Male: 男
var person2 = new Person('Female'); // Female: 女
//显示person1的性别
alert('person1 is a ' + person1.gender); // person1 is a Male

方法(The methods)

方法遵循与属性相同的逻辑;区别在于它们是函数而且被定义为函数。调用方法与访问属性相似,不过你要在方法名末尾添加(),可能会有参数(arguments)。定义一个方法,就是为该类prototype属性上的某个命名属性指定一个函数;函数被分配到的那个名称就是在对象上调用该方法的名称。
在下例中,我们为Person类定义并使用sayHello()方法。


代码如下:

function Person(gender) {
    this.gender = gender;
    alert('Person instantiated');
}
Person.prototype.sayHello = function() {
    alert('hello');
};
var person1 = new Person('Male');
var person2 = new Person('Female'); // 调用Person的sayHello方法。
person1.sayHello(); // hello

在JavaScript中,方法是作为属性被绑定到某个类/对象的普通函数对象,这意味着,可以“脱离上下文(out of the context)”来调用它们。考虑如下示例代码:


代码如下:

function Person(gender) {
    this.gender = gender;
}
Person.prototype.sayGender = function() {
    alert(this.gender);
};
var person1 = new Person('Male');
var genderTeller = person1.sayGender;
person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined
alert(genderTeller === person1.sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true

此示例一次演示了多个概念。这表明,在JavaScript中没有“基于对象的方法(per-object methods)”,因为该方法的所有引用都指向完全相同的函数,即我们起初在原型上定义的那个函数。当某个函数被作为方法(或确切地说是属性)调用时,JavaScript会将当前的“对象上下文(object context)”“绑定”到特定的“this”变量。这与调用该函数对象的“call”方法等效,如下所示:


代码如下:

genderTeller.call(person1); //alerts 'Male'e

更多相关信息,请参阅Function.callFunction.apply

继承(Inheritance)

继承是一种方法,用于创建作为一个或多个类专用版本的类。(JavaScript仅支持单类继承)。这个专用类通常被称为子类(child),而其他类通常被称为父类(parent)。在JavaScript中,你要完成继承,需将父类的实例赋给子类,然后将子类特化(specializing)。

提示:由于JavaScript不检测的子类的prototype.constructor(原型的构造函数),参阅Core JavaScript 1.5核心参考:Global Objects:Object:prototype属性,因此我们必须手动指定该值。

在下例中,我们定义Student类作为Person的子类。然后我们重新定义sayHello()方法,并添加sayGoodBye()方法。

代码如下:

// 定义Person类
function Person() {}
Person.prototype.walk = function() {
    alert('I am walking!');
};
Person.prototype.sayHello = function() {
    alert('hello');
};
// 定义Student类
function Student() {
    //调用父类构造函数
    Person.call(this);
}
// 继承Person
Student.prototype = new Person(); // 修正构造函数指针,由于它指向Person
Student.prototype.constructor = Student; // 替换sayHello方法
Student.prototype.sayHello = function() {
    alert('hi, I am a student');
}
// 添加sayGoodBye方法
Student.prototype.sayGoodBye = function() {
    alert('goodBye');
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye(); // 检验继承
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true

封装

在上例中,Student无须知晓Person类的walk()方法是如何实现的,但仍可使用该方法;Student类无须显式定义该方法,除非我们想改变它。这称为封装(encapsulation),这样每个类继承其父类的方法,并且只需定义它所希望改变的东西。

抽象

抽象是一种机制(mechanism),允许对处理中的问题的当前部分进行建模。这可以通过继承(特化)或组合(composition)来实现。JavaScript通过继承实现特化(specialization),通过让类实例成为其他对象的属性值实现组合。
JavaScript的Function类继承自Object类(这说明模型的特化),并且Function.prototype属性是Object的实例(这说明了组合)。


代码如下:

var foo = function() {};
alert('foo is a Function: ' + (foo instanceof Function));
alert('foo.prototype is an Object: ' + (foo.prototype instanceof Object));

多态

就像所有的方法和属性被定义在原型属性内部一样,不同的类可以定义具有相同名称的方法;方法的作用域限于定义它们的类之内。这仅当两个类之间没有父子关系(当一个类没有从继承链中的其他类继承时)时才为真。

提示

本文中所提出的面向对象编程实现技术不仅适用于JavaScript,因为就如何进行面向对象编程而言,这是非常灵活的。
同样,这里展示的技术既没有使用任何语言技巧(language hacks),也没有模仿其他语言的对象理论实现。
在JavaScript中,还有其他更高级的面向对象编程的技术,但是那些内容已超出了这篇介绍性文章的范围。

(0)

相关推荐

  • JS面向对象编程详解

    序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些情况下,原型模式能够提供一定的便利,但在复杂的应用中,基于原型的面向对象系统在抽象性与继承性方面差强人意.由于JavaScript是唯一一个被各大浏览器支持的脚本语言,所以各路高手不得不使用各种方法来提高语言的便利性,优化的结果就是其编写的代码越来越像类语言中的面向对象方式,从而也掩盖了JavaSc

  • Javascript 面向对象(一)(共有方法,私有方法,特权方法)

    私有方法:私有方法本身是可以访问类内部的所有属性的,即私有属性和公有属性.但是私有方法是不可以在类的外部被调用. 私有方法写法: 复制代码 代码如下: function myClass () { var private_attribute = initial_value; function private_method () { } var private_method2 = function () { } } 实例showpet()就是一个私有方法 复制代码 代码如下: var pet=fun

  • js一般方法改写成面向对象方法的无限级折叠菜单示例代码

    本例是应用别人的例子,原来那位老兄是用一般方法写成的无限级折叠菜单,在此先感谢他!后来我就通过了一些简化修改,将原来的例子改成了面向对象的方式,实例中的展开与闭合的小图标可以自己重新添加,从而更好的查看效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • JavaScript面向对象之Prototypes和继承

    一.前言 本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述,是理解JS OO 的佳作之一.翻译不好的地方望大家修改补充. 二.正文 JavaScript中的面向对象不同于其他语言,在学习前最好忘掉你所熟知的面向对象的概念.JS中的OO更强大.更值得讨论(arguably).更灵活. 1.类和对象 JS从传统观点来说是面向对象

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • JS面向对象编程之对象使用分析

    因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小"巧"的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的"误解",一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写JAVA类似的代码一样,能够面向对象进行开发. 所以下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程.其实使用JS进行面向对象开发也不是很难的事情,因为在JS中每一

  • javascript面向对象包装类Class封装类库剖析

    javascript是个入门门槛很低的语言,甚至一个从来没有接触过javascript的技术人员,几小时内就可以写出一个简单有用的程序代码. 但是如果因此你就下结论:javascript是门简单的语言.那你就大错特错了.想写出高性能的代码,同样需要具备一个高级程序员的基本素养. 一个java或者c++程序员,不一定能写出高性能的javascript代码,但更容易写出高性能的javascript代码. javascript的简单是基于它"胸襟广阔"的包容性.它声明时,不需要指定类型,甚至

  • 面向对象的Javascript之二(接口实现介绍)

    就足以说明接口在面向对象的领域中有多重要.但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性.所幸的是JS拥有强大的灵活性(我在上文已谈过),这使得模仿接口特性又变得非常简单.那么到底是接口呢? 接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信. 那使用接口到底有哪些好处呢?简单地说,可提高系统相似模块的重用性,使得不同类的通信更加稳固.一旦实现接口,

  • javascript面向对象入门基础详细介绍

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

  • JavaScript面向对象编程入门教程

    尽管面向对象JavaScript与其他语言相比之下存在差异,并由此引发了一些争论,但毋庸置疑,JavaScript具有强大的面向对象编程能力 本文先从介绍面向对象编程开始,然后回顾JavaScript对象模型,最后演示JavaScript中的面向对象编程概念. JavaScript回顾 如果你对诸如变量(variables).类型(types).函数(functions).以及作用域(scope)等JavaScript概念觉得心里没底,那么你可以阅读重新介绍JavaScript中的这些主题.你还

  • 再谈javascript面向对象编程

    另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也来自Javascript这个悲催的名称,我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了,让Javascript这么多年来受了这么多不白之冤,人们都认为他是Java的

  • php面向对象程序设计入门教程

    本文实例讲述了php面向对象程序设计.分享给大家供大家参考,具体如下: 1.面向对象与面向过程的对比 面向过程:以事件为中心,分几个步骤去完成.不可扩展,html与php不分离 面向对象:自己作为指挥者,指挥别人去做.具有可扩展性,html和php代码分离 2.什么是对象? 对象:自然间形形色色存在的可以看得见的东西(其实这个也不会很准确),[在代码中表现为]由代码执行出来的效果 3.什么是面向对象? OOP(面向对象编程)是Object-oriented programming的缩写,具有灵活

  • Javascript 面向对象编程(一) 封装

    学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

  • 浅谈javascript 面向对象编程

    感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript面向对象编程",接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开. 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子: 复制代码 代码如下: <script type="text/javascript"> function myInfo(){ var name ="老鱼&quo

  • JavaScript 面向对象编程(2) 定义类

    本文承接上一篇JavaScript面向对象编程(1) 基础. 上篇说过,JavaScript没有类的概念,需要通过函数来实现类的定义.先通过一个例子说明: 复制代码 代码如下: function myClass() { var id = 1; var name = "johnson"; //properties this.ID = id; this.Name = name; //method this.showMessage = function() { alert("ID:

  • 老鱼 浅谈javascript面向对象编程

    感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript面向对象编程",接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开. 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子: 复制代码 代码如下: <script type="text/javascript">// <![CDATA[ function myInfo(){ var nam

  • javascript面向对象快速入门实例

    本文深入浅出的讲述了javascript面向对象快速入门实例.分享给大家供大家参考.具体如下: javascript面向对象入门案例: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Cat(){//js中对象的定义与函数一样,不同点在于怎么样调用. } var cat1 = new Cat();//创建类实例 //js中类属性可以动态添加,并不需要写在原

  • Linux Shell 脚本编程入门教程

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操作.在Linux GUI日益完善的今天,在系统管理等领域,Shell编程仍然起着不可忽视的作用.深入地了解和熟练地掌握Shell编程,是每一个Linux用户的必修 功课之一. Linux的Shell种类众多,常见的有:Bourne Shell(/usr/bin/sh或/bin/sh).Bourne

  • 深入剖析JavaScript面向对象编程

    二. Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫&qu

随机推荐