JavaScript深入理解之对象
2017-01-06 17:26
288 查看
JavaScript深入理解之对象
1.这里首先解释一下JS中数据类型和对象,这两个东西经常弄混。六种主要数据类型 | 九种内置对象 |
---|---|
string | String |
boolean | Boolean |
number | Number |
object | Object |
null | Function |
undefined | Array |
RegExp | |
Date | |
Error |
var obj = { //字面量 key: value // ... } let _obj = new Object(); //构造形式 _obj.key = value;
3.在JavaScript中,这九种对象实际是是一些内置函数,这些内置函数可以当作构造函数来实用,从而可以构造一个对应子类型的新对象,对九种内置对象进行typeof运算,全部返回function 。
let a = "aaa"; // a是一个字面量,并不是一个对象 let aa = a instanceof String; console.dir(aa); // => false let b = new String('bbb'); // 利用构造函数String来新建一个字符串对象 let bb = b instanceof String; console.dir(bb); // => true
4.关于对象的值
* 对象的内容是由一些存储在特定命名位置的至组成,称之为属性,而存储在对象内部的是这些属性的指针(或者说是引用),并不是存储的真正的属性值。 *
var a = { name: 9 } var b = a; console.log(a.name); // => 9 console.log(b.name); // => 9 b.name = 2; console.log(a.name); // => 2 console.log(b.name); // => 2 var b = { name: 10 } console.log(a.name); // => 2 console.log(b.name); // => 10
* 上例分析:a为一个对象,b是对a的引用,即a和b指向的同一块内存,所以前两个输出一样,当b修改时,即a和b指向的同一块地址的内容发生改变,所以a也会体现出来,第三个和第四个的结果一样,当b被重新定义时,b指向了一块新的内存地址,a还是指向原来的内存,所以最后两个不一样 *
5.对象的属性和方法
var a = { bar: 123, foo: function() { console.log('foo'); } } var someFoo = a.foo; console.log(type someFoo); // => function someFoo(); // => foo ,括号是让函数立即执行,作用相当于立即函数后面的一堆括号
* 对象的属性和方法其实是一样的,只是某一个属性为一个函数,所以大家都习惯称该属性为方法*
6.typeof —– 获取变量的类型
* typeof用来获取变量的数据类型,并不是判断是属于什么对象,typeof的返回值有六种,看下图代码 *
console.dir(typeof '123'); // => 'string' console.dir(typeof true); // => 'boolean' console.dir(typeof 123); // => 'number' console.dir(typeof {a:123}); // => 'object' console.dir(typeof [123]); // => 'object' console.dir(typeof null); // => 'object' console.dir(typeof undefined); // => 'undefined' console.dir(typeof function(){}); // => 'function'
7.instanceof —– 判断一个对象是否由某个指定的构造器函数所创建
console.dir('123' instanceof String); // => false console.dir(true instanceof Boolean); // => false console.dir(123 instanceof Number); // => false console.dir({a:123} instanceof Object); // => true console.dir(function(){} instanceof Function); // => true console.dir([123] instanceof Array); // => true
* 上例中:前面三个返回的是false,为什么呢,难道’123’不是属于字符串吗?其实是这样的,’123’是字符串,console.log(typeof 123)会打印出string,但是instanceof操作符要求左边的是一个对象,instanceof是判断一个对象是否由某个构造器函数生成,即前提条件是:instanceof左边要是对象,右边要是函数;否则进行instanceof运算是没有意义的。’123’只是一个字面量,并不是一个对象,因此会返回false。第二个和第三个输出是同样的道理,要想生成一个’123’字符串对象,如下:*
let aa = new String('123'); console.log(aa instanceof String); // => true console.log(aa); // => String { 0:"1", 1:"2", 2:"3"} console.log(typeof aa); // => object
8.constructor —– 构造器属性
let aa = new String('123'); console.log(aa.constructor); // => String() console.log(typeof aa.constructor); // => function console.log(aa instanceof String); // => true
* 当我们创建一个对象,该独享同时被赋予一种特殊的属性,constructor,称之为构造器属性,该属性是一个指向用于创建该对象的构造器函数的引用,即对象的constructor属性值指向这个对象创建是所引用的构造器函数,当(newObject instanceof FunctionName)为true时,newObject.constructor指向FunctionName*
9.对象属性描述符
let a = { aa: 123 } let b = Object.getOwnPropertyDescriptor(a, 'aa'); console.log(b); /* { value: 2, //该属性的值 writable: true, //该属性值是否可修改 enumberable: true, //遍历该对象时,该属性是否被遍历 configurable: true //该属性是否可配置,即value、writable、enumerable是否可修改 } */
10.对象属性存在 —– in、hasOwnProperty();
* in操作符会检查属性是否存在对象及其原型原型链中,hasOwnProperty()只会检车属性是否存在对象中. *
function AA(){ this.a = 123; this.b = 456; } AA.prototype.c = 789; let aa = new AA(); let bb = 'a' in aa; let cc = 'c' in aa; let dd = aa.hasOwnProperty('c'); console.log(bb); // => true console.log(cc); // => true console.log(dd); // => false
11.对象属性遍历 —– for…in、for…of
let a = [1, 2, 3]; let b = { aa: 1, bb: 2, cc: 3 } for(let i in a){ console.dir(i); // '0' '1' '2' } for(let i in b){ console.dir(i) // 'aa' 'bb' 'cc' } for(let i of a){ console.dir(i); // 1 2 3 }
* for…in用来遍历对象的索引(属性),但是遍历对象属性时的顺序可能是不确定的,即不是按顺序便利,for…of用来遍历含有iterator接口的对象的属性值 *
相关文章推荐
- 深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- 深入理解JavaScript系列(9):根本没有“JSON对象”这回事!
- 深入理解JavaScript系列(9):根本没有“JSON对象”这回事!
- 深入理解JavaScript系列(12) 变量对象(Variable Object)
- javascript 对象的深入理解
- 深入理解JavaScript系列(47):对象创建模式(上篇)
- 深入理解JavaScript系列(12):变量对象(Variable Object)
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- 深入理解JavaScript系列(12) 变量对象(Variable Object)
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- 深入理解JavaScript系列(9):根本没有“JSON对象”这回事!
- 深入理解JavaScript系列(12):变量对象(Variable Object)
- 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性
- JavaScript创建对象:深入理解编程原理
- 深入理解JavaScript系列(47):对象创建模式(上篇)
- 深入理解JavaScript系列(47):对象创建模式(上篇)
- 深入理解JavaScript系列(12):变量对象(Variable Object)
- 深入理解JavaScript系列(9):根本没有“JSON对象”这回事!