JavaScript学习笔记之原型对象

时间:2022-09-02 14:08:32

本文是学习《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. 绕过HR破门而入的求职智慧

    以往我们在网上看到的很多求职文章或指导性纲领,譬如啥自信.做功课.良好形象.华丽的简历.工作经验.口才啥的,其实到了21世纪尤其是互联网高速发展的今天,前面这些技巧就显得无比空洞: 1.因为自信谁都可 ...

  2. xmpp xml基本语义

    基本语义 9.2.1 消息语义 <message/>节种类可被看作“推”机制,一个实体推信息给其它实体,与 EMAIL 系统中发生的通信类似.所有消息节应该拥有‘to’ 属性,指定有意的消 ...

  3. 判断一个字符串是否为有效ip地址

    bool f (const char *s) { int s1,s2,s3,s4; ) { return false; } if ((s1 & 0xffffff00) || (s2 & ...

  4. iOS开发——自定义进度圆环

    1.在DrawCircle.h文件中 提供了接口,在使用的时候,可以设定圆心.半径.角度.圆环的宽度.圆环的背景底色.圆环的进度条颜色,当然后面三个有自定义的值. // //  DrawCircle. ...

  5. HDU 5547 Sudoku&lpar;DFS&rpar;

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=5547 题目: Sudoku Time Limit: 3000/1000 MS (Java/Others ...

  6. slf4j的使用2

    一.Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行 ...

  7. nginx介绍&lpar;四&rpar; - 反向代理

    前言 前面虚拟主机的部分, 发现我所有的修改, 都是对 nginx 目录下, nginx.conf 和 html 文件夹的操作. 我的最终目的, 是映射到不同电脑的tomcat里面去啊, 操作这里的h ...

  8. &period;NET本质论 实例

    对象和值的比较 CLR的类型系统(其实就是通用类型系统(CTS),它定义了如何在运行库中声明,使用和管理类型,同时也是运行库支持跨语言集成的一个重要组成部分)将对应简单值的类型同对应传统"对 ...

  9. &period;net mvc 站点自带简易SSL加密传输

    因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net 解密返回后端.net用rsa/aes 或 rsa/ ...

  10. 2 URL的玩法

    preface 这里我主要说说flask的URL玩法 include: 动态URL规则 自定义URL转换器 HTTP方法 唯一的URL 构造URL 跳转和重定向 动态URL规则 URL规则可以添加变量 ...