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

一、总结

0、作用：解决原型模式对象独有属性创建麻烦的问题

1、组合模式使用普遍：jquery就是用的组合模式，组合模式使用非常普遍

2、组合模式优点：a、支持传参  b、 解决内存浪费（共用的函数和属性用原型方式，非共用的的函数和属性用构造函数的方式）

3、组合模式的实现：共用的函数和属性用原型方式，非共用的的函数和属性用构造函数的方式

二、javascript创建对象的方法--组合模式

构造函数和原型组合模式

这是目前最为常用的创建对象的方式。

这种概念非常简单，即用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法）。结果是，所有函数都只创建一次，而每个对象都具有自己的对象属性实例。

此外，组合模式还支持向构造函数传递参数，可谓是集两家之所长。

在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！

三、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="utf-8">

   <title>课堂演示</title>

 </head>

 <body>

   <script>

   function Monster(){}

     Monster.prototype={

         constructor: Monster,

         name:'喽啰',

         job:['巡山','打更'],

         run:function() {return this.name+'的工作是'+this.job }

     }

 //构造函数和原型组合模式

      function Monster(name,arr){//非共用

         constructor: Monster,

         this.name=name

         this.job=arr

      }

     Monster.prototype={//共用

       run:function() {return this.name+'的工作是'+this.job }

     }

     var monsterI=new Monster('小旋风',['巡山','打更','砍柴'])

     var monsterII=new Monster('小钻风',['巡山','打更','挑水'])

     alert(monsterI.run())

     alert(monsterII.run())

   </script>

 </body>

 </html>

1、组合模式的实现：共用的函数和属性用原型方式，非共用的的函数和属性用构造函数的方式

2、this关键字：因为传参，所以this关键字

3、原型中可以调用对象的非共用属性：原型中可以调用对象的非共用属性，用this关键字

4、函数的定义和使用还是和之前一样

5、原型方式：对象名.prototype={}

6、构造器方式：constructor: Monster,

7、对比：注意组合模式和原型模式的对比

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

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

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. web前端教程之javascript创建对象的方法

    今天给大家讲讲javascript基础教程中的javascript面向对象的技术,这一次我们深入的学习一下JavaScrip基于t面向对象之创建对象,关于面向对象的一些术语这里就不给大家介绍了,不了解 ...

  9. JavaScript创建对象的方法

    显示在浏览器中的控制台中. <script type="text/javascript"> //这个工厂方法返回一个新的"范围对象" functio ...

随机推荐

  1. C# 从需要登录的网站上抓取数据

    [转] C# 从需要登录的网站上抓取数据 背景:昨天一个学金融的同学让我帮她从一个网站上抓取数据,然后导出到excel,粗略看了下有1000+条记录,人工统计的话确实不可能.虽说不会,但作为一个学计算 ...

  2. ArcGIS api for javascript——加载图标

    描述 这个示例展示了如何能用一个动画图片显示地图正在加载.在这个示例中,图片是一个小的动画GIF.当地图第一次加载或用户缩放和平移地图时显示图片.当所有图层加载完成图片消失. 这个示例是通过event ...

  3. volatile的含义

    从词面上来讲.volatile的意思是易变的,也就是说.在程序执行的过程中,有一些变量可能会被莫名其妙的改变,而优化器为了节约时间.有时候不会重读这个变量的真实值,而是去读在寄存器的备份,这种话,这个 ...

  4. HNU13303 Counting substhreengs(递推)

    题目:http://acm.hnu.cn/online/? action=problem&type=show&id=13303&courseid=0 题意:给你一个字符串,由数 ...

  5. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  6. 23.IDEA 运行junit单元测试方法

    转自:https://blog.csdn.net/weixin_42231507/article/details/80714716 配置Run,增加Junit 最终配置如下:

  7. WebServic调用天气预报服务

    在项目开发中,我们除了发布WebService提供客户调用外,也经常需要调用一些客户或者第三方的WebService服务,这里就通过一个Demo来演示调用一个第三方的天气预报服务. 1.天气预报服务接 ...

  8. 2015北京网络赛 D-The Celebration of Rabbits 动归+FWT

    2015北京网络赛 D-The Celebration of Rabbits 题意: 给定四个正整数n, m, L, R (1≤n,m,L,R≤1000). 设a为一个长度为2n+1的序列. 设f(x ...

  9. Codeforces 344D Alternating Current 简单使用栈

    Description Mad scientist Mike has just finished constructing a new device to search for extraterres ...

  10. 动态调用web服务 --WSHelper.cs

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Net;us ...