Javascript面向对象基础一-优快云博客

本文深入浅出地介绍了JavaScript中的面向对象编程技术，包括对象、数组、函数、类、构造函数和原型等内容。通过实例演示了如何创建和使用对象，以及JavaScript对象的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Js 代码：

varemptyObject1={};// 创建空对象

varemptyObject2=newObject();// 创建空对象

varperson={"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 代码

varperson={};

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 代码

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

varnamestring="";

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

namestring+=name[props];

}

alert(namestring);//NAME1NAME2NAME3NAME4

namestring="";

for(vari=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 代码

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

varnamestring="";

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

namestring+=name[props];

}

alert(namestring);//NAME1NAME2NAME3NAME4

deletename.name1;// 删除name1 属性

deletename["name3"];// 删除name3 属性

namestring="";

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

namestring+=name[props];

}

alert(namestring);//NAME2NAME4

alert("name1"inname);//false

alert("name4"inname);//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 代码

vardate=newDate();

alert(date.constructor);//Date

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

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