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 相关文章推荐
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
Angular 应用技巧总结
Sep 14 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
Vue响应式原理详解
Apr 18 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
最短的IE判断代码
2011/03/13 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
关于母亲节的感言
2014/02/04 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
督导岗位职责范本
2015/04/10 职场文书
公司员工体检通知
2015/04/21 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书