`
lj830723
  • 浏览: 132378 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Javascript 面向对象之封装

 
阅读更多
学习javascript,最难的地方是什么?个人感觉,Object(对象)最难。因为javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。
javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。
那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?
1. 生成对象的原始模式
假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。
 var Cat = { 
    name : '', 
    color : '' 
  }

然后生成实例对象,就等于是在调用函数:
  var cat1 = Cat("大毛","黄色"); 
  var cat2 = Cat("二毛","黑色");

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。
3. 构造函数模式
为了解决从原型对象生成实例的问题,javascript提供了一个构造函数(Constructor)模式。
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。 比如,猫的原型对象现在可以这样写,
   function Cat(name,color){ 
    this.name=name; 
    this.color=color; 
  }

我们现在就可以生成实例对象了。
   var cat1 = new Cat("大毛","黄色"); 
  var cat2 = new Cat("二毛","黑色"); 
  alert(cat1.name); // 大毛 
  alert(cat1.color); // 黄色

这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。
   alert(cat1.constructor == Cat); //true 
  alert(cat2.constructor == Cat); //true

javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。
   alert(cat1 instanceof Cat); //true 
  alert(cat2 instanceof Cat); //true

4. 构造函数模式的问题。
    构造函数方法很好用,但是存在一个浪费内存的问题。 请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:
   function Cat(name,color){ 
    this.name = name; 
    this.color = color; 
    this.type = "猫科动物"; 
    this.eat = function(){alert("吃老鼠");}; 
  }

还是采用同样的方法,生成实例:
   var cat1 = new Cat("大毛","黄色"); 
  var cat2 = new Cat ("二毛","黑色"); 
  alert(cat1.type); // 猫科动物 
  cat1.eat(); // 吃老鼠

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。
   alert(cat1.eat == cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。
5. Prototype模式。
    javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。 这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
   function Cat(name,color){ 
    this.name = name; 
    this.color = color; 
  } 
  Cat.prototype.type = "猫科动物"; 
  Cat.prototype.eat = function(){alert("吃老鼠")};

 //然后,生成实例。
   var cat1 = new Cat("大毛","黄色"); 
  var cat2 = new Cat("二毛","黑色"); 
  alert(cat1.type); // 猫科动物 
  cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。
  alert(cat1.eat == cat2.eat); //true

6. Prototype模式的验证方法。
    isPrototypeOf() 这个方法用来判断,某个proptotype对象和某个实例之间的关系。
   alert(Cat.prototype.isPrototypeOf(cat1)); //true 
  alert(Cat.prototype.isPrototypeOf(cat2)); //true

hasOwnProperty() 方法,每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。
   alert(cat1.hasOwnProperty("name")); // true 
  alert(cat1.hasOwnProperty("type")); // false

in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。
   alert("name" in cat1); // true 
  alert("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。
for(var prop in cat1) { 
    alert("cat1["+prop+"]="+cat1[prop]); 
}
分享到:
评论

相关推荐

    Javascript面向对象编程.

    在提供的资源中,《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导,而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...

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

    Zakas编写,是面向对象编程领域中的权威指南之一,尤其针对JavaScript这门语言。作者深入浅出地介绍了面向对象编程的基本原理以及如何将这些原理应用于JavaScript中。 #### 二、面向对象编程基础 面向对象编程...

    JAVASCRIPT 面向对象编程精要

    本文介绍了JavaScript面向对象编程的基本概念和技术细节,包括变量和对象的基础用法、函数的作用以及如何通过封装和继承来构建复杂的对象层次结构。JavaScript的独特之处在于它的灵活性和动态性,这使得它成为了一种...

    Javascript 面向对象的JavaScript进阶

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

    axios 面向对象封装

    标题“axios 面向对象封装”表明我们将创建一个自定义的 Axios 实例,它可以作为一个独立的对象在多个模块或组件之间复用。这种封装通常包括创建一个构造函数,用于初始化配置,以及定义一些方法,如发送GET、POST等...

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

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

    javascript面向对象编程.pdf

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

    JavaScript面向对象编程指南.pdf

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

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

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

    JavaScript面向对象编程指南

    这些只是JavaScript面向对象编程的一些基本概念和技巧,实际应用中还有更深入的模式和策略,如模块化、设计模式等。理解并熟练运用这些概念,将有助于你编写出更加高效、可维护的JavaScript代码。

    JavaScript面向对象编程指南 pdf

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

    面向对象JavaScript开发

    JavaScript,作为一种广泛应用...JavaScript 面向对象程序设计——继承与多态.pdf 和 JavaScript 面向对象程序设计——封装.pdf 这两个文档可能深入探讨了这些主题,帮助读者深入理解并掌握JavaScript的面向对象开发。

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

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

    Javascript面向对象编程

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

    JavaScript程序设计课件:面向对象概述.pptx

    面向对象有封装、继承、多态性的特性,所以具有易维护、易复用、易扩展的特点。 类的调用需要实例化,开销较大,因此性能方面较面向过程低。 6.1.1 面向过程与面向对象 6.1 面向对象概述 主讲:重庆机电职业技术大学...

    javascript面向对象

    本文旨在深入解析JavaScript面向对象编程的基础,包括对象的基本概念、类与对象的关系、对象的属性与方法、封装、继承与多态,以及JavaScript中对象的实现方式。 #### 对象的基本概念 面向对象编程的核心在于对...

    javascript面向对象框架

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

Global site tag (gtag.js) - Google Analytics