JavaScript面向对象的编程

面向对象编程,大家听得多并且也一直在使用着,面向对象程序语言具有三个基本特征: 封装、继承、多态。概括性地理解,封装就是把数据或者方法等相关信息存储在对象中的能力。继承就是从另一个类中获得属性和方法的能力。多态就是编写和实现名字相同但是行为不同的函数或方法的能力。

那么,对于JavaScript面向对象编程又是怎么一回事呢?实际上跟C++、JAVA的面向对象编程是有挺大的差异,很多开发者对JavaScript如何创建类一直处于模糊状态,甚至没能理解。本文着重介绍JavaScript是如何创类对象的。

JavaScript有很多创建对象和类的方法。

1、最原始的方式,先创建对象,再赋予属性和方法。

var cat =new Object();

cat.color=”黑”;

cat.age=3;

cat.eat=function(){

alert(“捉老鼠!”);

}

这个方式创建对象,存在的问题是如果需要创建多个对象,操作起来就非常繁琐了,每次都要设置属性和赋值。于是有下面的方式。

2、工厂方法:返回特定类型的对象,实际上就是一个返回对象的方法。

function createCat(){

var cat =new Object();

cat.color=”黑”;

cat.age=3;

cat.eat=function(){

alert(“捉老鼠!”);

}

return cat;

}

var cat1 =createCat();

var cat2 =createCat();

将例子1中的代码包在一个方法中,添加一个return语句返回这个对象。调用这个函数即创建了这个对象。

PS:例子2中的属性值是设定死的,为了达到更好的效果可以这样做,让方法带上参数:

function createCat(color,age){…}

var cat1 = createCat(“白”,2);

var cat2 = createCat(“黑”,1);

有时候,对象中的某个方法可能在其他的域也需要用到,但是这个方法又是这个对象里面需要有的方法,这样该怎么做呢?先看事例代码:

function eat(){

alert(“捉老鼠!”);

}

function createCat(color,age){

var cat =new Object();

cat.color=color;

cat.age=age;

cat.eat= eat; //这里只给方法名,不带货号

return cat;

}

var cat= createCat(“黑”,2);

cat.eat();     //输出  “捉老鼠”

由此可见,对象内的方法可以是外部方法,只不过这个外部的方法不太像是对象的方法。

3、构造函数方式创建类。类似JAVA的构造函数了。

function Cat(color,age){

this.color = color;

this.age=age;

this.eat = function(){

alert(“捉老鼠”);

}

}

var cat = new Cat(“白”,2);

使用this关键字来代替类对象,当使用new时,会先创建一个只有this能访问的对象,这个对象直接赋予this属性,默认情况下,是构造函数返回的值,不必明确使用return运算符。

跟工厂方法相似,构造函数会重复生产函数,为每个对象都创建独立的函数版本。也可以用外部函数重写构造函数,这么做语义上无任何意义,下面的原型方式解决这个问题。

4、原型方式。利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型。

首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。

function Cat(){  }

Cat. prototype.color = “白”;

Cat. prototype.age=2;

Cat. prototype.eat=function(){alert(“捉老鼠”);}

var cat = new Cat();

首先定义构造函数(Cat),无任何代码。通过给 Cat 的 prototype 属性添加属性去定义 Cat 对象的属性。调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Cat 实例存放的都是指向 eat() 函数的指针。从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。

5、混合构造函数和原型方式。联合使用构造函数和原型方式。它的概念很简单,用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

function Cat(color,age){

this.color = color;

this.age = age;

}

Cat.prototype.eat=function(){alert(“捉老鼠”);};

var cat = new Cat(“黑”,1);

cat.eat();   //输出捉老鼠

这就更像是一般对象了。据说这是JavaScript主要的创建类和对象的方式。

6、动态原型方法。

我们平常都习惯使用JAVA,也对JAVA创建类方式根深蒂固,难免会对上面这种创建方式感觉别扭,这个动态原型方法就显得更友好自然了。

function Cat(color,age) {

this.color = color;

this.doors = age;

if (typeof Cat._initialized == "undefined") {

Cat.prototype.eat = function() {

alert(“捉老鼠!”);

};

Cat._initialized = true;

}

}

该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,这段代码看起来更像其他语言中的类定义了。

7、混合工厂方法。目的是创建假构造函数,只返回另一种对象的新实例。

function Cat() {

var tempcat = new Object;

tempCat.color = "黑";

tCat.age = 25;

tempCat.eat = function() {

alert(“捉老鼠”);

};

return tempCat;

}

var cat = new Cat();

与经典方式不同,这种方式使用 new 运算符,使它看起来像真正的构造函数。

综上所述,目前使用最广泛的是第5种混合构造函数和原型方式。没有固定说只用哪一种方式,开发者可以根据自己的习惯,去熟练运用一种就行。掌握了JavaScript的面向对象技术,在日后使用JavaScript的时候会更加游刃有余了。

时间: 2024-11-15 00:34:07

JavaScript面向对象的编程的相关文章

JavaScript 面向对象的编程(二) 类的封装

类的定义 方式一 var Book = function(id, name, price){ //私有属性,外部不能直接访问 var num = 1; //私有方法, function checkId(){}; this.getName = function(){}; this.getPrice = function(){}; this.setName = function(){}; this.setPrice = function(){}; this.id = id; this.copy =

JavaScript面向对象之类的创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

[连载]JavaScript讲义(03)--- JavaScript面向对象编程

[连载]JavaScript讲义(03)--- JavaScript面向对象编程,布布扣,bubuko.com

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

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

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

再谈javascript面向对象编程

前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也 来自Javascript这个悲催的名称,

JavaScript面向对象编程深入分析

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

JavaScript 面向对象编程

写的项目需要把js封装处理,不然很乱..然后就想到前端大神阮一峰了,去blog搜索一下果然有收获 参考文章: Javascript定义类(class)的三种方法 Javascript 面向对象编程(一):封装 此处使用极简主义法: 如何定义一个类: 此法是定义一个生成器以及构造函数(类似工厂模式吧) var Cat = { createNew: function(){ var cat = {}; cat.name = "大毛"; cat.makeSound = function(){

【转】Javascript 面向对象编程(一):封装

原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"