对象
对象的概念
- 所谓对象就是是一个拥有属性和方法的集合体
对象的分类
-
内置对象/原生对象:
- 引用类型可以称作为内置对象
-
宿主对象:
- 就是寄生在一个东西上的对象比如浏览器提供的对象
- 比如：DOM、BOM
-
自定义对象
- 开发人员创建的对象
-
Object对象是什么
- object类型是所有JavaScript类型的父级
创建对象
对象的初始化器创建方式
var 对象名 = {
属性名 : 属性值,
方法名 : function(){
方法体
}
}- 注意: 如果存在多个属性名的话中间用 " , "隔开
示例代码:
var obj1 = {
name : '一花一世界',
name1 : '一叶一孤城',
soso : function () {
console.log('你是哈士奇')
}
};对象的构造函数方式
-
利用所有引用类型常见对应的对象 - 就是具有具体的类型
- var num = new Number();// Number类型
- var str = new String();// String类型
- var boo = new Boolean();// Boolean类型
-
利用Object作为构造函数创建对象
- var 对象名 = new Object();
- var 对象名 = Object();
示例代码:
var num = new Number();// Number类型
var num2 = Number();
var str = new String();// String类型
var boo = new Boolean();// Boolean类型
var obj2 = new Object();
var obj3 = Object();
console.log(obj2);// {}// 调用结果为 { }
console.log(obj3);// {}// 调用结果为 { }
var obj4 = new Object(undefined);
var obj5 = new Object(null);
console.log(obj4);// 调用结果为 { }
console.log(obj5);// 调用结果为 { }利用Object.create()方法创建对象
- var 对象名 = Object.create(null) - 就是创建一个空对象
-
var 对象名 = Object.create(obj)
- obj - 表示另一个对象
- 特点 - 当前创建的新对象拥有与obj对象相同的属性和方法
示例代码:
var obj6 = Object.create(null);
var obj7 = Object.create(obj1);
console.log(obj6);// 调用结果为 { }
console.log(obj7);// 调用结果为 { }创建空对象
-
创建空对象的方式目前有以下几种
- var obj1 = {};
- var obj2 = new Object();
- var obj3 = Object();
- var obj4 = new Object(undefined);
- var obj5 = new Object(null);
- var obj6 = Object(undefined);
- var obj7 = Object(null);
- var obj8 = Object.create(null);
创建方式的对比
-
Number,String和Boolean
- 字面量方式创建的是原始类型,构造函数方式创建是引用类型
-
Array和Object
- 无论是字面量方式还是构造函数方式创建的都是引用类型
示例代码:
// 1. Number类型
var num1 = 100;// 字面量方式
var num2 = new Number();// 构造函数方式
// 2. String类型
var str1 = '一花一世界';// 字面量方式
var str2 = new String();//构造函数方式
// 3.Boolean类型
var boo1 = true;// 字面量方式
var boo2 = new Boolean();// 构造函数方式
// 4.Array类型
var arr1 = [];
var arr2 = new Array();
// 5.Object类型
var obj1 = {};
var obj2 = new Object();变量与对象
示例代码:
/* 变量声明并初始化值 */
var obj = 100;
/* 输出调用 */
console.log(obj);// 调用结果为 100
/* 变量重新赋值为对象 */
obj = {
/* 对象的属性 */
name : '一花一世界',
/* 对象的方法 */
soso : function () {
/* 方法体 */
console.log('一叶一孤城');
}
};
/* 输出调用 */
console.log(obj);// 调用结果为 { name: '一花一世界', soso: [Function: soso] }变量,函数与对象
- 注意: 如果访问一个对象不存在的属性时 - 值为 undefined
示例代码:
var obj = {
neme : '一花一世界',
'Type-Content' : 'text/HTML',
sayMe : function () {
console.log('一叶一孤城');
}
};
console.log(obj.soso);// 调用结果为 undefined-
创建一个对象 - 具有name和age属性与sayMe()方法
- 对象的属性 - 类似于变量
- 对象的属性 - 类似于变量
- 其实定义的变量就是某个对象的属性,定义的函数就是某个对象的方法
-
JavaScript找那个具有一个全局对象(Global) - 仅存在与概念
- 浏览器运行环境 - BOM中Window(窗口)对象
- Node.js运行环境
示例代码:
var obj1 = {
name : '一花一世界',
age : '有点飘',
sayMe : function () {
console.log('一叶一孤城');
}
};
console.log(Object);// 调用结果为 [Function: Object]
console.log(Global);// 调用结果为报错 - ReferenceError: Global is not defined控制台调用图:
调用对象的属性方式
对象名.属性名 - 名称简单的调用方式
- 注意: 不适合用于复杂命名的属性名称
示例代码:
var obj = {
neme : '一花一世界',
'Type-Content' : 'text/HTML',
sayMe : function () {
console.log('一叶一孤城');
}
};
console.log(obj.neme);// 调用结果为 一花一世界控制台调用图:
对象名称[属性名] - 通用的调用方式
- 适用于复杂命名的属性名称
- 特点: 该种方式比较通用
示例代码:
var obj = {
neme : '一花一世界',
'Type-Content' : 'text/HTML',
sayMe : function () {
console.log('一叶一孤城');
}
};
console.log(obj.neme);// 调用结果为 一花一世界
console.log(obj['Type-Content']);// 调用结果为 text/HTML控制台调用图:
修改对象的属性
对象名.已存在的属性名 = 属性值
示例代码:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
obj.name = '一叶一孤城';
console.log(obj);// 调用结果为 { name: '一叶一孤城', sayMe: [Function: sayMe] }对象名[已存在的属性名] = 属性值
示例代码:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
obj['name']
console.log(obj);// 调用结果为 { name: '一叶一孤城', sayMe: [Function: sayMe] }删除对象的属性
delete 对象名.属性名
示例代码:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
delete obj.name;
console.log(obj.name);//调用结果为 undefineddelete 对象名[属性名]
示例代码:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
delete obj['name'];
console.log(obj.name);//调用结果为 undefined检测对象的属性
判断对象的属性值是否为 undefined
示例代码:
var obj = {
name : '张无忌',
age : 18
}
if (obj.age !== undefined) {
console.log('obj对象的age属性存在...');
} else {
console.log('请先定义obj对象的age属性...');
}判断对象的属性值 - 先转换为Boolean类型
示例代码:
var obj = {
name : '张无忌',
age : 18
}
if (obj.age) {
console.log('obj对象的age属性存在...');
}利用in关键字进行判断
示例代码:
var obj = {
name : '张无忌',
age : 18
}
if ('age' in obj) {
console.log('obj对象的age属性存在...');
} else {
console.log('obj对象的age属性不存在...')
}Object类型提供了hasOwnProperty()方法
示例代码:
var obj = {
name : '张无忌',
age : 18
}
if (obj.hasOwnProperty('age')) {
console.log('obj对象的age属性存在...');
} else {
console.log('obj对象的age属性不存在...')
}遍历对象的属性
示例代码:
var obj = {
name : '一花一世界',
age : 18,
sayMe : function(){
console.log('一花一世界');
}
}
// 1.for...in语句
for (var objAttr in obj) {
// 通过对象属性或方法对应的值的类型进行区别
if (obj[objAttr] instanceof Function) {
// 当前是对象的方法
obj[objAttr]();
} else {
// 当前是对象的属性
console.log(obj[objAttr]);
}
}
// 2.Object类型提供了keys()方法 - 只能遍历可枚举的属性
var arr = Object.keys(obj);
for (var v in arr) {
var objAttr = arr[v];
// 通过对象属性或方法对应的值的类型进行区别
if (obj[objAttr] instanceof Function) {
// 当前是对象的方法
obj[objAttr]();
} else {
// 当前是对象的属性
console.log(obj[objAttr]);
}
}
// 3.Object类型提供了getOwnPropertyNames()方法 - 包括不可枚举的属性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
var objAttr = arr[v];
// 通过对象属性或方法对应的值的类型进行区别
if (obj[objAttr] instanceof Function) {
// 当前是对象的方法
obj[objAttr]();
} else {
// 当前是对象的属性
console.log(obj[objAttr]);
}
}调用对象的方法
- 对象名.方法名()
- 对象名[方法名]()
示例代码:
var obj = {
name : '一花一世界',
age : 18,
sayMe : function(){
console.log('一花一世界');
}
}
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj['sayMe']();新增对象的方法
- 注意: 和新增对象的属性方法类似
示例代码:
var obj = {
name : '一花一世界',
age : 18,
sayMe : function(){
console.log('我是风儿');
}
}
// 1.对象名.新的方法名 = function(){}
obj.sayYou = function(){
console.log('你是沙');
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}修改对象的方法
- 注意: 和修改对象属性的方法类似
示例代码:
var obj = {
name : '一花一世界',
age : 18,
sayMe : function(){
console.log('我是风儿');
}
}
// 1.对象名.方法名 = function(){}
obj.sayMe = function(){
console.log('你是沙');
}
console.log(obj);
obj.sayMe();
// 2.对象名[方法名] = function(){}删除对象的方法
- 注意: 和删除对象属性的方法类似
示例代码:
var obj = {
name : '一花一世界',
age : 18,
sayMe : function(){
console.log('一笑一人生');
}
}
// 1.delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法 -> 报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);
// 以属性是否存在的方式进行判断
if ('sayMe' in obj) {
// 确认目前是一个方法
if (obj.sayMe instanceof Function) {
obj.sayMe();// 方法调用
}
}
// 以上代码可以优化为以下代码
if ('sayMe' in obj && obj.sayMe instanceof Function) {
obj.sayMe();// 方法调用
}
// 2.delete 对象名[方法名]