JS对象创建的几种方式整理


Posted in Javascript onFebruary 28, 2017

最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式。话不多说,直接步入正题。

第一种:Object构造函数创建

var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

这行代码创建了Object引用类型的一个新实例,然后把实例保存在变量Person中。

第二种:使用对象字面量表示法

var Person = {};//相当于var Person = new Object();
var Person = {
 name:'Nike';
 age:29;  
}

对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。也就是说,第一种和第二种方式创建对象的方法其实都是一样的,只是写法上的区别不同

在介绍第三种的创建方法之前,我们应该要明白为什么还要用别的方法来创建对象,也就是第一种,第二种方法的缺点所在:它们都是用了同一个接口创建很多对象,会产生大量的重复代码,就是如果你有100个对象,那你要输入100次很多相同的代码。那我们有什么方法来避免过多的重复代码呢,就是把创建对象的过程封装在函数体内,通过函数的调用直接生成对象。

第三种:使用工厂模式创建对象

function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name); 
 };
 return o; 
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式。

第四种:使用构造函数创建对象

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 }; 
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');

对比工厂模式,我们可以发现以下区别:

1.没有显示地创建对象

2.直接将属性和方法赋给了this对象

3.没有return语句

4.终于可以识别的对象的类型。对于检测对象类型,我们应该使用instanceof操作符,我们来进行自主检测:

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture

同时我们也应该明白,按照惯例,构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的,但是它也有它的缺点:

就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法

第五种:原型创建对象模式

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName();

使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。

如果是使用原型创建对象模式,请看下面代码:

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型

当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

这时候我们就可以使用构造函数模式与原型模式结合的方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性

第六种:组合使用构造函数模式和原型模式

function Person(name,age,job){
 this.name =name;
 this.age = age;
 this.job = job;
}
Person.prototype = {
 constructor:Person,
 sayName: function(){
 alert(this.name);
 };
}
var person1 = new Person('Nike',20,'teacher');

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
js仿淘宝评价评分功能
Feb 28 #Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 #Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
JavaScript Uploadify文件上传实例
Feb 28 #Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 #Javascript
简单实现AngularJS轮播图效果
Apr 10 #Javascript
ie下js不执行的几种可能
Feb 28 #Javascript
You might like
基于php判断客户端类型
2016/10/14 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python实现程序的单一实例用法分析
2015/06/03 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python补齐字符串长度的实例
2018/11/15 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
应届毕业生自荐信例文
2014/02/26 职场文书
联谊活动总结
2014/08/28 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
学术会议通知范文
2015/04/15 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
python not运算符的实例用法
2021/06/30 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL