构造函数模式创建对象

基本方法
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
alert(this.name)
}
}
var p1=new Person('a1','b1');
var p2=new Person('a2','b2');
alert(p1.sayName===p2.sayName); //false
缺点

每个方法都要在每个实例上创建,由上面的代码可知p1和p2的都有一个sayName方法,但是这两个方法并不是同一个Function的实例,这样就很容易造成资源的浪费

原型模式

定义

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的的所有实例共享的属性和方法

基本方法
function Person(){

}
Person.prototype={
constructor:Person,
name:'fj',
age:10,
friends:['aa','bb'],
sayName:function(){
alert(this.name);
}
}
var p1=new Person();
var p2=new Person();
p1.friend.push('ccc');
alert(p1.friends); //aa,bb,cc
alert(p2.friends); //aa,bb,cc
alert(p1.friends==p2.friends) //true
优点

解决了构造函数模式的不能将对象方法共享的弊端,让所有的对象实例共享他所包含的属性和方法。不用在构造函数中定义对象实例的信息,而是将这些信息直接添加在原型对象中

缺点

原型模式的缺点在于它的共享性,每个实力对象都将拥有相同的属性值,对于基本类型值的属性是没有多大问题的,但是对于引用类型值却是比较有较的问题,就像上面的例子一样p1和p2的frends属性是引用类型值,如果将其中的一个改变,那么另外一个也要改变

组合使用构造函数模式和原模式

定义

构造函数模式定义实例属性,原型模式用来定义方法和共享的属性

function Person(name,age){
this.name=name;
this.age=age;
this.friends=['aa','bb'];
}
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var p1=new Person('a1','b1');
var p2=new Person('a2','b2');
p1.friend.push('ccc');
alert(p1.friends); //aa,bb,cc
alert(p2.friends); //aa,bb
alert(p1.friends==p2.friends) //false
alert(p1.sayName===p2.sayName); //true
优点

综合了构造函数模式和原型模式都优点,使每个实例都有自己的一份实例属性的副本,又同时共享着对方法的引用,最大的节省了内存

总结

我觉得构造函数模式就像是css中的style属性,可以为每个对象定义不同的值,而原型模式就是css中的class,可以用在每个对象上,每个对象的方法都相同,只要改变原型中的方法,所有的实例都会被改变,就像class一样,改变里面的样式,所有被引用的元素都会改变样式

javacript 组合使用构造函数模式和原型模式的更多相关文章

  1. JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

    一.仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下: 1.它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题 ...

  2. 【js基础】创建对象的几种常见模式(工厂模式,构造函数模式,原型模式,构造原型组合模式)

    一.工厂模式 缺点:没有解决对象识别的问题 优点:解决了创建多个相似对象的问题 function createPerson(name,age,job){ var o = new Object(); o ...

  3. JS中使用组合构造函数模式和原型模式

    创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式.构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性. 结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的 ...

  4. JS面向对象(1)——构造函数模式和原型模式

    1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...

  5. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

      javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /** * 工厂模 ...

  6. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

  7. JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.   工厂 ...

  8. 初涉JavaScript模式 (7) : 原型模式 【三】

    组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...

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

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

随机推荐

  1. cloudera-manager所有服务提示时钟偏差问题解决办法

    今天新部署Cloudera Manager Hadoop(CDH)集群 发现祖国江山一片红,所有服务都报时钟偏差 1.查看各服务器,时钟是否正确 发现并无问题 2.查看CDH主机配置----主机时钟偏 ...

  2. main函数是主线程吗

    1.线程的概念: 线程是程序最基本的运行单位,而进程不能运行,所以能运行的,是进程中的线程. 2.线程是如何创建起来的: 进程仅仅是一个容器,包含了线程运行中所需要的数据结构等信息.一个进程创建时,操 ...

  3. Django之cookie验证

    先不用太多的蚊子描述什么是cookie,先做一个小实验: 此时我们在谷歌浏览器(一个客户端)和IE浏览器(另一个用户)测试: 刺客我们发现在两台浏览器都可以访问,而且不用进入login验证就可以登录, ...

  4. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  5. 细说log4j

    可能做过java项目的基本上都是用过log4j,它是用来做java日志的.比如我们做一个项目分为很多的模块,那我们怎么想要知道它什么时候启动了,这时候我们可以使用log4j标记某某模块启动了. 努力的 ...

  6. 【Java学习笔记之二十】final关键字在Java继承中的用法小结

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...

  7. [bzoj3233] [Ahoi2013]找硬币

    一开始没什么思路...后来想到确定最大硬币面值就知道其他面值能取多少了..而且结果是可以由较小的面值转移过来的. f[i]表示最大面值为i时的最小硬币数.a[i]表示第i个物品的价钱. f[i]=mi ...

  8. bzoj usaco 金组水题题解(1)

    UPD:我真不是想骗访问量TAT..一开始没注意总长度写着写着网页崩了王仓(其实中午的时候就时常开始卡了= =)....损失了2h(幸好长一点的都单独开了一篇)....吓得赶紧分成两坨....TAT. ...

  9. android新闻App源码、仿微信源码、地图音乐源码等

    Android精选源码 一款实用的休闲类App,新闻视频和技术应有尽有. android实现交互式K线图表源码 android新闻客户端和服务器源码 android MatetialDesign设计 ...

  10. python笔记一(正则表达式)

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 1 如果直接给出字符,则表示精确匹配 # 2 \d 表示数字, \w 表示字母或数字, . 可以匹配任意 ...