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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
layui select动态添加option的实例
Mar 07 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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 安全检测代码片段(分享)
2013/07/05 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
为Python程序添加图形化界面的教程
2015/04/29 Python
python字符串中的单双引
2017/02/16 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python下载图片实现方法(超简单)
2017/07/21 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python中删除某个元素的方法解析
2019/11/05 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python编写单元测试代码实例
2020/09/10 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
大学生个人简历中的自我评价
2013/12/27 职场文书
教师节活动主持词
2014/04/02 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
优秀教师先进材料
2014/12/16 职场文书
业务员岗位职责范本
2015/04/03 职场文书
师范生见习总结范文
2015/06/23 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android