JavaScript高级程序设计读书笔记之OOP

关于JavaScript创建对象的方式:

1、工厂模式

 1  function createPerson(name, age, job){
 2             var o = new Object();
 3             o.name = name;
 4             o.age = age;
 5             o.job = job;
 6             o.sayName = function(){
 7                 alert(this.name);
 8             };
 9             return o;
10         }
11         var person1 = createPerson("Nicholas", 29, "Software Engineer");
12         var person2 = createPerson("Greg", 27, "Doctor");

缺点:没有体现出面向对象的思想

2、构造函数模式

 1  function Person(name, age, job){
 2             this.name = name;
 3             this.age = age;
 4             this.job = job;
 5             this.sayName = function(){
 6                 alert(this.name);
 7             };
 8         }
 9         var person1 = new Person("Nicholas", 29, "Software Engineer");
10         var person2 = new Person("Greg", 27, "Doctor");
11         person1.sayName();   //"Nicholas"
12         person2.sayName();   //"Greg"

缺点:1、构造函数中的每个方法在创建实例时都要重新创建一遍,即

this.sayName = new Function(){alert(this.name);};

alert(person1.sayName == person2.sayName);  //false

3、原型模式

 1  function Person(){
 2         }
 3         Person.prototype.name = "Nicholas";
 4         Person.prototype.age = 29;
 5         Person.prototype.job = "Software Engineer";
 6         Person.prototype.sayName = function(){
 7             alert(this.name);
 8         };
 9         var person1 = new Person();
10         person1.sayName();   //"Nicholas"
11
12         var person2 = new Person();
13         person2.sayName();   //"Nicholas"
14
15         alert(person1.sayName == person2.sayName);  //true

优点:对象的属性和方法都是共享的

缺点:对象的属性需要重新赋值

原型对象的理解:

prototype和原型的关系:prototype(prototype是构造函数的一个属性)是指向原型的指针,原型中的constructor属性又指向原构造函数。

Person.prototype指向原型对象,Person.prototype.constructor指向Person

4、组合使用构造模式和原型模式

 1    function Person(name, age, job){
 2             this.name = name;
 3             this.age = age;
 4             this.job = job;
 5             this.friends = ["Shelby", "Court"];
 6         }
 7         Person.prototype = {
 8             constructor: Person,
 9             sayName : function () {
10                 alert(this.name);
11             }
12         };
13
14         var person1 = new Person("Nicholas", 29, "Software Engineer");
15         var person2 = new Person("Greg", 27, "Doctor");
16
17         person1.friends.push("Van");
18
19         alert(person1.friends);    //"Shelby,Court,Van"
20         alert(person2.friends);    //"Shelby,Court"
21         alert(person1.friends === person2.friends);  //false
22         alert(person1.sayName === person2.sayName);  //true
23  

优点:属性在构造函数中定义,constructor和函数在原型中定义

时间: 2024-10-13 05:53:18

JavaScript高级程序设计读书笔记之OOP的相关文章

Javascript高级程序设计读书笔记(第六章)

第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新对象. 构造函数的问题:每个方法都要在每个实例上重新创建一遍: 理解原型对象: 无论何时,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象.默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向proto

JavaScript高级程序设计-读书笔记(6)

第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null.但JSON不支持JavaScript中的特殊数值undefined. “Hello world!” l        对象(属性的值可以是简单值,也可以是复杂类型值,如下这样在对象嵌入对象) { “name” : ”Nicholas”, “age” : 29

JavaScript高级程序设计-读书笔记(2)

第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age = 27; person.job = ”Doctor”; person.sayName = function() { alert(this.name); }; person. sayName(): 缺点:会产生大量重复代码 2.工厂模式:用函数来封装以特定接口创建对象的细节,如 function c

JavaScript高级程序设计-读书笔记(4)

第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Document及Element类型的实例调用它们.目前完全支持Selector API Level 1的浏览器有IE 8+. Firefox 3.5+. Safari 3.1+. Chrome和Opera 10+. querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,

JavaScript高级程序设计-读书笔记(3)

第8章 BOM 1.window对象 (1)全局作用域 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法. (2)窗口关系及框架 如果界面中包含框架,这每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值的索引(从0开始,从左至右,从上到下)或者框架名称来访问相

JavaScript 高级程序设计读书笔记(1)

第6章 面向对象的程序设计 属性的类型 JS 中对象的属性有两种,数据属性和访问器属性(accessor property ),属性有其自身的特性(arrribute),可以理解为关于属性的属性. 数据属性包含4个特性,分别是[[Configurable]], [[Enumerable]], [[Writable]], [[Value]]. 使用 Object.defineProperty 修改属性描述符时,若该属性之前不存在,除了代码里指定的特性值,其他特性值默认将是 false, 举例如下:

javascript高级程序设计读书笔记2

<!DOCTYPE HTML>//这个网页的文档类型,这个是html5的写法Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype.因此这一文档类型必须出现在项目的每个页面的开始部分 <html lang="en">//这里的lang="en"可以删除,如果不删除的,用谷歌之类打开,它会认为是英文的,会自动给翻译(如果设置了自动翻译的话) 有两个版本的 jQuery 可供下载:Production ver

Javascript高级程序设计读书笔记(第二章)

第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到整个页面都解析完毕后再运行.相当于告诉浏览器立即下载,但延迟执行.HTML5规定要求脚本按照它们出现的先后顺序执行. 异步脚本(async)如果有多个脚本文件,执行顺序不确定,指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容. XHTML代码的规则比编写HTML严格得多,下面

JavaScript高级程序设计 读书笔记 第二章

<script>元素 直接在页面中嵌入JavaSript代码或包含外部JavaSript文件. 在代码中任何地方不能出现</script>,可通过转义字符'\'解决. 在XHTML中可省略</script>,HTML中不能. 延迟脚本:defer属性(defer="defer"),告诉浏览器立即下载,延迟执行.最好只包含一个延迟脚本. 异步脚本:async属性(async="async"),不让页面等待两个脚本下载和执行,异步加载