• 创建对象
  • 继承
面向对象的语言都有一个表示---类。通过类我们可以创建多个具有相同属性的对象。但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同。
对象的定义:无序的属性集合,其属性可以包含基本值,对象,函数。(所以我们又可以把JS对象看成散列表,一组键值对。)
一、创建对象
 
1.1工厂模式
function createPerson(name,age){
var o =newObject();
o.name = name;
o.age= age;
o.sayName =function(){
alert(this.name);
}
  return o;
}
 
var person1 =createPerson('zzz',15);
var person2 =createPerson('jjj',14);
此种方式无法判断它的类型,只能知道是Object类型。
1.2构造函数模式
functionPerson(name,age){
this.name = name;
this.age = age;
this.sayName =function(){
alter(this.name);
};
}
var per =newPerson();
此种方式解决了可以判断它为Person类型同时也是Object类型。
但是,这个方式每次创建一个新的对象都会 讲对象的中的方法重新创建一遍。        
1.3原型模式
每个函数都有个属性--prototype。prototype是一个指针,指向一个对象,这个对象的用途是 包含 特定类型的所有实例  共享 的属性和方法。
functionPerson(){};
Person.prototype.name ='zjh';
Person.prototype.age =15;
Person.prototype.getName =function(){
alert(this.name);
};
var per =newPerson();
alert(per.__proto__ ==Person.prototype)//true
1.3.1理解原型对象
只要创建了一个函数,那么就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向该函数的原型对象。在默认情况下,所有的原型对象都会获得一个constructor(构造函数)属性,这个属性是一个指针,指向拥有该prototype的函数。所以Person.prototype.constructor = Person  ,这是一个循环。
当构造函数创建了一个实例,那么这个实例自动就会含有一个属性(__proto__),这个属性指向创建这个对象的构造函数的原型对象。(  per.__proto__ == Person.prototype  
也就是实例和构造函数没有直接关系。虽然在创建的person1中没有任何属性和方法,但是根据原型链规则,他会自动查找它的原型链上的所有属性。
1.3.2原型与in操作符
functionPerson(){};
Person.prototype.name ='zjh';
Person.prototype.age =15;
Person.prototype.getName =function(){
alert(this.name);
};
var per =newPerson();
per.daddy ='zyj'
for(var a in per){
alert(a)
}
1.3.3简洁的原型语法
functionPerson(){};
Person.prototype ={
name :'zjh',
age :15,
getName :function(){
alert(this.name);
}
}
这种方式存在一个问题:当Person.prototype指向一个字面量时,这个字面量会生成一个对象,那么Person.prototype.constructor就是这个新生成对象的constructor,而这个对象的constructor一般都是Object.
解决这个问题可以通过下面这个技巧:
functionPerson(){};
Person.prototype ={
constructor :Person,
name :'zjh',
age :15,
getName :function(){
alert(this.name);
}
}
var p =newPerson();
alert(p.constructor);
但是这种方式会使constructor属性变成可遍历的
这种方式可以使其隐藏。
1.3.4原型的动态性
因为对象查找值是在原型链上查找的,所以一旦在对象的原型上添加或删除属性或者方法,就会在对象上生效,即使是以前的对象。
但是如果构造函数的原型被重新创建(比如说像上面直接用字面量方式写原型),那么实例的原型仍然指向最初的内存位置,而此时该位置已经不存在了。
1.3.5原生对象的原型
可以对原生的构造函数原型修改,但一般不推荐这样做。
1.3.6原型对象的问题
其一就是无法在构造对象时就添加初始化参数,而必须预先定义值。
其二是一些由共享性导致的问题:
 
functionPerson(){};
Person.prototype ={
constructor :Person,
name :'zjh',
age :15,
pie :['a','b'],
getName :function(){
alert(this.name);
}
}
var p =newPerson();
p.pie.push('c');
alert(p.hasOwnProperty("pie"))//false
alert(p.pie)//a,b,c
var pp =newPerson();
alert(pp.pie)//a,b,c
所以通常都不会单独使用原型模式。
1.3.7组合使用构造函数和原型模式
创建自定义类型最常见的方式就是组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性,原型模式用于定义方法和共性的属性。这样就让每个实例都有一份自己的属性副本,但同时又共享方法的引用,极大的节省了内存。同时还支持向构造函数内传参。
这是写法也是一种认同度最高的创建方式。
1.3.8动态原型模式
functionPerson(name,age){
this.name = name;
this.age = age;
if(typeof(this.getName)!='function'){
alert('s')
Person.prototype.getName =function(){
alert(this.name);
}
}
};
var p1 =newPerson(1,2);
var p2 =newPerson(1,2);
只会在创建p1的时候弹出s,之后就不会再执行if内语句了。
1.3.9寄生构造函数模式
一般在前几种方式都不适用的情况下,使用寄生构造函数模式。
在特殊情况下我们要使用这种方式:
这种方法的局限性在于创建的对象和构造函数在原型上没有关系,也不能更具instanceOf来确定类型。所以,在可以用以上类型的情况下,不要使用这种情况。
1.3.10稳妥构造函数模式
所为稳妥对象,指的是没有公共属性,而且其方法也不用引用this对象。稳妥对象最适合在一些安全的环境中(这些环境会禁止使用this、new),或者在防止数据被其他应用程序改动时使用。
它与上面的寄生构造函数模式类似。两点不同:一是新创建对象的实例方法不引用this,二是不使用new操作符调用构造函数。
functionPerson(name,age){
var o =newObject();
var name ='zjh';
o.getName =function(){
alert(name);
}
return o;
};
var p1 =Person(1,2);
p1.getName();
同样和寄生构造函数模式一样,这样创造出的对象和构造函数之间没有关系。

JavaScript高级 面向对象的程序设计 (一)《JavaScript高级程序设计(第三版)》的更多相关文章

  1. 赠书《JavaScript高级程序设计(第三版)》5本

    本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...

  2. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  3. JavaScript高级程序设计(第三版)学习,第一次总结

    Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...

  4. JavaScript高级程序设计(第三版)学习笔记20、21、23章

    第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...

  5. JavaScript高级 面向对象(5)--内存逻辑图画法

    说明(2017.3.30): 1. 使用软件diagram designer,DiagramDesignerSetup1.28.zip,很小只有1M多,我用的自带画图软件.教学视频是“JavaScri ...

  6. JavaScript高级程序设计(第三版)学习笔记22、24、25章

    第22章,高级技巧 高级函数 安全的类型检测 typeof会出现无法预知的行为 instanceof在多个全局作用域中并不能正确工作 调用Object原生的toString方法,会返回[Object ...

  7. 10.1.2 Document类型【JavaScript高级程序设计第三版】

    JavaScript 通过Document 类型表示文档.在浏览器中,document 对象是HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML 页面.而且,docu ...

  8. 2.1 <script>元素【JavaScript高级程序设计第三版】

    向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...

  9. JavaScript高级程序设计(第三版) 2/25

    第一章 JavaScript简介 javascript 跟 java没有任何联系,可以这么说,基本上区别就相当于,老婆跟老婆饼.只是因为当初Netscape(js的公司)想搭上媒体热炒的Java的顺风 ...

  10. javascript之面向对象程序设计(对象和继承)

    总结的文章略长,慎点. 知识点预热 引用类型:引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起.在其他面向对象语言中被称为类,虽然 ...

随机推荐

  1. Linux中记录终端(Terminal)输出到文本文件(转载)

    一,如何把命令运行的结果保存到文件当中? 这个问题太简单了,大家都知道,用 > 把输出转向就可以了 例子: [lhd@hongdi ~]$ ls > ls.txt [lhd@hongdi ...

  2. ANT教程经典

    Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一.            ...

  3. Nexus配置

    1.可以为maven项目单独配置nexus路径 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  4. Async/Await - Best Practices in Asynchronous Programming z

    These days there’s a wealth of information about the new async and await support in the Microsoft .N ...

  5. Good Sentences

    Wine in, truth out One is never too old to learn What is done can not be undone Time tries all thing ...

  6. uboot 、内核、文件系统移植

    1. 参考下面博客: http://blog.csdn.net/andylauren/article/details/51448353 2.查看u盘: $ sudo fdisk -l 3. 格式化u盘 ...

  7. DSS 搭建手机流媒体服务器

    最近研究了一下手机流媒体服务器的搭建,目的是实现通过3G手机看在线视频. 开始的时候研究了一下 Tudou手机版 ,可它哪并没有实现在线播放,因为视频地址是 http 协议的.参看了许多文章,终于了解 ...

  8. [ActionScript3.0] 逻辑或"||=" ,等于"=="和全等于"==="

    function a(o:Object):void { o||=new Object();  trace(o); } //此上下两个方法作用是一样的 function b(o:Object):void ...

  9. GridView内容<br />换行

    if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[].Text = Server.HtmlDecode(e.Row.Cell ...

  10. 手机端的各种默认样式比如 ios的按钮变灰色

    1.ios按钮变灰色,给按钮加样式: -webkit-appearance: none; 2.有圆角话 ; } 3.去除Chrome等浏览器文本框默认发光边框 input:focus, textare ...