【JavaScript】核心语法之对象

JS(JavaScript)

对象
一.对象
1.对象是什么；
理解成你所看到的任何物体独有属性并且使用方法
2.对象的分类；

• 内置对象/原生对象；

是以ECMAScript为标准定义好的对象，可直接拿来使用

• 宿主对象；

是以浏览器自身运行环境下提供的对象，并且才可使用

• 自定义对象；

开发人自身创建的对象，并使用
二.创建对象；
1.对象初始化方法；
通过字面量创建对象

/*对象的初始化创建方式
var 对象名 = {
    属性名 : 属性值,
    方法名 : function(){
        方法体
    }
}
    */
var obj1 = {
    name:'犬夜叉',
    age: 16,
    sayMe :function () {
        console.log('我是犬夜叉');
    }
}

2.构造函数方法；
通过JS的预定义类型来创造对象

/*对象构造函数
* 利用所用引用类型创建对应对象；具体类型
  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 = new Object();
console.log(obj2);
console.log(obj3);

3.Object.create方法；
指定原型和多个指定属性对象

var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

/*利用Object.create()方法创建对象
* var 对象名 = Object.create(null)；创建一个空对象
  var 对象名 = Object.create(obj)
  obj- 表示另一对象
  当前创建新对象拥有与obj对象相同属性和方法
 */

三.对象的属性；
1.调用对象的属性；
对象名.属性名；不能用复杂命名属性名称
对象名[属性名]；能用复杂命名属性名称

var obj = {
    name : '犬夜叉',
    'Type-Content' : 'text/html',
    sayMe : function(){
        console.log('我是犬夜叉');
    }
}
/*
    对象名.属性名
      * 不适用于复杂命名的属性名称
 */
console.log(obj.name);// 犬夜叉
// console.log(obj.Type-Content);
/*
    对象名[属性名]-通用调用方式
      * 适用于复杂命名的属性名称
 */
console.log(obj['name']);// 犬夜叉
console.log(obj['Type-Content']);// text/html

// 访问一个对象不存在的属性 -> 值为 undefined
console.log(obj.age);

2.新增对象的属性；
以两种属性表示
对象名.新的属性名 = 属性值
对象名[新的属性名] = 属性值

var obj = {
    name : '漩涡鸣人',
    sayMe : function(){
        console.log('我是漩涡鸣人');
    }
}
/*
    对象名.新的属性名 = 属性值
    对象名[新的属性名] = 属性值
 */
obj.age = 18;
console.log(obj);

/*
  空对象默认没有自身的属性和方法(父级Object)
 */
var obj1 = {};
console.log(obj1);

obj1.name = '日向雏田';
console.log(obj1);

3.修改对象的属性；

var obj = {
    name : '漩涡鸣人',
    sayMe : function(){
        console.log('我是漩涡鸣人');
    }
}
/*
    对象名.已存在属性名 = 属性值
    对象名[已存在属性名] = 属性值
 */
obj.name = '日向雏田';
console.log(obj);

4.删除对象的属性；
以delete表示删除该属性
delete 对象名.属性名
delete 对象名[属性名]

var obj = {
    name : '犬夜叉',
    sayMe : function(){
        console.log('我是犬夜叉');
    }
}
/*
    delete 对象名.属性名
    delete 对象名[属性名]
 */
delete obj.name;
console.log(obj.name);// undefined

四.对象的方法；
1.调用对象的方法；
有两种方法表示调用对象
对象名.方法名()
对象名[方法名]()

var obj = {
    name : '犬夜叉',
    age : 18,
    sayMe : function(){
        console.log('我是犬夜叉');
    }
}
// 对象名.方法名()
obj.sayMe();
// 对象名[方法名]()
obj['sayMe']();

2.新增对象的方法；
以function()来表示新增对象
对象名.新的方法名 = function(){}
对象名[新的方法名] = function(){}

var obj = {
    name : '漩涡鸣人',
    age : 16,
    sayMe : function(){
        console.log('我是漩涡鸣人');
    }
}
// 对象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log('你是日向雏田');
}
console.log(obj);
// 对象名[新的方法名] = function(){}

3.修改对象的方法；

var obj = {
    name : '漩涡鸣人',
    age : 16,
    sayMe : function(){
        console.log('我是漩涡鸣人');
    }
}
// 1.对象名.方法名 = function(){}
obj.sayMe = function(){
    console.log('你是日向雏田');
}
console.log(obj);
obj.sayMe();
// 2.对象名[方法名] = function(){}

4.删除对象的方法；
delete 对象名.方法名
delete 对象名[方法名]

var obj = {
    name : '犬夜叉',
    age : 16,
    sayMe : function(){
        console.log('我是犬夜叉');
    }
}
// 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();// 方法调用
}

// delete 对象名[方法名]