本文是学习《JavaScript高级程序设计》第六章的笔记。

JS中,便于批量创建对象的三种模式:

1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回。

缺点:创建的对象无法识别类型(全是Object)

2.构造函数模式:必须配合new操作符使用。在构造函数内部将this当做新对象指针,赋予其属性和方法,然后经历以下四个步骤:

1)创建一个新对象

2)将构造函数的作用域赋给这个新对象(即将this指向这个对象)

3)执行构造函数内部代码(完成对象初始化)

4)返回这个对象

用这种方法创建的每个实例都属于以其构造函数为名的引用类型,可以用instanceof方法验证。例如:

function Person(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){console.log("Hi!")};
}
var p = new Person("Tang",18);
console.log(p instanceof Person);//true

缺点:每个对象实例都保存了独立的函数对象副本(如例子中的sayHi),造成了存储空间的浪费。

3.原型模式:通过赋予构造函数的原型对象以属性和方法,来为每个通过该构造函数创建的对象赋予共享的属性和方法副本。

每个函数都有一个prototype属性,指向函数的原型对象。所有原型对象都有一个constructor属性,指向原型对象所在的函数,此外可以为原型对象添加自定义属性和方法,在实际使用时可以省略prototype直接访问。应用原型模式,所有通过该构造函数创建的对象实例共享同一个原型对象。例如:

function Person(){}
Person.prototype.name="leegent";
Person.prototype.sayHi(){console.log("Hi");}
var p1=new Person();
var p2=new Person();
p1.sayHi(); // Hi
p2.sayHi(); // Hi
Person.prototype.sayHi=function(){console.log("Hello");}
p1.sayHi(); // Hello
p2.sayHi(); // Hello
console(p1.sayHi==p2.sayHi); //true

对象实例本身的属性会屏蔽原型对象的同名属性,本质上是截断了解析器的搜索过程(先自身再原型)。使用delete操作符删除实例本身的属性之后,就可以重新访问到原型对象中的同名属性。

不能通过对象实例直接访问其原型对象。

几个与原型相关的操作符和函数:

第一类,判别函数/操作,返回布尔值:

  1. 【属性】 in 【对象】:属性能否通过对象访问到,无论在自身还是原型。
  2. 【原型对象】.isPrototypeOf【对象】:顾名思义
  3. 【对象】.hasOwnProperty(【属性】) :判断该属性是否为对象自有属性(而不是在原型上)

第二类,获取函数/操作,返回属性数组:

  1. for(var x in 【对象】):返回所有可通过对象访问的、enumerated的属性,无论在自身还是原型(自身属性都可枚举)
  2. Object.getPrototypeOf(【对象】):获取对象的原型
  3. Object.keys(【对象】):返回对象上可枚举的自身属性
  4. Object.getOwnPropertyNames(【对象】):返回对象上所有自身属性,无论是否可枚举(作用于原型对象时可获取constructor属性)

所有原生的引用类型如Object、Array、String等,都是通过原型模式创建的。当前主流的创建自定义类型的方法是组合使用构造函数模式和原型模式。

JavaScript学习笔记之原型对象的更多相关文章

  1. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  2. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  3. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  4. javascript学习笔记02--面向对象学习

    js面向对象编程 1.  javascript 是一种基于对象的编程    object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...

  5. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. 1.4(JavaScript学习笔记) window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

  7. JavaScript学习笔记之BOM对象

    目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...

  8. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

  9. JavaScript学习笔记-正则表达式(RegExp对象)

    正则表达式(RegExp对象)   1.正则表达式字面量,在脚本加载后编译.若你的正则表达式是常量,使用这种方式可以获得更好的性能,重复使用时不会重新编译: 2.使用构造函数创建的RegExp,提供了 ...

随机推荐

  1. Linux Shell编程(26)——代码块重定向

    像 while, until, 和 for 循环代码块, 甚至 if/then 测试结构的代码块都能做到标准输入的重定向. 即使函数也可以使用这种重定向的格式 .所有的这些依靠代码块结尾的 < ...

  2. 用delphi的THTTPRIO控件调用了c#写的webservice。

    用delphi的THTTPRIO控件调用了c#写的webservice. 下面是我调试时遇到的一些问题: 1,导入wsdl文件:file--new----other----wenservice---W ...

  3. screen space directional occlusion(SSDO) in Unity5

    也许是哪里出了问题..效果一般 16采样点 Gird . Random 博主近期渲染:最近用unity5弄的一些渲染 ---- by wolf96  http://blog.csdn.net/wolf ...

  4. DSP知识

    自己认为是问题的问题,时常更新,为了记录学习的点点滴滴. 1.什么是boot loader ? DSP 的速度尽快,EPROM 或flash 的速度较慢, 而DSP 片内的RAM很快, 片外的RAM也 ...

  5. [转载]Div和Table的区别

    1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...

  6. 来更新一篇blog吧

    最近做了一下hackerrank的20/20的比赛.平时都只能过2题,这周顺利地通过了四道题目竟然.当妄图冲击衬衫的时候,发现剩下三个题一点招数都没有,之后就跑去看了一下node.js了... 这次比 ...

  7. 一些收费的vpn或ssh代理

    www.expressvpn.com TorGuard:    https://help.ubuntu.com/community/Tor?action=show&redirect=TOR h ...

  8. hdu 1015 dfs

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is locked in a Kle ...

  9. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  10. MySQL (DCL)

    DCL语句 :数据库系统管理员使用,也就是数据库管理员 root 可以添加用户.删除用户.授予和限制用户权限,这些用户的信息可以在数据库的mysql数据库中查询到 1.查看用户信息     1.用ro ...