原型模式:

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(原型对象),而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法,如果说的容易点就是,通过prototype. 声明的函数或则属性 都能给所有实例共享(当然必须是由此创建的对象);

  eg:

    function Person(){};

    Person.prototype.name="Nicholas";

    Person.prototype.sayName=function(){alert(this.name);}

    var person1 = new Person();

    var person2 = new Person();

    person1.sayName == person2.sayName; //true

1,理解原型对象

  上面说过,无论在什么时候创建一个函数,就会根据一组特定规则为该函数创建一个 prototype 属性,这个属性指向的函数原型的对象,而原型对象又会自动生成了一个constructor(构造函数)属性来回指向函数,就拿上面的来说:Person.prototype.constructor = Person;

最后,我们来根据构造函数来创建一个实例,而实例在建立之后,其内部将包含一个指针(是个内部属性,一般都是 __xx__ 来构成),这个指针指向的是原型对象 prototype ;

结论:通过上面说的,我们得到一个结论,那就是 实例 和 构造函数的原型之间 存在一种 连接。

  附图:

 

2,如何判断 实例是否在其原型中

  • isPrototypeOf() : 通过这个方法来确定 对象和构造函数之间是否存在关系,从字面理解,"isPrototypeOf" = "原型是来自"; 语句:Person.prototype.isPrototypeOf(person1); //true
  • hasOwnProperty(): 拥有自己的属性。该方法可以检测一个属性是否存在一个 实例 中,还是存在于 原型 中。这个方法是从 Object继承而来。只在给定属性存 在于对象实例 中的时候,才会返回 true ; 语句:person1.hasOwnProperty("name"); //true
  • in():在....; 有两种方式才会使用 in ,单独使用和for-in循环中。单独使用,in操作符通过对象能够访问给定属性时返回 true,无论属性是存在实例中还是原型中。语句:“name” in person1

  结论: 使用 in 和 hasOwnProperty(),来判断给定的属性是存在于原型中还是实例中;

      code:

function hasPrototypeProperty(object,name){return !object.hasOwnProperty(name) && (name in object);
}

3,更简单的原型语法

  

function Person(){}
Person.prototype ={name:"Nicholas",age:29,job:"sofware",sayName:function(){alert(this.name);}
}

看到这个代码,是不是感觉很优美?这种字面量的方法有个缺点,我们都知道 构造函数原型有个 constructor 属性指向构造函数。如果使用这个对象字面量方法来创建对象,那么 constructor 属性会指向Object ! 原因在于:我们在这里使用这个语法,本质上重写了默认的 prototype 对象,因此constructor 属性也变成了新对象 constructor属性。如果还是不理解的话,那么我们看下面变形的语法:

function Person(){}
Person.prototype = prototypes;
var prototypes = {name:"Nicholas",age:29,job:"sofware",sayName:function(){alert(this.name);}
}

看到了吗?对象字面量本来就是可以创建一个对象,那么我们的对象名字就是 Prototype

我们把本来要赋值给Person原型对象的 ,我们赋值给一个变量,再然后,把这个集合赋值给 person 原型对象,那么 Person.prototype.construtor = prototypes.prototype.construtor;

那么这个缺点该如何解决呢?

function Person(){}
Person.prototype  = {constructor: Person,name:"Nicholas",age:29,job:"sofware",sayName:function(){alert(this.name);}
}

只要给对象的属性指定 constructor 属性等于 Person就OK了,呵呵,再这里已经可以到 继承 的影子了。

  

转载于:https://www.cnblogs.com/zhiyuan-2011/articles/3789973.html

JavaScript高级程序设计之什么是原型模式相关推荐

  1. 《javascript高级程序设计》笔记:原型图解

    文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 "铁三角关系"(重点) function Person() {}; var p = ...

  2. 《JavaScript 高级程序设计》 7.5 常用模式

    转载于:https://www.cnblogs.com/xiaochaohuashengmi/archive/2010/11/07/1871129.html

  3. 《javascript高级程序设计》笔记:内存与执行环境

    上一篇:<javascript高级程序设计>笔记:继承 近几篇博客都会围绕着图中的知识点展开 由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...

  4. 《javascript高级程序设计》笔记:变量对象与预解析

    上一篇:<javascript高级程序设计>笔记:内存与执行环境 上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...

  5. 《JavaScript高级程序设计(第3版)》教程大纲

    词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...

  6. 前端红宝书《JavaScript高级程序设计》核心知识总结

    此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...

  7. 《JavaScript高级程序设计》(第2版)上市

      本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写 了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...

  8. 《Javascript高级程序设计》读书笔记之对象创建

    <javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...

  9. javascript高级程序设计pdf_一个老牌程序员推荐的JavaScript的书籍,看了真的不后悔!...

    很多人问我怎么学前端?我的回答是:读书吧!相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高.而如果深一脚浅一脚的学习,写出代码的质量 ...

最新文章

  1. 贝叶斯厉害在哪里,相当牛的文章
  2. 汇编中的.section命令及汇编语言程序都至少声明的3个段
  3. js中获取时间new date()的用法
  4. vc++6.0 同步本机时间到Internet NTP服务器 编译通过
  5. 落在我手里,今天你能嫁出去算我输!
  6. 工作占用了太多私人时间_下班后还要被逼谈工作,我们应该如何处理?
  7. 系统目录结构 ls命令 文件类型 alias命令
  8. 说说图片加载不出来_孩子做错事不可怕,令人担忧的是你说出来的话!
  9. C语言课后习题(55)
  10. hadoop2.4.1源码在64位系统编译过程中遇到的几个错误及解决方法
  11. 洛谷oj---P1896 [SCOI2005] 互不侵犯
  12. VS2019MSDN的下载安装和使用
  13. 手机信号强度dbm与天线格度的关系
  14. 基于单片机的表决器(七人)系统设计(#0496)
  15. 【信息学奥赛一本通】题解目录
  16. UG(NX)二次开发 BlockUI 集列表使用方法
  17. 《东周列国志》第三十八回 周襄王避乱居郑 晋文公守信降原
  18. buu [QCTF2018]Xman-RSA
  19. 超简洁WIN10桌面分享
  20. cannot unbox null value

热门文章

  1. In_interrupt( ) 和In_irq( )【转】
  2. 全面认识Eclipse中JVM内存设置(转)
  3. #pragma once 和 #ifndef ... #define ... #endif 的区别
  4. 【转】PHP发送邮件之PHPMailer
  5. 蓄水池抽样(Reservoir Sampling)
  6. 自己动手清除电脑中的***程序
  7. React组件的state和props
  8. easypoi导出word表格_Java导出word文档(POIamp;Spire.Doc)
  9. 开源阅读_开源如何维持您的阅读习惯
  10. 使用devops的团队_DevOps团队的3种指标仪表板