JavaScript 对象深入学习总结(经典)

对象是一种复合值,它将很多值(原始值或其他对象)聚合在一起,可通过属性名访问这些值。而属性名可以是包含空字符串在内的任意字符串。 JavaScript对象也可以称作一种数据结构,正如我们经常听说的“散列(hash)”、“散列表(hashtable)”、“字典 (dictionary)”、“关联数组(associative array)”。

JavaScript中对象可以分为三类:

①内置对象,例如数组、函数、日期等;

②宿主对象,即JavaScript解释器所嵌入的宿主环境(比如浏览器)定义的,例如HTMLElement等;

③自定义对象,即程序员用代码定义的;

对象的属性可以分为两类:

①自有属性(own property):直接在对象中定义的属性;

②继承属性(inherited property):在对象的原型对象中定义的属性(关于原型对象下面会详谈);

二.对象的创建

既然学习对象,又怎能不懂如何创建对象呢?面试前端岗位的同学,可能都被问过这个基础问题吧:

创建JavaScript对象的两种方法是什么?(或者:说说创建JavaScript对象的方法?)

这个问题我就被问过两次。“创建对象的两种方法”这种说法网上有很多,但是据我所看书籍来说是有三种方法的!下面我们就来具体谈谈这三种方法:

1.对象直接量

对象直接量由若干名/值对组成的映射表,名/值对中间用冒号分隔,名/值对之间用逗号分隔,整个映射表用花括号括起来。属性名可以是JavaScript标识符也可以是字符串直接量,也就是说下面两种创建对象obj的写法是完全一样的:

var obj = {x: 1, y: 2}; var obj = {'x': 1, 'y':2};

2.通过new创建对象

new运算符后跟随一个函数调用,即构造函数,创建并初始化一个新对象。例如:

1 var o = new Object();    //创建一个空对象,和{}一样
2 var a = new Array();    //创建一个空数组,和[]一样
3 var d = new Date();    //创建一个表示当前时间的Date对象

关于构造函数相关的内容以后再说。

3.Object.create()

ECMAScript5定义了一个名为Object.create()的方法,它创建一个新对象,其中第一个参数是这个对象的原型对象(好像还没解 释原型对象…下面马上就说),第二个可选参数用以对对象的属性进行进一步的描述,第二个参数下面再说(因为这第三种方法是ECMAScript5中定义 的,所以以前大家才经常说创建对象的两种方法的吧?个人觉得应该是这个原因)。这个方法使用很简单:

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

下面三种的完全一样的:

var obj1 = {}; var obj2 = new Object(); var obj3 = Object.create(Object.prototype);

为了解释为啥这三种方式是完全一样的,我们先来解释下JavaScript中的原型对象(哎,让客官久等了!),记得一位大神说过:

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

面向对象的编程语言JavaScript,没有类!!!那么,它是怎么实现继承的呢?没错,就是通过原型对象。基本上每一个JavaScript对 象(null除外)都和另一个对象相关联,“另一个”对象就是所谓的原型对象(原型对象也可以简称为原型,并没有想象的那么复杂,它也只是一个对象而 已)。每一个对象都从原型对象继承属性,并且一个对象的prototype属性的值(这个属性在对象创建时默认自动生成,并不需要显示的自定义)就是这个 对象的原型对象,即obj.prototype就是对象obj的原型对象。

原型对象先说到这,回到上面的问题,有了对原型对象的认识,下面就是不需要过多解释的JavaScript语言规定了:

①所有通过对象直接量创建的对象的原型对象就是Object.prototype对象;

②通过关键字new和构造函数创建的对象的原型对象就是构造函数prototype属性的值,所以通过构造函数Object创建的对象的原型就是Object.prototype了;

现在也补充了第三种创建对象的方法Object.create()第一个参数的含义。

三.属性的查询和设置

学会了如何创建对象还不够啊,因为对象只有拥有一些属性才能真正起到作用滴!那么,就继续往下学习对象的属性吧!

可以通过点(.)或方括号([])运算符来获取和设置属性的值。对于点(.)来说,右侧必须是一个以属性名命名的标识符(注 意:JavaScript语言的标识符有自己的合法规则,并不同于带引号的字符串);对于方括号([])来说,方括号内必须是一个字符串表达式(字符串变 量当然也可以喽,其他可以转换成字符串的值比如数字什么的也是都可以滴),这个字符串就是属性的名字。正如下面例子:

var obj = {x: 1, y: 2}; obj.x = 5; obj['y'] = 6

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggwsf.html