js对象定义
JS中的对象定义方式,跟服务端,还是有很大差别的!
现在来说一下JS类的定义
工厂模式
function creatHeven(name,age){
var temp =new Object();
temp.age=age;
temp.name=name;
temp.say=function(){
alert(this.name);
};
return temp;
}
var tempHeaven=creatHeaven('heaven','29');
大家可以看到工厂模式很简单,但是也有一些问题,它虽然解决了具有一些共性类的创建,但是我们无法知道当前创建的类是什么具体类型,只能知道是一个Object,例如不能知道 Date等;
为了解决这个问题,于是就有了构造函数模式创建类;
构造函数模式:
function CreatHeaven(name,age){
this.name=name;
this.age=age;
this.say=function(){
alert(this.name);
};
}
var tempHeaven=new CreatHeaven('heaven',30);
大家看到,一些定义方式做了改变,类名称首字母也大写了,没有return,使用了new关键字;也能识别对象;
构造函数虽然好用,但是也是有缺点的,使用构造函数模式最大的缺点就是每次创建对象,都要创建方法,造成资源浪费,因此,我们可以将方法移到类外面,定义一个全局函数,但是这样看来并不像是一个类对象。
例如:
function say(){
alert(this.name);
};
function CreatHeaven(name,age){
this.name=name;
this.age=age;
this.say=say;
};
}
var tempHeaven=new CreatHeaven('heaven',30);
这样做,显然失去了面向对象封装的意义,我们可以采用原型模式去创建一个对象;
原型模式:
我们创建的每个函数都有prototype原型属性,这个属相是一个指针,它指向一个对象;而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法
function CreatHeaven(name,age){
CreatHeaven.prototype.name=name;
CreatHeaven.prototype.age=age;
CreatHeaven.prototype.say=function(){
alert(this.name);
};
}
var tempHeaven1=new CreatHeaven('heaven1',30);
var tempHeaven2=new CreatHeaven('heaven2',30);
原型模式也有缺点,就是如果属性是一个对象,例如数组;这样在创建实例的时候,就是公用这个数组,数组内容改变了,其他实例都是指向这个数组,值也会跟着变。这是我们不想要的结果。
所以出现了,”原型模式+构造函数模式“ 的方式创建类实例;
原型模式+构造函数模式:
function CreatHeaven(name,age){
this.name=name;
thsi.age=age;
}
CreatHeaven.prototype.say=function(){
alert(this.name);
};
var tempHeaven1=new CreatHeaven('heaven1',30);
tempHeaven1.say();
var tempHeaven2=new CreatHeaven('heaven2',30);
tempHeaven2.say()
每个实例都会有自己的一份实例属性,但同时又共享着方法,最大限度的节省了内存。另外这种模式还支持传递初始参数。优点甚多。这种模式在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。
动态原型模式:
unction CreatHeaven(name,age){
this.name=name;
this.age=age;
if(typeof this.say!='function'){
CreatHeaven.prototype.say=function(){
alert(this.name);
};
}
}
var tempHeaven1=new CreatHeaven('heaven1',30);
tempHeaven1.say();
var tempHeaven2=new CreatHeaven('heaven2',30);
tempHeaven2.say()
动态原型模式将所有信息封装在了构造函数中,而通过构造函数中初始化原型(仅第一个对象实例化时初始化原型),这个可以通过判断该方法是否有效而选择是否需要初始化原型。
总结:以上就是几个创建类实例的模式,根据具体需要选择哪个创建模式;推荐使用 ”原型模式+构造函数模式“,”动态原型模式“。
js对象定义的更多相关文章
- JS 对象定义
JS 对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象 ...
- js对象定义的最常用的三种方法
定义对象:属性和方法的结合体(变量和函数的结合体) 1.(***)var obj = {} 2.var obj = new Object(); 3.使用function定义对象 具体例子分别为: // ...
- [JS] 面向对象的5种写法和拓展JS对象的写法
面向对象的JAVA 最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...
- javascript对象定义和操作
//js对象定义有三种方式//js方法定义有三种方式 function fn(){} var fun = function(){} var fun = new function() {} //**** ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- js对象的定义及处理
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- JS中定义对象和集合
在js中定义对象: 方式一: var obj = {}; obj['a']=1; obj['b']=2; 方式二: var obj=new Object(); obj.a=1; obj.b=2; 在j ...
- JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
随机推荐
- ios开发人员北京,上海,深圳的工资待遇是多少?
ios开发人员北京,上海,深圳的工资待遇是多少? [1]首先看看平均工资 从图中来看,北京平均工资15570 居首,不愧是首都啊. 你过了平均线了吗?是不是感觉被平均了,如果感觉工资 ...
- 阿里云服务器怎么去掉tomcat的8080端口
前言:最近在阿里云申请了一个云服务器,然后已买了一个域名.比如www.haha.com ; 在云服务器上安装了tomcat ,访问服务器就成了 http://www.haha.com:8080/ . ...
- Java Collection Framework概述
文章出自:听云博客 Collection概述 Java collection是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等. Java集合主要可以划分为4个部分:Li ...
- 【读书笔记】iOS-ASIHTTPRequest框架的使用。
一,安装和配置ASIHTTPRequest框架. 二,同步请求. 在ASIHTTPRequest框架中与HTTP请求相关的类有:ASIHTTPRequest和ASIFormDataRequest,其中 ...
- C# MVC模式 404 500页面设置方法
<customErrors mode="On" defaultRedirect="Controllers/Action"> <error st ...
- 从多个XML文档中读取数据用于显示webapi帮助文档
前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...
- #一周五# (视频) 手掌四轴Estes 4606,树莓派2和WRTNode,WinHEC 2015深圳
又到周五,本周<快速创建网站>系列接近尾声,主要部分已经完成,还差最后一篇博主我正在整理.这里给大家分享一些最近看到的有意思的东西. 手掌四轴飞行器 无人机这段时间可是大出风头,DJI或者 ...
- github代码上传之命令提交
Git GUI的用法比较简单,随便弄弄就可以将本地git库中的代码提交到远端github服务器,所以想把Git bash这玩意儿的操作流程快速过一遍,主要是做个笔记,以后忘记了可以看看怎么操作的. 首 ...
- MongoDB查询重复记录并保存到文件csv
客户1w用户记录,发现里面有小部分重复数据 需要查出,比对哪些信息不同 https://docs.mongodb.org/manual/reference/operator/aggregation/# ...
- view组件的duplicateParentState属性
今天做页面的时候遇到一个小问题,在点击的时候改变组件的图片来源,这个很简单大家都知道,用selector可以很快实现.但是现状有点特殊,是 LinearLayout 中包裹着一个 ImageView ...