文档章节

JS面向对象的程序设计

告别只是另一种体验
 告别只是另一种体验
发布于 2016/06/12 10:34
字数 2974
阅读 15
收藏 2

一、理解对象:

     第一种:基于Object对象

var person = new Object(); person.name = 'My Name'; person.age = 18; person.getName = function(){ return this.name; } 第二种:对象字面量方式(比较清楚的查找对象包含的属性及方法)

var person = { name : 'My name', age : 18, getName : function(){ return this.name; } } JS的对象可以使用‘.’操作符动态的扩展其属性,可以使用’delete’操作符或将属性值设置为’undefined’来删除属性。如下:

person.newAtt=’new Attr’;//添加属性 alert(person.newAtt);//new Attr delete person.age; alert(person.age);//undefined(删除属性后值为undefined); 二、对象属性类型

  ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接访问)。ECMAScript中有两种属性:数据属性和访问器属性

  1、数据属性:
  数据属性指包含一个数据值的位置,可在该位置读取或写入值,该属性有4个供述其行为的特性:

  [[configurable]]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;

  [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;

  [[Writable]]:表示是否可修改属性的值。默认true;

  [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性,其值为’My name’,对该值的修改都反正在这个位置

  要修改对象属性的默认特征(默认都为true),可调用Object.defineProperty()方法,它接收三个参数:属性所在对象,属性名和一个描述符对象(必须是:configurable、enumberable、writable和value,可设置一个或多个值)。

  如下:(浏览器支持:IE9+、Firefox 4+、Chrome、Safari5+)

var person = {}; Object.defineProperty(person, 'name', { configurable: false, writable: false, value: 'Jack' }); alert(person.name);//Jack delete person.name; person.name = 'lily'; alert(person.name);//Jack 可以看出,delete及重置person.name的值都没有生效,这就是因为调用defineProperty函数修改了对象属性的特征;值得注意的是一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:can't redefine non-configurable property);

  2、访问器属性:

  它主要包括一对getter和setter函数,在读取访问器属性时,会调用getter返回有效值;写入访问器属性时,调用setter,写入新值;该属性有以下4个特征:

  [[Configurable]]:是否可通过delete操作符删除重新定义属性;

  [[Numberable]]:是否可通过for-in循环查找该属性;

  [[Get]]:读取属性时调用,默认:undefined;

  [[Set]]:写入属性时调用,默认:undefined;

  访问器属性不能直接定义,必须使用defineProperty()来定义,如下:

var person = { _age: 18 }; Object.defineProperty(person, 'isAdult', { get: function () { if (this._age >= 18) { return true; } else { return false; } } }); alert(person.isAdult?'成年':'未成年');//成年 从上面可知,定义访问器属性时getter与setter函数不是必须的,并且,在定义getter与setter时不能指定属性的configurable及writable特性;

  此外,ECMA-262(5)还提供了一个Object.defineProperties()方法,可以用来一次性定义多个属性的特性:

var person = {}; Object.defineProperties(person,{ _age:{ value:19 }, isAdult:{ get: function () { if (this._age >= 18) { return true; } else { return false; } } } }); alert(person.isAdult?'成年':'未成年');//成年

  上述代码使用Object.defineProperties()方法同时定义了_age及isAudlt两个属性的特性

  此外,使用Object.getOwnPropertyDescriptor()方法可以取得给定属性的特性:

var descriptor = Object.getOwnPropertyDescriptor(person,'_age'); alert(descriptor.value);//19 对于数据属性,可以取得:configurable,enumberable,writable和value;

对于访问器属性,可以取得:configurable,enumberable,get和set

三、创建对象

使用Object构造函数或对象字面量都可以创建对象,但缺点是创建多个对象时,会产生大量的重复代码,因此下面介绍可解决这个问题的创建对象的方法

 1、工厂模式

function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.getName = function () { return this.name; } return o;//使用return返回生成的对象实例 } var person = createPerson('Jack', 19, 'SoftWare Engineer'); 创建对象交给一个工厂方法来实现,可以传递参数,但主要缺点是无法识别对象类型,因为创建对象都是使用Object的原生构造函数来完成的。

 2、构造函数模式

function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.getName = function () { return this.name; } } var person1 = new Person('Jack', 19, 'SoftWare Engineer');

var person2 = new Person('Liye', 23, 'Mechanical Engineer');

 使用自定义的构造函数(与普通函数一样,只是用它来创建对象),定义对象类型(如:Person)的属性和方法。它与工厂方法区别在于:

没有显式地创建对象 直接将属性和方法赋值给this对象; 没有return语句; 此外,要创建Person的实例,必须使用new关键字,以Person函数为构造函数,传递参数完成对象创建;实际创建经过以下4个过程:

创建一个对象 将函数的作用域赋给新对象(因此this指向这个新对象,如:person1) 执行构造函数的代码 返回该对象 上述由Person构造函数生成的两个对象person1与person2都是Person的实例,因此可以使用instanceof判断,并且因为所有对象都继承Object,因此person1 instanceof Object也返回真:

alert(person1 instanceof Person);//true; alert(person2 instanceof Person);//true; alert(person1 instanceof Object);//true; alert(person1.constructor === person2.constructor);//ture; 虽然构造函数方式比较不错,但也存在缺点,那就是在创建对象时,特别针对对象的属性指向函数时,会重复的创建函数实例,以上述代码为基础,可以改写为:

function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.getName = new Function () {//改写后效果与原代码相同,不过是为了方便理解 return this.name; } } 上述代码,创建多个实例时,会重复调用new Function();创建多个函数实例,这些函数实例还不是一个作用域中,当然这一般不会有错,但这会造成内存浪费。当然,可以在函数中定义一个getName = getName的引用,而getName函数在Person外定义,这样可以解决重复创建函数实例问题,但在效果上并没有起到封装的效果,如下所示: function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.getName = getName; } function getName() {//到处是代码,看着乱!! return this.name; } 3、原型模式

 JS每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,它是所有通过new操作符使用函数创建的实例的原型对象。原型对象最大特点是,所有对象实例共享它所包含的属性和方法,也就是说,所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

function Person(){ } Person.prototype.name = 'Jack';//使用原型来添加属性 Person.prototype.age = 29; Person.prototype.getName = function(){ return this.name; } var person1 = new Person(); alert(person1.getName());//Jack var person2 = new Person(); alert(person1.getName === person2.getName);//true;共享一个原型对象的方法 原型是指向原型对象的,这个原型对象与构造函数没有太大关系,唯一的关系是函数的prototype是指向这个原型对象!而基于构造函数创建的对象实例也包含一个内部指针为:[[prototype]]指向原型对象。

   实例属性或方法的访问过程是一次搜索过程:

首先从对象实例本身开始,如果找到属性就直接返回该属性值; 如果实例本身不存在要查找属性,就继续搜索指针指向的原型对象,在其中查找给定名字的属性,如果有就返回; 基于以上分析,原型模式创建的对象实例,其属性是共享原型对象的;但也可以自己实例中再进行定义,在查找时,就不从原型对象获取,而是根据搜索原则,得到本实例的返回;简单来说,就是实例中属性会屏蔽原型对象中的属性;

 原型与in操作符
 一句话:无论原型中属性,还是对象实例的属性,都可以使用in操作符访问到;要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断;

 原生对象中原型
 原生对象中原型与普通对象的原型一样,可以添加/修改属性或方法,如以下代码为所有字符串对象添加去左右空白原型方法:

String.prototype.trim = function(){ return this.replace(/^\s+/,'').replace(/\s+$/,''); } var str = ' word space '; alert('!'+str.trim()+'!');//!word space! 原型模式的缺点,它省略了为构造函数传递初始化参数,这在一定程序带来不便;另外,最主要是当对象的属性是引用类型时,它的值是不变的,总是引用同一个外部对象,所有实例对该对象的操作都会其它实例:

function Person() { } Person.prototype.name = 'Jack'; Person.prototype.lessons = ['Math','Physics']; var person1 = new Person(); person1.lessons.push('Biology'); var person2 = new Person(); alert(person2.lessons);//Math,Physics,Biology,person1修改影响了person2 4、组合构造函数及原型模式

  目前最为常用的定义类型方式,是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方方法的引用,最大限度的节约内存。此外,组合模式还支持向构造函数传递参数,可谓是集两家之所长。

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.lessons = ['Math', 'Physics']; } Person.prototype = { constructor: Person,//原型字面量方式会将对象的constructor变为Object,此外强制指回Person getName: function () { return this.name; } } var person1 = new Person('Jack', 19, 'SoftWare Engneer'); person1.lessons.push('Biology'); var person2 = new Person('Lily', 39, 'Mechanical Engneer'); alert(person1.lessons);//Math,Physics,Biology alert(person2.lessons);//Math,Physics alert(person1.getName === person2.getName);//true,//共享原型中定义方法

在所接触的JS库中,jQuery类型的封装就是使用组合模式来实例的!!!

5、动态原型模式
 组合模式中实例属性与共享方法(由原型定义)是分离的,这与纯面向对象语言不太一致;动态原型模式将所有构造信息都封装在构造函数中,又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性,如果没有则定义,否则不再执行定义过程。该方式只原型上方法或属性只定义一次,且将所有构造过程都封装在构造函数中,对原型所做的修改能立即体现所有实例中:

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.lessons = ['Math', 'Physics']; } if (typeof this.getName != 'function') {//通过判断实例封装   Person.prototype = {     constructor: Person,//原型字面量方式会将对象的constructor变为Object,此外强制指回Person     getName: function () {       return this.name;     }   } } var person1 = new Person('Jack', 19, 'SoftWare Engneer'); person1.lessons.push('Biology'); var person2 = new Person('Lily', 39, 'Mechanical Engneer'); alert(person1.lessons);//Math,Physics,Biology alert(person2.lessons);//Math,Physics alert(person1.getName === person2.getName);//true,//共享原型中定义方法 注:以上内容参考《JavaScript 高级程序设计》第3版

© 著作权归作者所有

共有 人打赏支持
告别只是另一种体验
粉丝 5
博文 31
码字总数 28739
作品 0
浦东
前端工程师
私信 提问
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿
05/07
0
0
三分钟读懂Java与JavaScript的区别,让小白摘帽

Java跟JavaScript虽然在名称上有些许相似,但其实是两种完全不同的语言。Java是一种程序设计语言,JavaScript是客户端的脚本语言,把这两样东西放在一起比较在科学上其实并不严谨。但它们唯一...

小欣妹妹
2017/10/21
0
0
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
10/30
0
0
如何学习Javascript?你是入门,还是精通?

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。   谈不上经验,都是一些教训。   这个时候有人要说,“靠,你丫半桶水,凭啥教我们”。您先别急着骂,先听我说。...

coffeescript
2014/07/23
389
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
9分钟前
0
0
DecimalFormat 类基本使用

/* * DecimalFormat 类主要靠 # 和 0 两种占位符号来指定数字长度 * 0 表示如果位数不足则以 0 填充 * # 表示只要有可能就把数字拉上这个位置 * */ public static void main(String[] args){...

嘴角轻扬30
26分钟前
1
0
This APT has Super Cow Powers.

在Debian/Ubuntu上,apt包管理器内嵌着一个彩蛋. 如果你在命令行界面输入 apt help 在最后一行能找到This APT has Super Cow Powers. 说明该apt具有超级牛力 牛力是个什么梗? 则说明你的系统...

taadis
43分钟前
1
0
起薪2万的爬虫工程师,Python需要学到什么程度才可以就业?

爬虫工程师的的薪资为20K起,当然,因为大数据,薪资也将一路上扬。那么,Python需要学到什么程度呢?今天我们来看看3位前辈的回答。 1、前段时间快要毕业,而我又不想找自己的老本行Java开发...

糖宝lsh
52分钟前
6
0
携手开发者共建云生态 首届腾讯云+社区开发者大会在京举办

本文由云+社区发表 北京时间12月15日,由腾讯云主办,极客邦科技、微信、腾讯TEG协办的首届腾讯云+社区开发者大会在北京朝阳悠唐皇冠假日酒店举办。在会上,腾讯云发布了重磅产品开发者平台以...

腾讯云加社区
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部