JavaScript对象

JavaJspSsh 2019-06-28

对象

javaScript中的对象,和其它编程语言中的对象一样,可以比照现实生活中的对象来理解。在JavaScript中,一个对象可以是一个单独拥有属性和类型的实体。和杯子做一下比较,一个杯子是一个对象,拥有属性,杯子有颜色、图案、重量等。同样,JavaScript也有属性来定义它的特征。
方法是关联到某个对象的函数,或者简单地说,一个方法是一个值为某个函数的对象属性,定义方法就像定义普通的函数,除了它们必须被赋给对象的某个属性。

对象的分类

  1. 内置对象/原生对象:就是JavaScript语言预定义的对象,在ECMAScript标准定义,有JavaScript解释器/引擎提供具体实现
  2. 宿主对象:指的是javaScript运行环境提供的对象。一般是由浏览器厂商提供实现(目前也有独立的JavaScript解释器/引擎提供实现),主要分为BOM和DOM
  3. 自定义对象:就是由开发人员自主创建的对象

Object对象

Object类型与Array、Math等一样都是JavaScript的引用类型。不过Object类型是JavaScript中所有类型的父级(所有类型的对象都可以使用Object的属性和方法),JavaScript可以通过Object的构造函数来创建自定义对象。当以非构造函数形式被调用时,Object等同于new Object()
Object对象的方法分为自有方法和原型方法两种:
自有方法
create():指定原型对象和属性来创建一个新的对象
getOwnOropertyNames():返回一个数组,它包含了指定对象所有的可枚举或不可枚举的属性名
keys():返回一个数组,包含指定对象的所有自有可遍历属性的名称
原型方法
prototype.hasOwnProperty():返回一个布尔值,该值指示对象是否包含指定的属性

创建对象

1.对象的初始化器创建方式
var 对象名={

属性名:属性值,
方法名:function(){
    方法体
}

}

var obj={
    name : '张三',
    age : 20,
    sayMe : function(){
        console.log('我是张三');
    }
}

2.对象的构造函数方式
利用所有引用类型创建对应的对象
利用Object作为构造函数创建对象
var 对象名 = new Object();
var 对象名 = Object();

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

3.利用Object.create()方法创建对象

//创建一个空对象:var 对象名 = Object.create(null)
var obj=Object.create(null);
/*当前创建的新对象拥有与obj对象相同的属性和方法:
  var 对象名 = Object.create(obj);
  obj表示另一个对象*/
var obj1=Object.create(obj2);

4.创建空对象

var obj={}

创建方式对比

Number、String和Boolean
字面量方式创建的是原始类型,构造函数方式创建是引用类型
Array和Object
无论是字面量方式还是构造函数方式创建的都是引用类型

变量、函数与对象

其实定义的变量就是某个对象的属性,定义的函数就是某个对象的方法
JavaScript中具有一个全局对象(Global),仅存在于概念
1.浏览器运行环境,BOM中Window(窗口)对象
2.Node.js运行环境

var obj={
    name:'张三',
    age:20,
    sayMe:function(){
        console.log('我是张三');
    }
}

调用对象的属性

//1.对象名.属性名:不适用于复杂命名的属性名称
console.log(obj.name);
//2.对象名[属性名]:通用的调用方式,与数组类似,适用于复杂命名的属性名称
console.log(obj['name']);
//访问一个对象不存在的属性,返回undefined
console.log(obj.age);//返回undefined

新增对象的属性

//1.对象名.新的属性名=属性值
obj.age=18;
//2.对象名[新的属性名]=属性值
obj['name']='张三';

修改对象的属性

//1.对象名.已存在的属性名=属性值
obj.age=20;
2.对象名[已存在的属性名]=属性值
obj['name']='李四';

删除对象的属性

1.delete 对象名.属性名
delete obj.age;
2.delete 对象名[属性名]
delete obj['name'];

检测对象的属性

1.判断对象的属性是否为undefined

if(obj.age!==undefined){
    console.log('obj对象的age属性存在...');
}else{
    console.log('请定义obj对象的age属性...');
}

2.判断对象的属性值,先转换为Boolean类型

if(obj.age){
    console.log('obj对象的age属性存在...');
}

3.利用in关键字进行判断

if('age' in obj){
    console.log('obj对象的age属性存在...');
}else{
    console.log('obj对象的age属性不存在...');
}

4.Object类型提供了hasOwnProperty()方法

if(obj.hasOwnProperty('age')){
    console.log('Obj对象的age属性存在...');
}else{
    console.log('obj对象的age属性不存在...');
}

遍历对象的属性

1.for...in语句

//创建一个对象
var obj={
    name:'张三',
    age:20,
    sayMe:function(){
        console.log('我是张三');
    }
}
//for...in语句
for(var objAttr in obj){
    //通过对象属性或方法对应的值的类型进行区别
    if(obj[objAttr] instanceof Function){
        //当前是对象的方法
        obj[objAttr]();
    }else{
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}

2.Object类型提供了keys()方法,只能遍历可枚举的属性

//创建一个对象
var obj={
    name:'张三',
    age:20,
    sayMe:function(){
        console.log('我是张三');
    }
}
//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 obj={
    name:'张三',
    age:20,
    sayMe:function(){
        console.log('我是张三');
    }
} 
//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:20,
    sayMe:function(){
        console.log('我是张三');
    }
}
//1.对象名.方法名()
obj.sayMe();
//2.对象名[方法名]()
obj['sayMe']();

新增对象的方法

//创建一个新的对象
var obj={
    name:'李四',
    age:20,
    sayMe:function(){
        console.log('我是李四');
    }
}
//1.对象名.新的方法名=function(){}
obj.sayYou=function(){
    console.log('你是张三');
}
//2.对象名[新的方法名]=function(){}
obj[sayHe]=function(){
    console.log('他是大王');
}

修改对象的方法

//创建一个对象
var obj={
    name:'张三',
    age:20,
    sayMe:function(){
        console.log('我是张三');
    }
}
//1.对象名.方法名=function(){}
obj.sayMe=function(){
    console.log("你是李四");
}
//2.对象名[方法名]=function(){}
obj[sayMe]=function(){
    console.log('你是李四');
}

删除对象的方法

//创建一个对象
var obj={
    name:'张三',
    age:20,
    sayMe:function(){
        console.log('我是张三');
    }
}
//1.delete 对象名.方法名
delete obj.sayMe;
//访问对象中不存在的方法,报错(TypeError: obj.sayMe is not a function)

//2.delete 对象名[方法名];
delete obj[sayMe];

相关推荐