JavaScript中的Objects
在JavaScript中,创建Objects有两种方式,declarative (literal) form和 constructed form。
首先,声明式如下:
var myObj = {
key: value
// ...
};
构造式如下:
var myObj = new Object();
myObj.key = value;
声明式与构造式创建的对象完全相同,只不过构造式的需要一个个地添加添加属性,一般情况下我们都是采用声明式的创建对象。
JavaScript中的原始类型
JavaScrip中有六种原始类型:
- string
- number
- boolean
- null
- undefined
- object
他们并不属于对象类型,值得注意的是,null有时候被认为是对象类型,主要原因是typeof null的返回值为object(该语言的bug),实际上,null属于原始类型。
还有一种误解
everything in JavaScript is an object
显然这也是错误的。
对象类型中还有一些对象类型的子类型的( object sub-types),function是其子类型(专业术语称之为callable object),在JavaScript被认作是第一等的(first class),相比一般对象,function具有调用属性(callable behavior),还有一种对象类型的子类型为数组(Arrays ),相比一般对象,其内容更结构化。
JavaScript中还有一些内置对象的子类型,我们称之为内置对象(built-in objects),有如下几种:
- String
- Number
- Boolean
- Object
- Function
- Array
- Date
- RegExp
- Error
这些内置对象表现出来的特性甚至与Java中的class的特性一致,实际上,它们都是内置函数(built-in functions),这些内置函数都被用作构造器(constructor ),关于JavaScript 中的构造器,
传统的面向对象的语言中,构造器属于class的特殊方法,当我们使用new实例化一个类时,其构造器被调用,JavaScript 中的构造器与此很不同,JavaScript 中的构造器只是一般的函数(functions ),其恰好在函数前面使用了new操作符,它们与class无关,也不是用来实例化一个类,它们只是一个很普通的函数,只不过被new操作符 控制 调用了而已,它们不是constructor functions,只是construction calls of functions而已。
var strPrimitive = "I am a string";
typeof strPrimitive; // "string"
strPrimitive instanceof String; // false
var strObject = new String( "I am a string" );
typeof strObject; // "object"
strObject instanceof String; // true
// inspect the object sub-type
Object.prototype.toString.call( strObject ); // [object String]
strPrimitive属于原始类型,strObject 属于对象类型,当我们如果要检查strPrimitive的长度,获取其内容时,我们需要String类型的对象类完成操作。
幸运的是,当我们将原始类型的string转化(coerces )为对象类型的String时,这些操作都被自动完成了,因此,一般来说,我们并不需要创建对象类型的变量,只需创建其对应的原始类型的变量即可,在需要时,JavaScript会自动帮我们转化为对应的对象类型。
var strPrimitive = "I am a string";
console.log( strPrimitive.length ); // 13
console.log( strPrimitive.charAt( 3 ) ); // "m"
null 和undefined没有相应的对象类型,Date 类型没有对应的原始类型,Object, Array, Function, 和RegExp,无论我们使用literal还是使用constructor方式构建,其均为对象类型。
Error对象我们一般很少创建,其都是在出现异常时自动创建。
一般来说,对象中的内容不一定存储在对象内部,其主要依赖于浏览器的实现,很多情况下,他们并不存储在对象容器中,真正存储在对象中的是对象的属性名,他们主要用来作为引用指向他们对应的值的地方。
var myObject = {
a: 2
};
myObject.a; // 2
myObject["a"]; // 2
使用 .
操作符的其名称与使用[""]
的区别是后者可以使用UTF-8/unicode兼容的属性名,如[“Super-Fun!”],而前者则不可以通过.
操作符获得对应的属性值。
对象的属性名都是string类型,我们可以通过变量的值来作为指向对象属性值的地址:
var wantA = true;
var myObject = {
a: 2
};
var idx;
if (wantA) {
idx = "a";
}
// later
console.log( myObject[idx] ); // 2
由于对象的属性名都是sting类型,如果不是string类型,JavaScript首先将其转化为string类型,我们在使用时要注意这一点:
var myObject = { };
myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";
myObject["true"]; // "foo"
myObject["3"]; // "bar"
myObject["[object Object]"]; // "baz"
ES6中我们可以使用myObject[..]这种语法来计算出对象的属性名:
var prefix = "foo";
var myObject = {
[prefix + "bar"]: "hello",
[prefix + "baz"]: "world"
};
myObject["foobar"]; // hello
myObject["foobaz"]; // world
这种计算对象属性名主要是用在Symbol(new primitive data type which has an opaque unguessable value, technically a string value)上,对象中的函数同样也是不属于对象本身,其获取与属性的获取没有什么不同。
对于数组,我们需要注意的是,当我们向数组中添加属性时,如果该属性是数字类型的话,那么将作为数组的元素添加到数组中,而不是像一般的属性添加到数组对象中去:
var myArray = [ "foo", 42, "bar" ];
myArray["3"] = "baz";
myArray["a"]="a";
myArray.length; // 4
myArray[3]; // "baz"
myArray.a; //"a"
对象的Writable,Configurable,Enumerable等属性
ES5中,对象的属性可以通过 property descriptor来进行描述:
var myObject = {
a: 2
};
Object.getOwnPropertyDescriptor( myObject, "a" );
// {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }
对象的属性有三个特征:writable, enumerable, 和configurable,他们的默认值如上例所示。我们可以Object.defineProperty(..)来为对象新添加一个属性,或者修改对象属性(如果是configurable的):
var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: true,
configurable: true,
enumerable: true
} );
myObject.a; // 2
当writable=false,相当于其对象没有setter方法:
var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: false, // not writable!
configurable: true,
enumerable: true
} );
myObject.a = 3;
myObject.a; // 2
如果在strict mode下,则会报错:
"use strict";
var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: false, // not writable!
configurable: true,
enumerable: true
} );
myObject.a = 3; // TypeError
configurable=false是单向操作,不可逆:
var myObject = {
a: 2
};
myObject.a = 3;
myObject.a; // 3
Object.defineProperty( myObject, "a", {
value: 4,
writable: true,
configurable: false, // not configurable!
enumerable: true
} );
myObject.a; // 4
myObject.a = 5;
myObject.a; // 5
Object.defineProperty( myObject, "a", {
value: 6,
writable: true,
configurable: true,
enumerable: true
} ); // TypeError
需要注意的一点是,当configurable=false时,我们可以配置writable的值从true到false,但是不能从false到true。
configurable=false还有一个作用就是阻止我们使用delete操作符删除该属性。
var myObject = {
a: 2
};
myObject.a; // 2
delete myObject.a;
myObject.a; // undefined
Object.defineProperty( myObject, "a", {
value: 2,
writable: true,
configurable: false,
enumerable: true
} );
myObject.a; // 2
delete myObject.a;
myObject.a; // 2
对于enumerable,主要是用来控制for..in循环中是否可显示。
var myObject = { };
Object.defineProperty(
myObject,
"a",
// make `a` enumerable, as normal
{ enumerable: true, value: 2 }
);
Object.defineProperty(
myObject,
"b",
// make `b` NON-enumerable
{ enumerable: false, value: 3 }
);
myObject.b; // 3
("b" in myObject); // true
myObject.hasOwnProperty( "b" ); // true
// .......
for (var k in myObject) {
console.log( k, myObject[k] );
}
// "a" 2
我们可以调用propertyIsEnumerable来判断属性是否可枚举:
var myObject = { };
Object.defineProperty(
myObject,
"a",
// make `a` enumerable, as normal
{ enumerable: true, value: 2 }
);
Object.defineProperty(
myObject,
"b",
// make `b` non-enumerable
{ enumerable: false, value: 3 }
);
myObject.propertyIsEnumerable( "a" ); // true
myObject.propertyIsEnumerable( "b" ); // false
Object.keys( myObject ); // ["a"]
Object.getOwnPropertyNames( myObject ); // ["a", "b"]
in 和 hasOwnProperty(..)的区别在于是否往上追溯[[Prototype]]链。
Object.keys(..) 和Object.getOwnPropertyNames(..)都只寻找该对象中的属性,不追溯[[Prototype]]链。
如果我们配置对象的属性为writable:false ,configurable:false,那么该属性不能被重新定义,不能改变,也不能delete。
var myObject = {};
Object.defineProperty( myObject, "FAVORITE_NUMBER", {
value: 42,
writable: false,
configurable: false
} );
delete myObject.FAVORITE_NUMBER;
console.log(myObject.FAVORITE_NUMBER);//42
如果我们防止继续往对象中添加新属性,使用preventExtensions即可:
var myObject = {
a: 2
};
Object.preventExtensions( myObject );
myObject.b = 3;
myObject.b; // undefined
如果在strict mode下,会报TypeError错。
如果我们让对象不仅不能添加新的属性,而且还不能修改原来对象的属性,使用Seal即可,其首先调用preventExtensions(),然后再将对象属性配置为configurable:false。
freeze()是最高级别的让对象中的属性不可变,其先调用seal()方法,再将其属性的writable置为false。
注意一点,preventExtensions,Seal,Freeze都不会影响其对象中引用对象中属性的writable,configurable,enumerable的值。
[[Get]]和[[Put]]
var myObject = {
a: 2
};
myObject.a; // 2
上例中myObject.a,其能够获取到值实际上是执行了[[Get]]
操作,[[Get]]
首先检查对象是否有a属性,如果有,那么将其对应的值返回。如果没有找到,则去对象的[[Prototype]]去寻找,直到Object,如果还没有找到,则返回undefined。
var myObject = {
a: undefined
};
myObject.a; // undefined
myObject.b; // undefined
针对上述情况,我们没有办法区分对象中是否含有a属性或b属性。那么我们可以调用hasOwnProperty来判断是否含有该属性:
var myObject = {
a: 2
};
("a" in myObject); // true
("b" in myObject); // false
myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false
in操作符检查该对象中或者[[Prototype]]链上是否含有该属性,而hasOwnProperty(Object中的方法)只检查该对象上是否含有钙属性,不向上追溯。
如果我们创建的对象不继承自Object(如Object.create(null)),那么调用hasOwnProperty()会报错,我们可以通过Object.prototype.hasOwnProperty.call(myObject,”a”)来调用hasOwnProperty方法。
注意一点,in是检查属性名是否存在于对象中,并不检查属性值是否在对象中。
4 in [2, 4, 6]//false
对于[[Put]],如果该对象有该属性,则
1.如果对象中含有accessor descriptor(即下文的Getters & Setters),调用该setter
2.对象的data descriptor中的writable是否为false,如果是,那么在non-strict mode下修改失败,不报错,在strict mode下报TypeError 。
3.其余情况下,则做正常修改。
如果对象没有该属性,情况会更复杂。
accessor descriptor:Getters & Setters
我们使用Getters & Setters可以覆盖对象属性默认的[[Put]] 和[[Get]]操作,当我们定义了对象属性的Getters & Setters时,则该属性的value 和writable失效。
var myObject = {
// define a getter for `a`
get a() {
return 2;
}
};
Object.defineProperty(
myObject, // target
"b", // property name
{ // descriptor
// define a getter for `b`
get: function(){ return this.a * 2 },
// make sure `b` shows up as an object property
enumerable: true
}
);
myObject.a; // 2
myObject.b; // 4
上例中我们在对象上创建了两个属性,但是并没有定义其value,但是返回了我们定义的getter中的值。
var myObject = {
// define a getter for `a`
get a() {
return 2;
}
};
myObject.a = 3;
myObject.a; // 2
我们硬编码将a的返回值设置为2,故其默认[[Put]]操作无效,一般情况下我们都要设置其getter和setter方法:
var myObject = {
// define a getter for `a`
get a() {
return this._a_;
},
// define a setter for `a`
set a(val) {
this._a_ = val * 2;
}
};
myObject.a = 2;
myObject.a; // 4