oo是javascript的重点也是难点,这一章我看了好几遍了。个人觉得这章理解起来不是特别容易,所以有些笔记我决定按照自己的理解以及网上一些前辈写的比较好的文章来写,如有不正确望斧正。后续可能会对内容更新。
OOP 定义:使用对象时,只关注对象提供的功能,不关注内部细节,更简洁说是,不了解原理的情况下,会使用其功能。
对象 定义:“黑盒子”,不了解内部结构,知道表面的各种操作。
6.1创建对象
var person = new Object(); person.name = "flyer"; person.age = "26"; person.job = "WED"; person.sayName = function(){ alert(this.name); } person.sayName();
缺点:使用同一个接口创建很多对象,会产生大量重复的代码。
6.1.1工厂模式
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("flyer",26,"WED"); var person2 = createPerson("bird",27,"UE"); person1.sayName();// flyer person2.sayName();// bird
优点:抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节。
缺点:解决了创建多个相似对象的问题,但没有解决对象识别的问题。
没有new。
函数重复,资源浪费。
6.1.2 构造函数模式
function Person(name, age, job){ //构造函数以一个大写字母开头 /* 系统会做的事情: * var this = new Object(); 声明的this是新的空白对象 * */ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; // 系统会替我们返回 return this } var person1 = new Person("flyer",26,"WED"); //当在函数加new时,系统会做一些事情 var person2 = new Person("bird",27,"UE"); person1.sayName(); //"flyer" person2.sayName(); //"bird" alert(person1.constructor == Person); //true alert(person2.constructor == Person); //true /* * 对象的constructor属性最初是用来标识对象类型的,检测类型用instanceof操作符更可靠。 * person1和person2对象既是Object的实例,也是Person的实例。 */ alert(person1 instanceof Object); //true alert(person1 instanceof Person); //true alert(person2 instanceof Object); //true alert(person2 instanceof Person); //true alert(person1.sayName == person2.sayName); //false
构造函数与其他函数的唯一区别,就是调用方式不同。任何函数,只要通过new操作符来调用,就是构造函数。
缺点:每个方法都要在每个实例上重新创建一遍。
在全局作用域中定义的函数实际上只能被某个对象引用,如果对象定义很多方法,那么就要定义很多个全局函数,我们定义的这个引用类型没有封装性可言。
6.1.3 原型模式
定义:用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象。
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法。也就是通过调用构造函数而创建的那个对象的原型对象。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象信息,而是可以将这些信息直接添加到原型对象中。
function Person(){ } Person.prototype.name = "flyer"; Person.prototype.age = 26; Person.prototype.job = "WED"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); // "flyer" var person2 = new Person(); person2.sayName(); // "flyer" alert(person1.sayName == person2.sayName); // true
1.理解原型
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性。在默认的情况下,所有prototype属性都会自动获得一个constructor属性,这个属性包含一个指向prototype属性函数的指针。
个人理解原型就是类似于css中的class。
用构造函数加属性
原型加方法
使用hasOwnProperty()方法可以检测一个属性是存在于实例还是原型中。
function Person(){ } Person.prototype.name = "flyer"; Person.prototype.age = 26; Person.prototype.job = "WED"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); var person2 = new Person(); person1.name = "bird"; alert(person1.name); // bird --来自实例 alert(person1.hasOwnProperty("name")); // true alert("name" in person1); // true alert(person2.name); // flyer --来自原型 alert(person2.hasOwnProperty("name")); // false alert("name" in person2); // true delete person1.name; alert(person1.name); // flyer --来自原型 alert(person1.hasOwnProperty("name")); // false alert("name" in person1); // true
2.原型与in操作符
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性。在默认的情况下,所有prototype属性都会自动获得一个constructor属性,这个属性包含一个指向prototype属性函数的指针。
关于原型模式的理解可以参考tom大叔的文章http://www.cnblogs.com/TomXu/archive/2012/04/16/2436460.html
3.更简单的原型语法
function Person(){ } Person.prototype = { name : "flyer", age : 26, job: "WED", sayName : function () { alert(this.name); } }; var person = new Person(); alert(person instanceof Object); //true alert(person instanceof Person); //true alert(person.constructor == Person); //false alert(person.constructor == Object); //true
4.原型的动态性
把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。
function Person(){ } var person = new Person(); Person.prototype = { constructor : Person, name : "flyer", age : 26, job: "WED", sayName : function () { alert(this.name); } }; person.sayName(); //error
5.原生对象的原型
可以像修改自定义对象的原型一样修改原生的原型。
String.prototype.startWith = function(){ //给String添加一个名为startsWith()的方法 return this.indexOf(text) == 0; } var msg = ‘hello world’; alert(msg.startWith(‘hello’)); // true
6.原型对象的问题
原型中所有属性是被很多实例共享的,对于包含引用类型的值来说,问题比较突出。
function Person(){ } Person.prototype = { constructor : Person, name : "flyer", age : 26, job: "WED", friends:["bird","stone"], sayName : function () { alert(this.name); } }; var person1 = new Person(); var person2 = new Person(); person1.friends.push("andy"); alert(person1.friends); alert(person2.friends); alert(person1.friends == person2.friends);
6.1.4 组合使用构造函数模式和原型模式
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ["bing","bird"]; } Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); } } var person1 = new Person("flyer",26, "WED"); var person2 = new Person("tolly",27, "UE"); person1.friends.push("cally"); alert(person1.friends); // bing bird cally alert(person2.friends); // bing bird alert(person1.friends === person2.friends); // bing bird alert(person1.sayName === person2.sayName); // bing bird
相关推荐
在韩顺平老师的笔记中,"JS 面向(基于)对象编程.doc"可能详细讲解了JavaScript中的类、构造函数、原型链、继承和封装等面向对象的高级主题;"dom编程.doc"则可能涵盖了常见的DOM操作方法、事件处理和性能优化策略...
### 韩顺平编写的Java学习笔记概览 #### Java平台分类与运行机制 - **J2SE(Java 2 Platform, Standard Edition)**: 标准版Java开发平台,适用于桌面应用程序开发。 - **J2EE(Java 2 Platform, Enterprise ...
2. **剃刀文献(.js文件)**:这里的"剃刀文献"可能是误打,通常我们指的是.js文件,它是JavaScript代码的存储格式,用于在网页中实现动态功能。 3. **HTML与JavaScript的分离原则**:遵循良好的编程实践,JavaScript...
本篇文章将详细讲解基于《javascript设计模式》的学习笔记,特别是关于对象成员的定义,包括公有成员、公有方法、私有成员以及私有方法。 1. 公有成员 在JavaScript中,对象的所有属性和方法默认都是公有的,这...
【达内学习笔记补充】是一份综合性的IT学习资料,主要涵盖了编程语言的基础以及Web开发的相关技术。这份笔记的目的是为了帮助学习者深入理解和掌握Java和Web开发的关键概念,为那些在达内或其他类似平台上学习的人...
### Java学习笔记知识点详解 #### Java 平台与开发概述 - **Java平台分类:** - **J2SE(Java SE):** 标准版,适用于桌面应用程序开发。 - **J2EE(Java EE):** 企业版,专为Web应用和服务端应用程序设计。 -...
【达内学习笔记】是一份综合性的学习资料,包含了丰富的IT知识,主要针对Java编程语言的学习路径。这份笔记集合了达内教育机构的教学精华,旨在帮助学员系统地掌握Java技术,提升开发技能。以下是各部分笔记的主要...
这些"java学习笔记.zip"包含的文件详细涵盖了Java的多个重要方面,包括基础、进阶以及与之相关的框架技术。以下是对每个文件内容的概览: 1. **10、JavaSE:IO流.pdf** Java标准版(JavaSE)中的输入/输出(IO)流...
Flex ActionScript 学习笔记是关于使用Adobe Flex技术并结合ActionScript 3.0进行开发的知识总结。ActionScript 3.0是随着Flash CS3一起推出的一种强大的编程语言,相较于之前的ActionScript版本,它有着显著的提升...
"6.JS高级.rar"这个压缩包显然包含了深入学习JavaScript高级特性和实践的笔记和资料,对于想要提升JavaScript技能的前端开发者来说是一份宝贵的资源。 首先,让我们探讨一下JavaScript的基本概念。JavaScript是一种...
【PHP学习笔记总结】 PHP(超文本预处理器)是一种广泛使用的开源脚本语言,特别适合于Web开发。它能够嵌入HTML中,让开发者在服务器端处理数据,生成动态网页内容。与JavaScript不同,PHP代码在服务器上执行,然后...
### Java 学习笔记知识点梳理 #### Java 平台概述 - **J2SE(Java 2 Platform Standard Edition)**: 标准版平台,适用于桌面应用程序的开发。 - **J2EE(Java 2 Platform Enterprise Edition)**: 企业版平台,...
Struts2是基于MVC设计模式的Web应用程序框架,用于简化Java Web开发。它提供了一套处理HTTP请求和响应的机制,以及动作调度、结果渲染、异常处理等功能。 【Hibernate】 Hibernate是一个强大的ORM框架,它自动管理...
6. **面向对象编程(OOP)**:许多现代编程语言支持OOP,其中类和对象是核心概念。理解类的定义、对象的实例化以及封装、继承和多态等原则,有助于构建复杂的软件系统。 7. **前端开发**:对于Web2,前端开发涉及...
Java Web 是一种基于Java技术的Web应用程序开发领域,它涵盖了从...这些知识点构成了Java Web开发的基础,通过学习和实践,开发者能够创建动态的、数据驱动的Web应用程序,提供丰富的用户体验并与后端数据库进行交互。
- **定义与用途**:J2EE 是针对大型企业级应用设计的,支持 Web 应用程序和服务开发。它包含了 J2SE 的所有特性,并额外提供了一些高级服务,如分布式组件模型、Web 服务支持等。 - **特点**:能够处理高负载、高...
【狂神说Java系列笔记.rar】是一份涵盖了2020年7月份的全面Java学习资源,其中包含了从基础到高级的多个主题。这个压缩包是针对Java开发者的宝贵资料库,尤其对于初学者和想要深入理解Java技术体系的人而言极具价值...
总之,PHP是一种功能强大的Web开发语言,涵盖了从基础语法到高级特性的广泛知识,适用于构建各种类型的Web应用程序。随着技术的发展,PHP的生态系统不断壮大,提供了丰富的工具和框架,方便开发者高效地进行Web开发...
它的易学性使其成为初学者入门的理想选择,同时也提供了高级特性供专业程序员使用。PHP主要应用于三个方面:服务端脚本、命令行脚本和桌面应用程序开发。 1. **服务端脚本**:PHP与Web服务器和浏览器配合,用于生成...