javascript高级编程笔记06(面相对象2)

1)  构造函数模式

es中的构造函数可以用来创建特定类型的对象,像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法,例如:

function Person(name,age,job){

     this.name=name;

     this.age=age;

     this.job=job;

     this.sayName=function(){

      alert(this.name);

}

}

var person1=new Person(“Nicholas”,29,”Software Engineer”);

Var preson2=new Person(“Greg”,27,”Doctor”);

要创建Person的新实例,必须使用new操作符,以这种方式调用构造函数实际上火经历一下4个步骤:

  • l 创建一个新对象;
  • l 将构造函数的作用域赋给新的对象(因此this就指向这个新对象);
  • l 执行构造函数中的代码(为这个新对象添加属性);
  • l 返回新对象.

对象的constructor属性最初是用来标识对象类型的,但是,提到检测对象类型,还是instanceof操作符要更可靠一些,我们在这个例子中创建的所有对象既是Object的实例,同时也是Person的实例,这一点通过instanceof操作符可以得到验证.

alert(person1 instanceof Object);//true

alert(person1 instanceif Person);//true

alert(person2 instanceof Object);//true

alert(person2 instanceof Person);//true

构造函数模式虽然好用,但也并非没有确定,使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍,而sayName()的方法去死不同的Function的实例.

2)  原型模式

我们创建的每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所以实例共享的属性和方法.如下面的例子所示:

function Person(){

}

Person.prototype.name=”Nicholas”;

Person.prototype.age=29;

Person.prototype.job=”Software Engineer”;

Person.prototype.sayName=function(){

 alert(this.name);

};

var person1=new Person();

person1.sayName();”//Nicholas”

var person2=new Person();

person1.sayName();//”Nicholas”

Alert(person1.sayName==person2.sayName)://true
  • l 理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象,在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针,就上面例子来说,Preson.prototype.constructor指向Person,而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法.

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性,至于其他方法,则都是从Object继承而来的,当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象,ECMA-262第5版中管这个指针叫[[prototype]],虽然在脚本中没有标准的方式访问[[prototype]],但ff,safari和chrome在每个对象上都支持一个属性_proto_;而在其他实现中,这个属性对脚本则是完全不可见的。

