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模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 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房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python+opencv实现动态物体识别
2018/01/09 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python3中property使用方法详解
2019/04/23 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python爬虫---requests库的用法详解
2020/09/28 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
大学生村官事迹材料
2014/01/21 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
python非标准时间的转换
2021/07/25 Python
Java版 单机五子棋
2022/05/04 Java/Android