JavaScript学习笔记之创建对象


Posted in Javascript onMarch 25, 2016

JavaScript 有Date、Array、String等这样的内置对象,功能强大使用简单,人见人爱,但在处理一些复杂的逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象。

从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值、对象或函数。也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象。

对象是JavaScript的基本数据类型。在JavaScript中除了字符串、数字、true、false、null和undefined之外的值都是对象。所以,学习JavaScript不把对象学习明白要继续往下学习就非常的困难。从今天开始进入对象的学习中。

概述

在JavaScript中对象是一种基本的数据类型,在数据结构上是一种散列表,可以看作是属性的无序集合,除了原始值其他一切都是对象。可通过属性名访问这些值,而属性名可以是包含空字符在内的任意字符串。简单点说,一个对象就是一系列属性的集合,一个属性包含一个名字(key)和一个值(value)。

理解什么是JavaScript对象,你可以这样来想。在JavaScript中,一个对象就是一个具有属性的特体。就拿你看到的一妹子,这妹子就是一个对象,她有自己的属性。比如妹子身高,年龄,姓名等。同样,在JavaScript中,也可以用属性来给对象定义它的特征。

创建对象

既然要学习对象,那得先要有一个对象,这样问题就来了,JavaScript中对象要怎么创建呢?接下来就来看看在JavaScript中如何创建对象。

很多有关于JavaScript书在介绍对象创建的方法时,主要有:

使用对象字面量创建对象(key-value)

使用new创建对象

使用Object.create()创建对象

使用函数创建对象

使用原型创建对象

使用对象字面量创建对象

对象字面量是创建对象最简单的一种形式,目的是在于简化创建包含大量属性的对象的过程。对象字面量由若干属性名(keys)和属性值(values)成对组成的映射表,key和value中间使用冒号(:)分隔,每对key/value之间使用逗号(,)分隔,整个映射表用花括号({})括起来。

通过对象字面量创建对象的语法如下:

var obj = {
property_1: value_1, // property_# 可能是一个标识符...
2: value_2, // 或者是一个数字
// ...,
"property n": value_n // 或是一个字符串
};

这里obj是创建的对象的名称,每一个property_i是一个标识符(可以是一个名称、数字或字符串字面量),并且每个value_i是一个其值,并且将这个值赋予给property_i。来看一个具体实例:

var girl = {
'name': '欣欣',
'age' : 18,
'height': 175,
'weight': 45
}

这个示例创建了一个名为girl的对象,对象有四个属性name、age、height和weight。这四个属性对应有一个属性值。

使用对象字面量创建对象时,如果留空其花括号({}),则可以定义只包含默认属性和方法的对象。如:

var obj = {}

使用这种方式创建的对象时,可以通过点(.),也就是obj.key给对象obj创建对象属性,并且赋予对象的属性值。另外也可以通过方括号([]),也就是obj['key']给对象obj创建对象属性,并且赋予对象的属性值。如下面的示例:

var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

此时在Chrome中打印girl对象时,输出的结果如下所示:

console.log(girl);
//Object {name: "欣欣", age: 18, height: 175, weight: 45}

使用new创建对象

使用new操作符后跟Object构造函数(有关于构造函数,后面再讲)也可以创建对象:

var obj = new Object(); // 和 obj = {}相同

虽然初始状态下,obj是一个空对象,但在JavaScript中可以很方便地动态添加和使用成员,所以我们可以不断加入成员变量和方法。如:

var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

使用Object.create()创建对象

对象也可以用Object.create()方法创建。该方法非常有用,因为它允许你为创建的对象选择其原型对象,而不用定义一个构造函数。

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。

Object.create(proto, [ propertiesObject ])

Object.create()方法创建一个对象,其接受两个参数,其中第一个参数是这个对象的原型对象proto;第二个是一个可选参数,用以对对象的属性做进一步描述。这个方法使用很简单:

var obj1 = Object.create({
x: 1,
y: 2
}); //对象obj1继承了属性x和y
var obj2 = Object.create(null); //对象obj2没有原型

如果 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 异常。
有关于Object.create()方法更多的示例可以点击这里进行了解。

使用函数创建对象

在实际使用当中,字面量创建对象虽然很有用,但是它并不能满足我们的所有需求,我们希望能够和其他后台语言一样创建一个类,然后声明类的实例就能够多次使用,而不用每次使用的时候都要重新创建它。

因为JavaScript没有类,一般都是使用函数来定义一个类似其他语言中的类格式,比如:

function Person() {
this.name = "mary"; // 为这个类添加一个成员变量name,并为这个成员变量赋默认值
this.age = 5;
this.sayHello = function () {
console.log(this.name + " : " + this.age);
};
}

定义好类之后,我们就可以像下面这样创建和使用对象:

var person1 = new Person();
person1.name = 'Tom';
person1.age = 20;
person1.sayHello(); // Tom : 20
var person2 = new Person();
person2.name = 'W3cplus';
person2.age = 5;
person2.sayHello(); // W3cplus : 5

Person()函数不是用来被调用的,它是用来被new用的。

通过原型创建对象

这种方法比较前几种方法来说算是最为复杂,最为高级的方法。这里还涉及到封装的一些知识(有关于这些后续学习到了再记录)。这里简单看看如何通过原型创建对象。

首先像函数方法创建对象一样,先定义一个函数:

function Person() {
this.name = "W3cplus";
this.age = 5;
this.walk = function () {
console.log("一个前端网站...");
};
}

然后在外部可以扩允成员:

//添加成员方法
Person.prototype.sayHello = function () {
console.log("hello");
};
//也可以添加成员属性,
Person.prototype.height = 100;

一方面,原型可以扩充原有类的功能(特别是添加有用方法),也可以像下面这样写:

function Person() { }
Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
console.log("一个前端网站...");
};
Person.prototype.sayHello = function () {
console.log("hello");
};
Person.prototype.height = 100;

属性访问

对象属性访问一般有两种方法,第一种是使用点(.)表示法,这也是最常用的一种方法,也是很多面向对象语言中通用的语法。第二种方法还可以使用中括号([])表示法来访问对象的属性。在使用中括号语法时,应该将要访问的属性以字符串的形式放在中括号中。如下:

person['name'];
person.name;

从功能上来说,上面两种方法访问对象属性没有任何区别。但中括号语法的主要优点有两个:

可能通过变量访问属性,如下:

var propertyName = 'name';
person[propertyName];

另外一个优点是,如果属性名中包含了会导致语法错误的字符或者属性名使用的是关键字或保留字,可以使用中括号访问属性,如下:

person['first name'];

一般情况之下,除非必须使用亦是来访问对象属性,否则建议使用点(.)的方法来访问对象属性。

总结

对象是JavaScript的基本数据类型,如果要更好的往下学习JavaScript相关的知识,很有必要先把对象整明白。这篇主要介绍了几种创建对象的方法。较为简单的是通过字面量({})和new Object()方法创建,但这两种方法创建的对象复用性较差;使用Object.create()创建对象时不需要定义一个构造函数就允许你在对象中选择其原型对象。除了这几种方法还可以使用函数和原型创建对象,而这两种方法相对来说可复用性强,只是使用较为复杂。

有关JavaScript学习笔记之创建对象的知识小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 #Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 #Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 #Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 #Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 #Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 #Javascript
详解Javascript继承的实现
Mar 25 #Javascript
You might like
PHP文件缓存类示例分享
2015/01/30 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
开业庆典策划方案
2014/02/18 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
家庭贫困证明
2014/09/23 职场文书
党员民主评议自我评价
2014/10/20 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015中学学校工作总结
2015/07/20 职场文书
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS