JavaScript 对象详解

JavaScript对象的概述

什么是对象，代表现实中的某个事物, 是该事物在编程中的抽象，多个数据的集合体(封装体)，用于保存多个数据的容器

为什么要用对象，便于对多个数据进行统一管理

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

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

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

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

 

 

对象的组成

属性：代表现实事物的状态数据，由属性名和属性值组成，属性名都是字符串类型, 属性值是任意类型

方法：代表现实事物的行为数据，是特别的属性==>属性值是函数

 

 

JavaScript对象的分类

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

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

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

 

 

对象创建方式-new运算符创建对象

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

适用场景: 起始时不确定对象内部数据

问题: 语句太多

function objrun(){
  return '123';
}

var box = new Object();//创建了一个对象
console.log(typeof box); //object类型  即对象

//创建对象的属性字段
box.name = '李炎恢';
box.age = 28;
box.run = objrun();
//获取对象的属性字段，如果读取对象中没有的属性，不会报错而是会返回undefined
// 获取属性的两种方式：对象.属性名，对象['属性名']
console.log("我的名字叫"+box.name+",我今年"+box['age']+"岁了...........");
console.log(box.run);//调用对象中的方法

new 关键字可以省略

var box = Object(); //省略了 new 关键字

box.name = '黄家艾';
box.age = 43;

console.log("我的名字叫"+box.name+",我今年"+box['age']+"岁了...........");

 

 

对象创建方式-使用字面量表示法

适用场景: 起始时对象内部数据是确定的

问题: 如果创建多个对象, 有重复代码

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

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

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

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

var box = {};     //字面量方式声明空的对象

box.name = '李炎恢'; //传统方式给对象创建字段属性
box.age = 28;

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

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

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

 

 

对象创建方式-显示的构造函数来创建对象

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

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

 

 

对象创建方式-Object.create()

var p = {
  name:"o3"
};
var o3 = Object.create(p)
console.log(o3.name); // o3

 

 

使用 delete 删除对象属性

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

 

 

操作特殊属性的方式

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

读取时也需要采用这种方式。使用[]这种形式去操作属性，更加的灵活。

在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

什么时候必须使用['属性名']的方式：属性名不是合法的标识名，属性名（比如属性名是一个变量）不确定

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

obj["user-name"] = 789;
var n = "ter-name";
obj[n] = "李老师";
console.log(obj["user-name"]); // 读取对象中属性名为"user-name"的属性值：789
console.log(obj[n]); // 读取对象中属性名为"ter-name"的属性值：李老师

 

 

对象的属性值

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]);
}

 

 

ES6中对象的扩展

简化的对象写法

省略同名的属性值，省略方法的function

let x = 1;
let y = 2;
let point = {
  x,
  y,
  setX (x) {
    this.x = x
  }
};
console.log(point)

Object.create(prototype, [descriptors])

以指定对象（prototype）为原型创建新的对象，为新的对象指定新的属性, 并对属性进行描述（descriptors）

• value : 指定值
• writable : 标识当前属性值是否是可修改的, 默认为false
• configurable: 标识当前属性是否可以被删除 默认为false
• enumerable： 标识当前属性是否能用for in 枚举 默认为false

var obj1 = {
  name: 'huang',
  age: 13
}
var obj2 = {}
obj2 = Object.create(obj1, {
  sex: {
    value: '男',
    writable: true
  }
});
console.log(obj2)
console.log(obj1)

// 以obj1为原型创建的对象obj2，是不能继承obj1对象下的属性的，在obj2中作为原型存在
// 可以获取到并且可以修改
console.log(obj2.name) // huang
obj2.name = 'liu'
console.log(obj2.name) // liu

// 新增的属性，进行操作的时候要看创建的时候是怎么描述的，可不可以修改，删除等
console.log(obj2.sex) // 男
delete obj2.sex // 运行结果没有删掉，是因为创建这个属性的时候默认是不可以删除的

Object.defineProperties(object, descriptors)

为指定对象定义扩展多个属性

get ：用来获取当前属性值得回调函数（当获取扩展属性的时候会自动调用）

set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值

存取器属性：setter,getter一个用来存值，一个用来取值

var obj = {
  firstName: 'kobi',
  lastName: 'bulanen'
}

Object.defineProperties(obj, {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (data) { // 监听扩展属性，当扩展属性发生变化的时候会自动调用，自动调用的时候会将变化的值作为实际参数注入到set函数中
      var names = data.split(' ')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  }
})

console.log(obj)
console.log(obj.fullName) //kobi bulanen
obj.firstName = 'tim' // 原来的属性可以这样修改
obj.lastName = 'can' // 扩展的属性也可以这样修改，但是这个属性扩展的时候必须要有set方法
console.log(obj.fullName) //tim can

对象本身其实也有这个get和set方法

对象本身的两个方法

• get propertyName(){} 用来得到当前属性值的回调函数
• set propertyName(){} 用来监视当前属性值变化的回调函数

var obj = {
  firstName: 'kobi',
  lastName: 'bulanen',
  get fullName() {
    return this.firstName + ' ' + this.lastName
  },
  set fullName(data) {
    var names = data.split(' ')
    this.firstName = names[0]
    this.lastName = names[1]
  }
}
console.log(obj.fullName) //kobi bulanen

obj.fullName = 'tim can' // 当对象没有set方法的时候是修改不成功的

console.log(obj.fullName) // tim can

Object.is(v1, v2)

判断2个数据是否完全相等

let Obj1 = {
  name: 'huang'
}
let Obj2 = {
  name: 'huang'
}
console.log(0 == -0) // true
console.log(NaN == NaN) // false NaN跟任何数据都不相等
console.log(NaN === NaN) // false NaN跟任何数据都不相等
console.log(Object.is(0, -0)) // false
console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(Obj1, Obj2)) // false

Object.assign(target, source1, source2..)

将源对象的属性复制到目标对象上

let Obj1 = {
  name: 'huang'
}
let Obj2 = {
  name: 'liu'
}
let Obj3 = {}

// 第一个是目标对象，第二个开始就要复制属性的对象
// 如果复制的属性有重复的情况，那么结果是最后一个对象的属性
Object.assign(Obj3, Obj1, Obj2)

console.log(Obj3) // {name: "liu"}

直接操作 __proto__ 属性

let Obj1 = {
  moneny: 30000
}
let Obj2 = {}

Obj2.__proto__ = Obj1 // 表示的是obj1是obj2的原型

console.log(Obj2) //他还是个空对象，但是会有obj1的原型
console.log(Obj2.moneny) // 能够获取到obj1原型下的moneny属性的值