深入理解javascript对象系列第一篇——初识对象

×
目录
[1]定义 [2]创建 [3]组成[4]引用

前面的话

　　javascript中的难点是函数、对象和继承，前面已经介绍过函数系列。从本系列开始介绍对象部分，本文是该系列的第一篇——初识对象

对象定义

　　javascript的基本数据类型包括undefined、null、boolean、string、number和object。对象和其他基本类型值不同的是，对象是一种复合值：它将许多值(原始值或者其他对象)聚合在一起，可通过名字访问这些值

　　于是，对象也可看做是属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射

　　关于复合值和原始值的详细区别移步至此

对象创建

　　有以下三种方式来创建对象，包括new构造函数、对象直接量和Object.create()函数

【1】new构造函数

　　使用new操作符后跟Object构造函数用以初始化一个新创建的对象

var person = new Object();
//如果不给构造函数传递参数可以不加括号 var person = new Object;
person.name = 'bai';
person.age = 29;

//创建无属性的空对象
var cody1 = new Object();
var cody2 = new Object(undefined);
var cody3 = new Object(null);
console.log(typeof cody1,typeof cody2, typeof cody3);//object object object

　　如果该参数是一个对象，则直接返回这个对象　

var o1 = {a: 1};
var o2 = new Object(o1);
console.log(o1 === o2);// true

var f1 = function(){};
var f2 = new Object(f1);
console.log(f1 === f2);// true

　　如果是一个原始类型的值，则返回该值对应的包装对象

//String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
console.log(new Object('foo'));

//Number {[[PrimitiveValue]]: 1}
console.log(new Object(1));

//Boolean {[[PrimitiveValue]]: true}
console.log(new Object(true));

【2】对象字面量

　　javascript提供了叫做字面量的快捷方式，用于创建大多数原生对象值。使用字面量只是隐藏了与使用new 操作符相同的基本过程，于是也可以叫做语法糖

　　对象字面量是由若干名/值对组成的映射表，名/值对中间用冒号分隔，整个映射表用花括号括起来

　　不同属性之间用逗号分隔，属性名可以是任意字符串，属性值可以是任意类型表达式，表达式的值是属性值

//等价于var person = new Object();
var person = {};

var person = {
name : 'bai',
age : 29,
5 : true
};

　　使用对象字面量的方法来定义对象，属性名会自动转换成字符串

//同上
var person = {
'name' : 'bai',
'age' : 29,
'5' : true
};

　　[注意]一般地，对象字面量的最后一个属性后的逗号将忽略，但在IE7-浏览器中导致错误

//IE7-浏览器中报错 SCRIPT1028: 缺少标识符、字符串或数字
var person = {
name : 'bai',
age : 29,
5 : true,
};

【3】Object.create()

　　ES5定义了一个名为Object.create()的方法，它创建一个新对象，第一个参数就是这个对象的原型，第二个可选参数用以对对象的属性进行进一步描述

var o1 = Object.create({x:1,y:1}); //o1继承了属性x和y
console.log(o1.x);//1

　　可以通过传入参数null来创建一个没有原型的新对象，但通过这种方式创建的对象不会继承任何东西，甚至不包括基础方法。比如toString()和valueOf()

var o2 = Object.create(null); // o2不继承任何属性和方法
var o1 = {};
console.log(Number(o1));//NaN
console.log(Number(o2));//Uncaught TypeError: Cannot convert object to primitive value

　　如果想创建一个普通的空对象(比如通过{}或new Object()创建的对象)，需要传入Object.prototype

var o3 = Object.create(Object.prototype); // o3和{}和new Object()一样
var o1 = {};
console.log(Number(o1));//NaN
console.log(Number(o3));//NaN

对象组成

　　对象是属性的无序集合，由键名和属性值组成

【键名】

　　对象的所有键名都是字符串，所以加不加引号都可以，如果不是字符串也会自动转换成字符串

var o = {
'p': 'Hello World'
};
var o = {
p: 'Hello World'
};

var o ={
1: 'a',
3.2: 'b',
1e2: true,
1e-2: true,
.234: true,
0xFF: true,
};
//Object {1: "a", 100: true, 255: true, 3.2: "b", 0.01: true, 0.234: true}
o;

　　[注意]如果键名不符合标识符命名规则，则必须加上引号，否则会报错

//Uncaught SyntaxError: Unexpected identifier
var o = {
1p: 123
}

var o = {
'1p': 123
}

【属性值】

　　属性值可以是任何类型的表达式，最终表达式的结果就是属性值的结果

var o ={
a: 1+2
}
console.log(o.a);//3

　　如果属性值为函数，则通常把这个属性称为“方法”

var o = {
p: function (x) {
return 2 * x;
}
};
o.p(1);//2

　　由于对象的方法就是函数，因此也有name属性。方法的name属性返回紧跟在function关键字后面的函数名。如果是匿名函数，ES5环境会返回undefined，ES6环境会返回方法名

var obj = {
m1: function f() {},
m2: function () {}
};
obj.m1.name // "f"
obj.m2.name //ES5： undefined
obj.m2.name //ES6： "m2"

引用对象

　　如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量

var o1 = {};
var o2 = o1;

o1.a = 1;
console.log(o2.a);// 1
o2.b = 2;
console.log(o1.b);// 2

　　如果取消某一个变量对于原对象的引用，不会影响到另一个变量

var o1 = {};
var o2 = o1;

o1 = 1;
console.log(o2);//{}

参考资料

【1】 W3School-Javascript高级教程——引用类型 http://www.w3school.com.cn/js/pro_js_referencetypes.asp
【2】 阮一峰Javascript标准参考教程——对象 http://javascript.ruanyifeng.com/grammar/object.html
【3】《javascript权威指南(第6版)》第6章 对象
【4】《javascript高级程序设计(第3版)》第5章 引用类型
【5】《javascript语句精粹》第3章 对象
【6】《javascript面向对象精要》 第3章 理解对象
【7】《你不知道的javascript上卷》第3章 对象

// var all = document.getElementById('cnblogs_post_body').children;
var select = [];

for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}

}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}

}
oCon.children[i].onclick = function(){
change(this);
}
}

function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>