Javascript面向对象基础一

看了很多介绍javascript 面向对象技术的文章, 很晕. 为什么? 不是因为写得不好, 而是因为太深奥.javascript 中的对象还没解释清楚怎么回事, 一上来就直奔主题, 类/ 继承/ 原型/ 私有变量....
结果呢, 看了大半天, 有了一个大概的了解, 细细一回味, 好像什么都没懂...
这篇文章是参考<<javascript-the definitive guide,5th edition>> 第7,8,9 章而写成的, 我会尽量按照原书的结构来说明javascript 的面向对象技术( 对象/ 数组-> 函数--> 类/ 构造函数/ 原型).
-------------------------------------------------
对象和数组(Objects and Arrays)
什么是对象? 把一些" 名字- 属性" 的组合放在一个单元里面, 就组成了一个对象. 我们可以理解为javascript 中的对象就是一些" 键- 值" 对的集合。" 名字" 只能是string 类型, 不能是其他类型, 而属性的类型则是任意的( 数字/ 字符串/ 其他对象..). 可以用new Object() 来创建一个空对象, 也可以简单的用"{}" 来创建一个
空对象, 这两者的作用是等同的.

Js 代码 ：

var emptyObject1 = {};           // 创建空对象  

var emptyObject2 = new Object(); // 创建空对象  

var person = {"name":"sdcyst",  

          "age":18,  

          "sex":"male"};     // 创建一个包含初始值的对象person  

alert(person.name);              //sdcyst  

alert(person["age"]);            //18  

var emptyObject1 = {};          // 创建空对象

var emptyObject2 = new Object(); // 创建空对象

var person = {"name":"sdcyst",

      "age":18,

      "sex":"male"};     // 创建一个包含初始值的对象person

alert(person.name);              //sdcyst

alert(person["age"]);            //18

  从上面的例子我们也可以看到，访问一个对象的属性，可以简单的用对象名加"." 后加属性的名字，也可以用"[]" 操作符来获取, 此时在[] 里面的属性名字要加引号, 这是因为对象中的索引都是字符串类型的.javasript 对象中属性的个数是可变的, 在创建了一个对象之后可以随时对它赋予任何的属性.

Js 代码

var person = {};  

person.name = "sdcyst";  

person["age"] = 18; 

alert(person.name + "__" + person.age); //sdcyst__18  

var _person = {name:"balala","age":23}; // 在构建一个对象时, 属性的名字可以不用引号来标注(name),  

      // 但是仍旧是一个字符串类型. 在访问的时候[] 内仍旧需要引号  

alert(_person["name"] + "__" + person.age); //balala__23  

alert(_person[name]);                   //undefinied 

var person = {};

person.name = "sdcyst";

person["age"] = 18;

alert(person.name + "__" + person.age); //sdcyst__18

 

var _person = {name:"balala","age":23}; // 在构建一个对象时, 属性的名字可以不用引号来标注(name),

     // 但是仍旧是一个字符串类型. 在访问的时候[] 内仍旧需要引号

alert(_person["name"] + "__" + person.age); //balala__23

alert(_person[name]);                   //undefinied

  通过"." 操作符获取对象的属性, 必须得知道属性的名字. 一般来说"[]" 操作符获取对象属性的功能更强大一些,
可以在[] 中放入一些表达式来取属性的值，
比如可以用在循环控制语句中, 而"." 操作符则没有这种灵活性。

Js 代码

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};  

var namestring = "";  

for(var props in name) {  // 循环name 对象中的属性名字  

    namestring += name[props]; 

}  

alert(namestring);  //NAME1NAME2NAME3NAME4  

namestring = "";  

for(var i=0; i<4; i++) {  

    namestring += name["name"+(i+1)]; 

}  

alert(namestring);  //NAME1NAME2NAME3NAME4  

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};

var namestring = "";

for(var props in name) {  // 循环name 对象中的属性名字

    namestring += name[props];

}

alert(namestring);  //NAME1NAME2NAME3NAME4

 

namestring = "";

for(var i=0; i<4; i++) {

    namestring += name["name"+(i+1)];

}

alert(namestring);  //NAME1NAME2NAME3NAME4

 delete 操作符可以删除对象中的某个属性, 判断某个属性是否存在可以使用"in" 操作符.

Js 代码

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};  

var namestring = "";

for(var props in name) {  // 循环name 对象中的属性名字

    namestring += name[props];  

}  

alert(namestring);  //NAME1NAME2NAME3NAME4  

delete name.name1;  // 删除name1 属性  

delete name["name3"];  // 删除name3 属性  

namestring = "";  

for(var props in name) {  // 循环name 对象中的属性名字

   namestring += name[props];  

}  

alert(namestring);  //NAME2NAME4

alert("name1" in name); //false  

alert("name4" in name); //true  

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};

var namestring = "";

for(var props in name) {  // 循环name 对象中的属性名字

    namestring += name[props];

}

alert(namestring);  //NAME1NAME2NAME3NAME4

 

delete name.name1;  // 删除name1 属性

delete name["name3"];  // 删除name3 属性

namestring = "";

for(var props in name) {  // 循环name 对象中的属性名字

    namestring += name[props];

}

alert(namestring);  //NAME2NAME4

 

alert("name1" in name); //false

alert("name4" in name); //true

  需要注意, 对象中的属性是没有顺序的.
对象的constructor 属性
每一个javascript 对象都有一个constructor 属性. 这个属性对应了对象初始化时的构造函数( 函数也是对象).

Js 代码

var date = new Date();  

alert(date.constructor);  //Date  

alert(date.constructor == "Date");  //false  

alert(date.constructor == Date);  //true