JavaScript的对象详解

佚名 6年前 (2019-04-14) 随笔 1113人围观抢沙发百度已收录

JavaScript对象的概述

什么是对象，对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。而对象的值就是引用类型的实例。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

在javaScript 中引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称做为类，但 javaScript 中却没有这种东西（模拟）。

虽然 javaScript 是一门面向对象的语言，却不具备传统面向对象语言所支持的类和接口等基本结构。

在应用程序中的存储和传输数据而言，它是非常理想的选择。

JavaScript对象的分类

内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用。比如：Math String Number Boolean Function Object....

宿主对象： 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象，比如 BOM DOM

自定义对象：由开发人员自己创建的对象

javaScript对象的创建方法—使用new运算符创建对象

使用new关键字调用的函数，是构造函数constructor。构造函数是专门用来创建对象的函数

使用typeof检查一个对象时，会返回object

function objrun(){
   return '123';
}

var box = new Object();        //创建了一个对象
alert(typeof box);            //object类型  即对象    
   
//创建对象的属性字段
box.name = '李炎恢';             
box.age = 28;
box.run = objrun(); 
alert("我的名字叫"+box.name+",我今年"+box.age+"岁了..........."); //获取对象的属性字段，如果读取对象中没有的属性，不会报错而是会返回undefined
alert(box.run);//调用对象中的方法

new 关键字可以省略

var box = Object(); //省略了 new 关键字
    
box.name = '黄家艾';
box.age = 43;

alert("我的名字叫"+box.name+",我今年"+box.age+"岁了...........");

javaScript对象的创建方法—使用字面量表示法

var box = {
    name : '李炎恢', //创建属性字段
    age : 28,
    run : function () { //对象中的方法
        return '运行';
    }
};
alert("我的名字叫"+box.name+",我今年"+box.age+"岁了..........."); 
alert(box.run()) ;//调用对象中的方法

属性字段也可以使用字符串形式，如果要使用一些特殊的名字，则必须加引号

var box = {
    'name' : '李炎恢', //创建属性字段
    'age' : 28
};
box.name = 'tom' // 修改对象的属性值,语法：对象.属性名 = 新值
alert("我的名字叫"+box.name+",我今年"+box.age+"岁了...........");

创建对象的时候使用字面量方式创建，但可以在给对象创建字段的时候使用传统方式

var box = {};     //字面量方式声明空的对象
    
box.name = '李炎恢'; //传统方式给对象创建字段属性
box.age = 28;

//属性的输出方式有两种
alert (box.age); //点表示法输出
alert("我的名字叫"+box['name']+",我今年"+box['age']+"岁了...........");//中括号表示法输出，注意需要加上引号

javaScript对象的创建方法—显示的构造函数来创建对象

任何一个函数只要被new运算符使用了，那么这个函数就可以变成构造函数

var M = function(){
  this.name = "o2";  
}
var o2 = new M();
alert(o2.name);

javaScript对象的创建方法—Object.create()

var p = {
    name:"o3"
};
var o3 = Object.create(p)
alert(o3.name);

将对象作为函数的参数传递

在实际开发过程中，一般我们更加喜欢字面量的声明方式。因为它清晰，语法代码少，而且还给人一种封装的感觉。字面量也是向函数传递大量可选参数的首选方式。

　　function box(obj) { //参数是一个对象
　　　　if (obj.name != undefined) 
　　　　　　alert(obj.name); //判断属性是否存在
　　　　if (obj.age != undefined) 
　　　　　　alert(obj.age);
　　}
　　var obj={
　　　　name : '李炎恢',
　　　　age : 28
　　}
　　box(obj);

使用 delete 删除对象属性

    var box = {
　　　　name = '东方卡';
　　}
　　alert(box.name);
　　delete box.name;
　　alert(box.name);//已被删除，undefined

操作特殊属性的方式

如果要使用特殊的属性名，不能采用.的方式来操作，需要使用另一种方式：语法：对象["属性名"] = 属性值

读取时也需要采用这种方式。使用[]这种形式去操作属性，更加的灵活。在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

var obj = new Object();
obj.name = "孙悟空";

obj["123"] = 789;
var n = "nihao";
obj[n] = "你好";
console.log(obj["123"]); // 读取对象中属性名为"123"的属性值：789
console.log(obj[n]); // 读取对象中属性名为"nihao"的属性值：你好

对象的属性值

JS对象的属性值，可以是任意的数据类型

var obj = new Object();

obj.test1 = true;
obj.test2 = null;
obj.test3 = undefined;

console.log(obj.test1) // true
console.log(obj.test2) // null
console.log(obj.test3) // undefined

甚至也可以是一个对象

var obj1 = new Object();

var obj2 = new Object();
obj2.name = "猪八戒";
obj1.test = obj2; // 将obj2设置为obj的属性

console.log(obj1.test); // { name: '猪八戒' }
console.log(obj1.test.name); // 猪八戒

in 运算符

通过该运算符可以检查一个对象中是否含有指定的属性，如果有则返回true，没有则返回false

语法："属性名" in 对象

var obj = new Object();
obj.name = "猪八戒";

console.log(obj.name); // // 猪八戒
console.log(obj.age); // undefined，一个对象的某个属性的属性值为undefined，有可能是没有这个属性，也有可能是这个属性的属性值就是undefined

var obj = new Object();
obj.name = "猪八戒";

console.log(obj.name); // // 猪八戒
console.log(obj.age); // undefined

console.log("name" in obj); // 检查obj中是否含有name属性:true
console.log("age" in obj); // // 检查obj中是否含有age属性:false

枚举对象中的属性

使用for ... in 语句，语法：for(var 变量 in 对象){}

for...in语句对象中有几个属性，循环体就会执行几次,每次执行时，会将对象中的一个属性的名字赋值给变量

var obj = {
  name:"孙悟空",
  age:18,
  gender:"男",
  address:"花果山"
};

for(var n in obj){
  console.log(n + ":" + obj[n]);
}

基本数据类型和引用数据类型的区别

基本数据类型：String Number Boolean Null Undefined

引用数据类型：Object

JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量

var a = 123;
var b = a;
a++;

console.log("a = "+a); // a = 124
console.log("b = "+b); // b = 123

var c = 10;
var d = 10;
console.log(c == d); // true，当比较两个基本数据类型的值时，就是比较值
console.log(c === d); // true

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间

而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响

var obj1 = new Object();
obj1.name = "孙悟空";
var obj2 = obj1; // 讲obj1的引用赋值给obj2变量，obj2变量和obj1指向同一个对象
obj1.name = "猪八戒"; // 修改obj的name属性

console.log(obj1.name); // 猪八戒
console.log(obj2.name); // 猪八戒

obj2 = null; //设置obj2为null,也就是将obj2变量指向了null对象

console.log(obj1); // { name: '猪八戒' }
console.log(obj2); // null

var obj1 = new Object();
var obj2 = new Object();

obj1.name = "沙和尚";
obj2.name = "沙和尚";

console.log(obj1); // { name: '沙和尚' }
console.log(obj2); // { name: '沙和尚' }

// 比较两个引用数据类型时，它是比较的对象的内存地址,如果两个对象是一摸一样的，但是地址不同，它也会返回false
console.log(obj1 == obj2) // false
console.log(obj1 === obj2) // false