javascript创建对象的方法--原型模式

一、总结

1、原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改

2、原型的使用(prototype关键字):定义模型的时候在属性中加上prototype关键字就好,这里对象用的不是this,prototype关键字添加方式用的是点,例如Peopleobj.prototype.name='喽啰';

3、缺点:构造函数没有参数

二、(Prototype)原型模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。可以把那些不变的属性和方法,直接定义在prototype对象上。

  1. prototype方式定义的方式,函数不会拷贝到每一个实例中,所有的实例共享prototype中的定义,节省了内存。
  2. Prototype模式的验证方法
    1. isPrototypeOf()这个方法用来判断,某个proptotype对象和某个实例之间的关系。
    2. hasOwnProperty()每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性
    3. in运算符in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。in运算符还可以用来遍历某个对象的所有属性。
  3. 对象的constructor属性用于返回创建该对象的构造函数.(注:了解即可)

    在JavaScript中,每个具有原型的对象都会自动获得constructor属性。

  4. 原型方式的问题:
    • 构造函数没有参数。使用原型方式,不能通过给构造函数传递参数来初始化属性的值
    • 属性指向的是对象,而不是函数时。函数共享不会造成问题,但对象却很少被多个实例共享,如果共享的是对象就会造成问题。

三、代码

2-5

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>课堂演示</title>
  6. </head>
  7. <body>
  8. <script>
  9. //原型模式
  10. function Peopleobj(){}
  11. Peopleobj.prototype.name='喽啰';
  12. Peopleobj.prototype.weapon='大刀';
  13. Peopleobj.prototype.run=function(){
  14. return this.name+'的武器是'+this.weapon
  15. }
  16. var monster_1=new Peopleobj()
  17. monster_1.job=[]
  18. var monster_2=new Peopleobj()
  19. //alert(monster_1.name+'\n'+monster_1.run())
  20. //alert(monster_2.name+'\n'+monster_2.run())
  21. //alert(monster_1.run)
  22. //alert(monster_2.run)
  23. //alert(monster_1.run==monster_2.run) //说明他们的引用是同一个地址
  24. //这时所有实例的方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。
  25. //alert(Peopleobj.prototype.isPrototypeOf(monster_1));
  26. // alert(monster_1.hasOwnProperty("name"));
  27. // alert(monster_1.hasOwnProperty("job"));//true,是自己独有的属性
  28. alert("jobb" in monster_1);
  29. </script>
  30. </body>
  31. </html>

1、原型模式的使用:第11行,原型模式的使用时通过在模型中添加prototype关键字

2、原型模式模型函数创建:第13行,函数汇总的函数还是采用的这种匿名函数的方式

3、原型模式对象创建自己独有属性:第17行,原型模式对象创建自己独有的属性

4、原型模式解决内存浪费:第23行,原型模式的对象用的是同一个地址

5、isPrototypeOf方法:第25行,原型模式的方法isPrototypeOf来判断proptotype对象和某个实例之间的关系,原型和实例的位置好像和常见的不同

6、hasOwnProperty方法:第26,27行,用hasOwnProperty来判断是否是对象独有属性

7、in方法:第28行,in方法,不明白去看上面的属性方法介绍

2-6

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>课堂演示</title>
  6. </head>
  7. <body>
  8. <script>
  9. //原型模式
  10. function Peopleobj(){}
  11. Peopleobj.prototype.name='喽啰';
  12. Peopleobj.prototype.weapon='大刀';
  13. Peopleobj.prototype.run=function(){
  14. return this.name+'的武器是'+this.weapon
  15. }
  16. var monster_1=new Peopleobj()
  17. var monster_2=new Peopleobj()
  18. //alert(monster_1.constructor)
  19. //这种写法和前面的方式在使用上基本相同,注意是基本
  20. function Monster(){}
  21. Monster.prototype={
  22. constructor: Monster, //此外强制指回Monster
  23. name:'喽啰', //原型字面量方式会将对象的constructor变为Object,
  24. weapon:'大刀',
  25. job:['巡山','打更'],
  26. run:function() {return this.name+'的工作是'+this.job }
  27. }
  28. var monsterA=new Monster()
  29. monsterA.job.push('砍柴')
  30. var monsterB=new Monster()
  31. monsterB.job.push('挑水')
  32. alert(monsterA.job)
  33. alert(monsterB.job)
  34. //alert(monsterA.constructor)
  35.  
  36. </script>
  37. </body>
  38. </html>

1、原型模式的省略prototype写法:第11行,每一个属性或者方法都有prototype,所以很烦,所以有了21到27行的另一种写法

2、另外用匿名函数的写法:第26行,另外一种匿名函数的写法,函数名:function(){}

javascript创建对象的方法--原型模式的更多相关文章

  1. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  2. javascript创建对象的方法--构造函数模式

    javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...

  3. javascript创建对象的方法--工厂模式(非常好理解)

    javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...

  4. javascript创建对象之动态原型模式(五)

    function Human(name, sex) { this.name = name; this.sex = sex; if (typeof this.say != "function& ...

  5. javascript创建对象的方法--动态原型模式

    javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题  2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...

  6. javascript创建对象之函数构造模式和原型模式结合使用(四)

    创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...

  7. javascript创建对象的方法--基本模式

    javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...

  8. javascript 创建对象的7种模式

    使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...

  9. javascript创建对象的方法总结

    Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...

随机推荐

  1. JavaScript【1】(数据类型)

     JS系列教程(数据类型)[1]

  2. back_inserter 与 iterator

    查看这里: http://www.cplusplus.com/reference/iterator/back_inserter/ 是用来在最后插入的 注意,这个函数,是隐式特化了.

  3. swift学习之数组

    首先数组的定义:以有序的方式存储同样类型的值 (1)数组的简写(shorthand)语法 你能够通过Array<Element>,在这里,Element时数组存储元素的值的类型.也能够通过 ...

  4. 【JavaScript】分秒倒计时器

    一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完毕使button变成不可点击状态 详细效果例如以下图.为了说明问题.调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把wi ...

  5. 根据on,获取选中的元素

    打钩的元素有个on的class. // 礼物发送 function send_gift() { var type,diamond,name,id; var list = $('.live .on'); ...

  6. JNI学习积累之二 ---- 数据类型映射、域描述符说明

    本文原创,转载请注明出处:http://blog.csdn.NET/qinjuning 在Java存在两种数据类型: 基本类型 和 引用类型 ,大家都懂的 . 在JNI的世界里也存在类似的数据类型,与 ...

  7. zzulioj--1816--矩形(好题数学)

    1816: 矩形 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 88  Solved: 24 SubmitStatusWeb Board Descri ...

  8. HAProxy高可用配置视频教程

    HAProxy提供高可用性.负载均衡等,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会话保持或七层处理.HAProxy运行在当前的硬件上, ...

  9. jQuery判断字符串是否含有中文字符

    //判断字符串是不是中文String.prototype.isChinese = function () {    var reg = /[^\x00-\xff]/ig;//判断是否存在中文和全角字符 ...

  10. SimpleDateFormat 时间格式化