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

细说JavaScript面向对象编程

    博客分类:
  • JS
阅读更多

 

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

那么,对于JavaScript面向对象编程又是怎么一回事呢?实际上跟C++JAVA的面向对象编程是有挺大的差异,很多开发者对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的时候会更加游刃有余了。

 

0
0
分享到:
评论

相关推荐

    《细说Android 4.0 NDK编程》PDF

    《细说Android 4.0 NDK编程》

    细说javascript函数从函数的构成开始.docx

    细说javascript函数从函数的构成开始.docx

    细说Android4.0NDK编程.pdf

    《细说Android4.0NDK编程》由王家林所著,通过NDK,应用程序可以非常方便地实现Java与C/C++代码的相互沟通。本书顺应Android软/硬件、云计算整合潮流,详细剖析了NDK开发中涉及的各类问题和解决方案:搭建Android ...

    c# 面向对象 --用书.rar

    c# 面向对象 详细讲解 不同层次不同的理解

    细说Android 4.0 NDK编程 源码

    本书顺应Android软件、硬件、云计算整合潮流,详细剖析了NDK开发过程中会涉及的各类问题和解决方案,本书还特别介绍了Android UI编程技术,对源代码进行了细致的剖析。

    JavaScript语言精粹pdf

    JavaScript语言精粹pdf

    细说JavaScript

    本课程包含14章59个小节课程,内容涵盖:JavaScript 简介、JavaScript基本语法、JavaScript 数据类型、表达式和运算符、语句和流程控制、对象、数组、函数、window 对象、DOM 访问,jQuery等。

    《细说PHP》配套源码

    内容涵盖了PHP的运行环境搭建、Web服务器Apache的配置与应用、动态网站开发的前台技术、PHP编程语言的语法、PHP的常用功能模块和实用技巧、MySQL数据库的设计与应用、PHP 5面向对象的程序设计思想、Web开发的设计...

    细说Linux细说Linux

    细说Linux 细说Linux 细说Linux 细说Linux 细说Linux 细说Linux

    细说javascript函数从函数的构成开始

    javascript函数是一个比较奇怪的东西,接触一段时间你就会犯迷糊,弄不明白它到底是什么了。你是否会因为有的javascript函数没有名字...函数名 在面向对象语言中,函数一般都有名称,但javascript函数不一定,这类函数

    细说PHP(第2版)

    内容涵盖了动态网站开发的前台技术(HTML+CSS)、PHP编程语言的语法、PHP的常用功能模块和实用技巧、MySQL数据库的设计与应用、PHP面向对象的程序设计思想、数据库抽象层PDO、Smarty模板技术、Web开发的设计模式、...

    细说PHP第二版

    细说PHP第二版,扫描版,PHP入门、而且面向对象设计讲的非常好,结合设计模式效果更加

    细说PHP(第二版)(电子书 文字版 完整版)高洛峰

    内容涵盖了PHP的运行环境搭建、Web服务器Apache的配置与应用、动态网站开发的前台技术、PHP编程语言的语法、PHP的常用功能模块和实用技巧、MySQL数据库的设计与应用、PHP 5面向对象的程序设计思想、Web开发的设计...

    细说Android4.0NDK编程带完整书签

    资源名称:细说Android 4.0 NDK编程 带完整书签资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    《细说android 4.0 ndk编程》源码

    王家林《细说android 4.0 ndk编程》书中的源代码。

    细说Android 4.0 NDK编程 书中源码

    《细说Android 4.0 NDK编程》书中的源码。 内容简介通过NDK,应用程序可以非常方便地实现Java与C/C++代码的相互沟通。

    细说PHP(第2版) - 高洛峰

    内容涵盖了动态网站开发的前台技术(HTML+CSS)、PHP编程语言的语法、PHP的常用功能模块和实用技巧、MySQL数据库的设计与应用、PHP面向对象的程序设计思想、数据库抽象层PDO、Smarty模板技术、Web开发的设计模式、...

    细说PHP(第2版) - 高洛峰.mobi

    内容涵盖了动态网站开发的前台技术(HTML+CSS)、PHP编程语言的语法、PHP的常用功能模块和实用技巧、MySQL数据库的设计与应用、PHP面向对象的程序设计思想、数据库抽象层PDO、Smarty模板技术、Web开发的设计模式、...

    《细说PHP》

    对于PHP应用开发的新手而言,《细说PHP》不失为一本好的入门教材,内容既实用又全面,辅以视频教程,使读者轻松掌握所学知识

Global site tag (gtag.js) - Google Analytics