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”

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

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

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

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

    面向对象设计 es中有两种属性:数据属性和访问器属性 数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值,数据属性有4个描述其行为的特性 [[Configurable]]:表示能否通 ...

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

    ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...

  4. javascript高级编程笔记04(基本概念)

    Function类型 Es5中规范了另一个函数对象的属性:caller,这个属性中保存着调用当前函数的函数的引用,如果是在全局作用域中调用当前函数,这它的值为null function outer() ...

  5. javascript高级编程笔记03(正则表达式)

    引用类型 检测数组 注:我们实际开发中经常遇到要把数组转化成以逗号隔开,我以前都是join来实现,其实又更简单的方法可以用toString方法,它会自动用逗号隔开转换成字符串,其实toString内部 ...

  6. JavaScript高级编程———基本包装类型String和单体内置对象Math

    JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...

  7. Android高级编程笔记(四)深入探讨Activity(转)

    在应用程序中至少包含一个用来处理应用程序的主UI功能的主界面屏幕.这个主界面一般由多个Fragment组成,并由一组次要Activity支持.要在屏幕之间切换,就必须要启动一个新的Activity.一 ...

  8. JavaScript高级编程———JSON

    JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...

  9. JavaScript高级编程——Date类型

    JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. HDU 2295 Radar (DLX + 二分)

    Radar Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. Scala中的If判断&While&For循环

    If 判断: object TestScalaIf { def main(args: Array[String]): Unit = { // val resutlt = judge1(-100) // ...

  3. 【三分搜索算法】UVa 10385 - Duathlon

    题目链接 题意:“铁人三项”比赛中,需要选手在t km的路程里进行马拉松和骑自行车项目.现有n名选手,每位选手具有不同的跑步速度和骑车速度.其中第n位选手贿赂了裁判员,裁判员保证第n名选手一定会取得冠 ...

  4. 在Visual Studio 的 “一般处理程序 ” .ashx 文件中如何创建Session 对象

    只需要继承这个接口即可实现创建Session对象.  IHttpHandler,System.Web.SessionState.IHttpSessionState 代码示例: public class ...

  5. poj 3544 Journey with Pigs

    Journey with Pigs Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3004   Accepted: 922 ...

  6. android图片切换ImageSwichter的动画切换效果

    activity_main.xml 控件的线性布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  7. SQL Server的三种物理连接之Loop Join(一)

    Sql Server有三种物理连接Loop Join,Merge Join,Hash Join, 当表之间连接的时候会选择其中之一,不同的连接产生的性能不同,理解这三种物理连接对性能调优有很大帮助. ...

  8. jQuery 笔记

    1. 选择器  http://www.runoob.com/jquery/jquery-selectors.html 2. toggle()  用来切换 hide() 和 show() 方法   ht ...

  9. PHP学习笔记 - 入门篇(3)

    PHP学习笔记 - 入门篇(3) 常量 什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量 ...

  10. (转)Mysql数据库读写分离配置

    环境模拟 实现读写分离 减轻数据库的负荷 主服务器 master 10.0.0.12从服务器 slave 10.0.0.66 ------------------------------------- ...