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基本对象
Jan 11 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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 定界符 使用技巧
2009/06/14 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
又一个php 分页类实现代码
2009/12/03 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JS的反射问题
2010/04/07 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
创业计划书撰写原则
2014/01/25 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
致接力运动员广播稿
2014/02/17 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
音乐教育感言
2014/03/05 职场文书
关于环保的建议书
2014/05/12 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android