虽然在所以实现中都无法范围到[[prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系,从本质上讲,如果[[prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回true,如下:

alert(Person.prototype.isPrototypeOf(person1));//true

alert(Person.prototype.isPrototypeOf(person2));//true

这里,我们用原型对象的isPrototypeOf()方法测试了person1和person2,因为它们内部都有个指向Person.prototype的指针,因此都返回了true;

es5增加了一个新方法叫 Object.getPrototypeOf(),在所有支持的实现中,这个方法返回[[prototype]]的值,例如:

alert(Object.getPrototypeOf(person1)==Person.prototype);//true

alert(Object.getPrototypeOf(person2).name);//”Nicholas”

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性,搜索首先从对象实例本身开始,如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性,如果在原型对象中找到了这个属性,则返回该属性的值。

使用hasOwnPrototype()方法可以检测一个属性是存在于实例中,还是存在于原型中,这个方法值在给杜属性存在于对象实例中时才返回true,看下面例子:

Function Person(){

}

Person.prototype.name=”Nicholas”;

Person.prototype.age=29;

Person.prototype.job=”Software Engineer”;

Person.prototype.sayName=function(){

 alert(this.name);

}

var person1=new Person();

var person2=new Person();

alert(person1.hasOwnProperty(“name”))//false

person1.name=”Greg”;

alert(person1.name)//”Greg”

alert(person1.hasOwnProperty(“name”))//true

alert(person2.name)//”Nicholas”

alert(person2.hasOwnproperty(“name”));//false

delete  person1.name

alert(person1.name);//”Nicholas”

alert(person1.hasOwnProperty(“name”));//false

IE早期版本的实现中存在一个bug,即屏蔽不可枚举属性的实例属性不会出现在for-in循环中,例如:

var o={

  toString:function(){

   Return “My object”

}

};

for (var prop in o){

If(prop==”toString”){

  alert(“Found toString”);

}

}

当以上代码运行时,应该会显示一个警告框,表明找到了toString()方法,这里的对象o定义了一个名为toString的方法,该方法屏蔽了原型中的toString方法,在IE中,由于其实现认为原型的toString方法被打伤了[[Enumerable]]标记就应该跳过该属性,结果我们不会看到警告框.该bug会影响默认不可枚举的所有属性和方法。

要取得对象上所有可枚举的实例属性,可以使用es5的Object.keys方法,这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组,例如:

function Person(){

}

Person.prototype.name=”Nicholas”;

Person.prototype.age=29;

Person.prototype.job=”Software Engineer”;

Person.prototype.sayName=function(){

   alert(this.name);

};

var keys=Object.keys(Person.prototype);

alert(keys);//”name,age,job,sayName”

var p1=new Person();

p1.name=”Rob”;

p1.age=31;

var p1keys=Object.keys(p1);

alert(p1keys);//”name,age”

如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyNames()方法

var keys=Object.getOwnPropertyNames(Person.prototype);

alert(keys);//”constructor,name,age,job,sayName”
时间: 2024-08-12 08:50:50

javascript高级编程笔记06(面相对象2)的相关文章

javascript高级编程笔记01(基本概念)

1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选,通过src属性指定代码的字符集,大多浏览器会忽略这个值,所以很少人使用 language:已放弃 src:可选,外部脚本的地址 type:可选,现在不推荐用“text/javascript”,考虑到约定俗成和最大限度的浏览器兼容,目前type属性的值还是text/javascript,不过,这个属性并不是必需

javascript高级编程笔记05(面向对象)

面向对象设计 es中有两种属性:数据属性和访问器属性 数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值,数据属性有4个描述其行为的特性 [[Configurable]]:表示能否通过delete删除属性从而重新第一属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认为true [[Enumerable]]:表示能否通过for-in循环返回属性,默认为true [[Writable]]:表示能否修改属性的值,默认为true [[Value]]:包含这个属性的数据值默认

javascript高级编程笔记02(基本概念)

ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字符串 如果第一个字符串不是数字字符或是负号,就返回NaN,所以””返回NaN 如果第一个字符是数字字符,它会继续解析第二个字符,直到解析完所有后续字符或者遇到了非数字字符,例如,”123blue”转换为123,”22.5”会转换为22 如果字符串中的第一个字符是数字字符,parseInt()也能够识

读javascript高级编程05-面向对象之创建对象

1.工厂模式 工厂模式是一种常用的创建对象的模式,可以使用以下函数封装创建对象的细节: function CreatePerson(name,age){ var p=new Object(); p.name=name; p.age=age; p.speak=function(){ console.log("my name is "+p.name); } return p; } var p1=CreatePerson('Wang',15); p1.speak(); var p2=Crea

读javascript高级编程11-事件

一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o

JavaScript高级编程

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/07/05/writing-advanced-javascript.html Web应用程序(Web Applications)        从计算机纪元的黎明刚刚来临開始,不同平台间软件的互用性就一直是关注的焦点.为了尽可能实现用户的最大要求,软件公布者往往将流行软件从一个机器移植到另外一个机器上,这通常要花费数月的辛苦劳动,有时甚至是整个软件在新的硬件或者操作系统上的全然重写.随着计算机功能的不断强

JavaScript高级编程II

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中,我们介绍了两类JavaScript小工具及其源代码:浮动文本和弹出菜单.本文中,我们将继续介绍另外几个实用的JavaScript小工具,并着重说明其工作原理,因此你能够简单改动后应用到自己的程序中.本文中的JavaScript代码应该不用做不论什么改动就能够在当前全部主流浏览器上执行.所以,不用再费周折…… 

读javascript高级编程02-变量作用域

一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs="?debug=true"; with(location){ var url=href+qs; } return url; } buildUrl(); //result:http://www.fanxbao.com/?debug=true ②try...catch...中的catch语句块延长作用域链

读javascript高级编程07-引用类型、Object、Array

一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Object类型 1.创建Object实例两种方式: 使用new操作符跟Object构造函数. var o = new Object(); o.name = 'dami'; o.age = 25; 使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉. var o = { name: 'd