JavaScript高级程序设计12.pdf

第六章 面向对象的程序设计

ECMA中有两种属性:数据属性和访问器属性

数据属性的特性

[[Configurable]]  表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为访问器属性

[[Enumerable]]  表示是否通过for-in循环返回属性

[[writable]]  表示是否修改属性的值

[[Value]]  包含这个属性的数据值,从这个属性里读取数据值

要修改属性默认的特效必须使用ECMAScript
5的Object.defineProperty()方法,它接收3个参数:属性所在的对象,属性的名字和描述符对象(上面的4个描述符对象的属性)

var person={};

Object.defineProperty(peron,"name",{

  writable:false,

  value:"Nicholas"

  });

alert(person.name);  //"Nicholas"

person.name="Greg";

alert(person.name);  //"Nicholas"

一旦把configurable设置为false,就不能改为true,此后只能更改writable属性

访问器属性

访问器属性不包含数据值;它们包含一对getter和setter函数(两个都不是必须的),有以下4个特性

[[Configurable]]  表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为数据属性

[[Enumerable]]  表示是否通过for-in循环返回属性

[[Get]]  读取属性时调用的函数,默认为undefined

[[Set]]  写入属性时调用的函数,默认为undefined

用Object.defineProperty()来定义

var book={

  _year:2004,

  edition:1

  };

Object.defineProperty(book,"year",{

  get:function(){

    return this._year;

    },

  set:function(newValue){

    if (newValue > 2004) {

      this._year=newValue;

      this.edition +=newValue-2004;

      }

    }

  });

book.year=2005;

alert(book.edition);  //2

不一定要同时指定getter和setter,严格模式下写入只指定getter函数会抛出异常,非严格模式下返回undefined,反之亦然

定义多个属性 Object.defineProperties()方法

var book={};

Object.defineProperties(book,{

  _year:{

    value:2004},

  edition:{

    value:1},  

  year:{

    get: function(){

        return this_year;},

    set: function(newValue){

        if(newValue>2004){

        this._year=newValue;

        this.edition+=newValue-2004;}

      }

    }

});

读取属性的特性 Object.getOwnPropertyDescriptor()方法

以以上为例

var descriptor=Object.getOwnPropertyDescriptor(book,"_year");

alert(descriptor.value);  //2004

alert(descriptor.configurable);  //false

工厂模式

function createPerson(name,age,job){

  var o =new Object();

  o.name=name;      

  o.age=age;

  o.job=job;

  o.sayName=function(){

      alert(this.name);

        };

  return o;

}

var person1=createPerson("Greg",25,"Doctor");

构造函数模式(自定义构造函数)

function Person(name,age,job){

  this.name=name;      

  this.age=age;

  this.job=job;

  this.sayName=function(){

      alert(this.name);

        };

}

var person1=new Person("Greg",25,"Doctor");

alert(person1 instanceof Person);  //true

alert(person1.constructor==Person);  //true

创建自定义的构造函数可以将它的实例标识为一种特定的类型,这是胜过工厂模式的地方

构造函数是比较特殊的函数,可以不使用new标识符(new其实就是在后台创建一个新对象),this就是指向当前作用域

Person("Greg",27,"Doctor");  //添加到window

window.sayName();  //"Greg"

可以使用call()、apply()

var o=new Object();

Person.call(o,"kristen",25,"Nurse");

o.sayName();  //"kristen"

构造函数模式缺点是每个方法都要在实例上创建一遍,所以每个实例里的同名函数都是不同的

原型模式

实例有一个prototype属性指向函数的原型对象,原型对象有一个constructor属性指向构造函数

person.prototype()

person.prototype.constructor()

可以通过isPrototypeOf()方法确定对象之间是否存在这种关系

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

可以通过Object.getPrototypeOf()返回[[Prototype]]的值

alert(Object.getPrototype(person1)==person.prototype);  //true

在搜索一个对象的属性时,会先搜索实例,如没有再搜索原型,如有则屏蔽原型的属性,delete可以删除实例的属性,从而访问到原型中的属性

delete person1.name;

时间: 2024-10-03 07:55:40

JavaScript高级程序设计12.pdf的相关文章

JavaScript高级程序设计53.pdf

共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHandler(window,"load",function(event){ document.forms[0].elements[0].focus(); }); 要注意的是,如果第一个表单字段是隐藏的,使用以上代码会导致错误 HTML5为表单字段新增了一个autofocus属性,不用Javas

JavaScript高级程序设计30.pdf

第12章 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构.DOM2和DOM3则在这个结构的基础上引入了更多的交互能力,也支持更高级的XML特性 DOM2和DOM3级分为许多模块,分别描述了DOM的某个非常具体的子集 DOM2级核心(DOM Level 2 Core):在1级核心基础上构建,为节点添加更多方法和属性 DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图 DOM2级事件(DOM Level 2 Events):说明了如何使

JavaScript高级程序设计51.pdf

(续上篇) 模拟鼠标事件 var btn=document.getElementById("myBtn"); //创建事件对象 var event=document.createEvent("MouseEvents"); //初始化事件对象 event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null); /

JavaScript高级程序设计48.pdf

设备中的键盘事件 任天堂Wii等设备可以通过键码知道用户按下了哪个键 复合事件 复合事件是DOM3级事件新添加的一类事件,用于处理IME的输入序列.IME(Input Method Editor,输入法编辑器)可以让用户输入在物理键盘上找不到的字符,IME通常需要同时按住多个键,但最终只输入一个字符,有3种复合事件 compositionstart:在IME的文本复合系统打开时触发,表示要开始输入了 compositionupdate:向输入字段插入新字符时触发 compositionend:在

JavaScript高级程序设计35.pdf

遍历 "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作,与DOM兼容的浏览器都可以访问到这些类型的对象,IE不支持DOM遍历 使用以下代码检测浏览器对DOM2级的遍历支持情况: var supportsTraversals=document.implementation.hasFeature("Traversal&q

JavaScript高级程序设计31.pdf

其它方面的变化 DOM的其他部分在"DOM2级核心"中也发生了一些变化,这些变化与XML命名空间无关,而是确保API的可靠性及完整性 DocumentType类型的变化 DocumentType类型新增了3个属性:publicId.systemId和internalSubset 其中前两个属性表示的是文档类型声明中的两个信息段,这两个信息段在DOM1级中没有办法访问到 alert(document.doctype.publicId); //文档类型声明PUBLIC后的字符串 alert

JavaScript高级程序设计29.pdf

insertAdjacentHTML方法 插入标记最后一个新增的方式是insertAdjacentHTML()方法,它接收两个参数:插入位置和要插入的HTML文本,第一个参数必须是下列值之一: "beforebegin",在当前元素之前插入一个相邻的同辈元素: "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素: "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子

JavaScript高级程序设计24.pdf

Element类型 Element类型用于表现XML或HTML元素,提供对元素标签名.子节点及特性的访问,它具有以下特征 nodeType的值为1: nodeName的值为元素的标签名: nodeValue的值为null: parentNode可能是Document或Element: 要访问元素的标签名可以使用nodeName属性或者tagName属性,两者返回相同的值 <div id="myDiv"></div> var div=document.getEle

JavaScript高级程序设计38.pdf

比较DOM范围 在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界,接收两个参数:表示比较方式的常量值和要比较的范围 常量如下 Range.START_TO_START(0):比较第一个范围和第二个范围的起点:Range.START_TO_END(1):比较第一个范围的起点和第二个范围的终点:Range.END_TO_END(2):比较第一个范围和第二个范围的终点:Range.END_TO_START(3):比较第一个范围的终点和第二个