js基础阵营:变量篇之特殊变量-对象

JavaScript012

js基础阵营:变量篇之特殊变量-对象,第1张

这一章,我们将好好去看看一个特殊的变量,对象。

我们先看看官方的定义:无序属性的集合,其属性可以包含基本值,对象,或者函数。从字面意思上,我们可以理解为对象是一个没有特定顺序的的集合,对象的每一个属性和方法都有一个自己的名称,每一个名称都会有一个值,当然这个值,可以使对象,函数。以及其他基本类型数据。

不过还是太抽象了,我个人其实更倾向于将对象理解成一个“图纸”,一个建房子的图纸,在这个图纸上,我们标明了房子的具体形状,哪里开窗户等等一系列的参数,那么说到对象,就必然会说到实例,同样的道理,在我的理解里,实例,就是按照“图纸”来创建的一个个房子。那么对象这个图纸,有哪些属性和方法呢?

对象有两种属性:数据属性以及访问器属性

那么我们如何去修改以及设置这些值呢?好在js提供了一个方法, Object.defineProperty(obj(属性所在的对象),name(属性的名称),dataTypeObj(所要处理的数据类型)) 方法,如果不指定参数的话,以上1,2,3个数据属性都将是默认值true,如果指定了参数,将会将对象的具体属性的数据属性类型进行特殊处理。下面我们已房子图纸为例,来看下如何处理

复制到控制台,我们看下会显示什么

在控制台看下结果

在控制台中没有任何的输出,说明无法通过for in 来循环出书数据

上面我们说明了对象的4个数据类型,下面我们来看看对象的访问器属性

访问器属性是成对出现的,存与取

同时对于访问器属性,js同样提供了configurable以及enumerable属性。如果不设置值的话,将默认为false.

同数据属性一样,访问器属性不能跟直接的定义,只能通过Object.defineProperty()方法来设置。同样以上面的例子来说明

我们明明在赋值的时候给的是20000,为啥后面会多一个元呢?这就是get的功能。这样当我们赋值以及读取的时候我们都能够实时的监控了,这也就使得vue的诞生了,后面详细说下vue的原理。(又挖一个坑)

那么我们如何去读取一个对象的属性值呢?

在js中,我们难免会需要知道一个对象的数据属性以及访问器属性具体设置的值,所以js提供了 Object.getOwnPropertyDescriptor() 方法,来获取,同样以上面的例子来举例。

至此,我们关于对象的基本知识说完了,下一章,我们将一起来看看对象的创建

1、首先创建两个文件,一个jstest.html,一个jstest.js文件。

2、打开html在里面引入jstest.js。

3、打开jstest.js文件,创建一个方法aa。

4、然后接着使用if(typeof  aa=="function")判断如果aa方法存在就提示"aa方法存在",否则弹出"aa方法不存在",明显aa是存在的。

5、接着使用if(typeof  cc=="function")判断如果cc方法存在就提示"cc方法存在",否则弹出"cc方法不存在",因为我们没有定义cc这个方法,所以cc不存在。

6、打开jstest.html,第一会提示,“aa方法存在”。

因为无论是数组还是对象,对于typeof的操作返回值都为object,所以就有了区分数组类型和对象类型的需要:

方一:通过length属性:一般情况下对象没有length属性值,其值为undefiend,而数组的length值为number类型

缺点:非常不实用,当对象的属性存在length,且其值为number(比如类数组),则该方法失效,不建议使用,看看即可。

*方二:通过instanceof来判断区分

var arr = [1, 2, 3] var obj = {name: 'lyl',age: 18,1: 'name'}console.log(arr instanceof Array)//trueconsole.log(obj instanceof Array)//false

*方三:通过constructor

var arr = [1, 2, 3] var obj = {name: 'lyl',age: 18,1: 'name'}console.log(arr.constructor === Array)//trueconsole.log(obj.constructor === Array)//false