javacript 组合使用构造函数模式和原型模式
构造函数模式创建对象
基本方法
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 组合使用构造函数模式和原型模式的更多相关文章
- JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象
一.仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下: 1.它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题 ...
- 【js基础】创建对象的几种常见模式(工厂模式,构造函数模式,原型模式,构造原型组合模式)
一.工厂模式 缺点:没有解决对象识别的问题 优点:解决了创建多个相似对象的问题 function createPerson(name,age,job){ var o = new Object(); o ...
- JS中使用组合构造函数模式和原型模式
创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式.构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性. 结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的 ...
- JS面向对象(1)——构造函数模式和原型模式
1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...
- javascript 面向对象编程(工厂模式、构造函数模式、原型模式)
javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /** * 工厂模 ...
- js设计模式:工厂模式、构造函数模式、原型模式、混合模式
一.js面向对象程序 var o1 = new Object(); o1.name = "宾宾"; o1.sex = "男"; o1.a ...
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作. 工厂 ...
- 初涉JavaScript模式 (7) : 原型模式 【三】
组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...
- javascript创建对象之函数构造模式和原型模式结合使用(四)
创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...
随机推荐
- 数据结构-栈 C和C++的实现
在数据结构中,栈是一种桶状结构,每次往桶里放数据,最后放的数据最先被拿出来,最先放进去的数据最后才能出来(FILO) C语言: 一.文件清单: MyStack.h: #ifndef _MYSTACK_ ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- Java集合干货——LinkedList源码分析
前言 在上篇文章中我们对ArrayList对了详细的分析,今天我们来说一说LinkedList.他们之间有什么区别呢?最大的区别就是底层数据结构的实现不一样,ArrayList是数组实现的(具体看上一 ...
- windows NLB+ARR实现Web负载均衡高可用/可伸缩
基于IIS的ARR负载均衡 基于NLB负载均衡 这两篇分别分ARR 和 NLB基本配置,下面我们讲讲,如何组合使用,搭配成高可用/可伸缩集群. 什么是高可用,可伸缩 ? 高可用:是指系统经过专门设计减 ...
- Android刮刮卡自定义控件
网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLay ...
- HDU 2503 a/b + c/d(最大公约数与最小公倍数,板子题)
话不多说,日常一水题,水水更健康!┗|`O′|┛ 嗷~~ a/b + c/d Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768 ...
- 【笔记】nodejs读取JSON,数组转树
const fs = require('fs'); // --------------- 读取源文件 --------------- const originData = require('./vux ...
- 解决vi编辑器不能使用方向键和退格键问题的两种方法
方法1.使用vi命令时,不能正常编辑文件,使用方向键时老是出现很多字母? 在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由于 ...
- 安装Ubuntu16.04失败
原本安装的是Ubuntu14,但是在使用caffe时总是出错,所以干脆将Ubuntu从14升级到16,结果整出一堆麻烦.在解决这些麻烦的过程也学习了不少系统启动的细节.印证了那句话"如何没有 ...
- 如何给网站添加CNZZ站长统计功能代码的常用办法
前几天有个客户来问小编怎么给网站添加上CNZZ站长统计工具,其实这个很简单,只要把cnzz免费代码复制到我们的footer文件就行.今天小编正好有空就来分享一下具体的操作过程. 首先要想获得这个免费的 ...