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 UI Dialog的样式设置问题
Dec 18 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jsPDF导出pdf示例
May 02 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
node app 打包工具pkg的具体使用
2019/01/17 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python lxml中etree的简单应用
2019/05/10 Python
pygame实现打字游戏
2021/02/19 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
写给妈妈的道歉信
2014/01/11 职场文书
就业协议书范本
2014/04/11 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
创业计划书之养殖业
2019/10/11 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python