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属性的值