学习Javascript,最难的地方是什么?
我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。
下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了
以下两本书籍:
《面向对象的Javascript》(Object-Oriented JavaScript)
《Javascript高级程序设计(第二版)》(Professional JavaScript for Web Developers, 2nd Edition)
它们都是非常优秀的Javascript读物,推荐阅读。
笔记分成三部分。今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承"(Inheritance)。
============================
Javascript 面向对象编程(一):封装
作者:阮一峰
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。
那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?
1. 生成对象的原始模式
假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。
复制代码 代码如下:
var Cat = {
name : '',
color : ''
}
现在,我们需要根据这个原型对象,生成两个实例对象。
复制代码 代码如下:
var cat1 = {}; // 创建一个空对象
cat1.name = "大毛"; // 按照原型对象的属性赋值
cat1.color = "黄色";
var cat2 = {};
cat2.name = "二毛";
cat2.color = "黑色";
好了,这就是最简单的封装了。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。
2. 原始模式的改进
我们可以写一个函数,解决代码重复的问题。
复制代码 代码如下:
function Cat(name,color){
return {
name:name,
color: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模式的验证方法
6.1 isPrototypeOf()
这个方法用来判断,某个proptotype对象和某个实例之间的关系。
复制代码 代码如下:
alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true
6.2 hasOwnProperty()
每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。
复制代码 代码如下:
alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false
6.3 in运算符
in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。
复制代码 代码如下:
alert("name" in cat1); // true
alert("type" in cat1); // true
in运算符还可以用来遍历某个对象的所有属性。
for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }
未完,请继续阅读这个系列的第二部分《构造函数的继承》和第三部分《非构造函数的继承》。
详细出处参考:http://www.jb51.net/article/28127.htm
分享到:
相关推荐
JavaScript面向对象程序设计(1): 前言 JavaScript面向对象程序设计(2): 数组...JavaScript面向对象程序设计(6): 封装 JavaScript面向对象程序设计(7): 闭包 JavaScript面向对象程序设计(8): 优雅的封装还是执行的效率?
JavaScript程序设计 面向过程与面向对象 6.1.1 面向过程与面向对象 1、概念 面向过程(Procedure Oriented)也可称之为“面向记录”,是一种以过程为中心的编程思想。它注重的是具体的步骤,只有按照步骤一步一步...
但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么...
JavaScript面向对象编程指南,关于对象,属性,方法,类,封装,继承,多态的详细讲解和介绍
本电子书包括专业JavaScript 编程的基础:编写面向对象代码,测试代码,为分发而进行封装。随后你看到了 Unobtrusive DOM 脚本编程的主要方面,包括一个关于文档对象模型,事件,JavaScript 与CSS 交互的简短的总览...
要求: 用javascript封装一个类,实现动态构造导航菜单功能,数据格式为data.xml 要求: 1.运用面向对象的思想设计该类(如继承)。 2.实现效果参考 "示例.bmp",菜单样式整洁即可。 3.两天内完成。
javascript的特点 简单 动态 基于对象(面向对象) Javascript面向对象概述 Javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。他具有面向...
“在面向对象的思想中,最核心的概念之一就是类。一个类表示了具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例(即对象)”。
主要帮助大家学习Javascript面向对象编程之封装,由浅入深的介绍了封装的概念定义,感兴趣的小伙伴们可以参考一下
ajax通用脚本是利用了面向对象的编程用javascript代码把把ajax主要的方法封装好,用的时候只要先set后get就行啦,比框架还容易用,只有一个js文件,导入来就可以用啦,里面还带了一个例子,学过编程的朋友一看就会.....
主要介绍了javascript面向对象三大特征之封装,简单描述了封装的基本概念、原理,并结合实例形式详细分析了javascript面向对象程序设计中封装的用法与相关操作注意事项,需要的朋友可以参考下
感叹是为了缓解严肃的气氛并引出今天要讲的话题,”javascript面向对象编程”,接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开。 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是...
感叹是为了缓解严肃的气氛并引出今天要讲的话题,”javascript面向对象编程”,接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开。 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是...
笔者历经多年javascript的开发,痛彻体会javascript面向对象编程的不便性,精心制作了一个类的定义与继承功能的js,实现了在javascript中对类的定义、继承、封装机制,主要功能特征包括: 一、 统一了类定义的语法...
本文讲述了Javascript简单实现面向对象编程继承实例代码。分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) ...
重新认识面向对象 为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中...然而,面向对象仅仅是一个概念或者编程思想而已,它不应该依赖于某个语言存在。比如 Java