JavaScript对象

JavaScript对象

-对象(object)是一个以键值对形式储存属性的集合，每个属性有一个特定的名称，以及与名称相对应的值。这种关系有一个专有名称，称为映射。
-万物皆对象
-语法：{key:value,key2:value2,...}
-JavaScript的对象的值是：属性和方法的数据。

一、对象的分类

1、内置对象

由Es标准中定义的对象，在任何的Es中都可以使用
例如:Math Date Array String Number Boolean

console.log(Math.PI);
    console.log(new Date());

2、宿主对象

由js的运行环境提供的对象，现在主要值由浏览器提供的对象
例如:DOM(document) BOM(window)

console.log(document);    
    console.log(window);

3、自定义对象

由开发人员自己创建的对象
-对象的声明
1、字面量
2、new关键字
-对象的属性的操作
1、访问属性和方法
2、添加属性和方法
3、删除属性

var math2={
        PI2:3.1415927
    }
    console.log(math2.PI2);

二、对象的声明与操作

1、字面量 声明{}

var obj={
        name:"张三",
        age:18,
        hobby:function(){
            return "抽烟，喝酒，烫头"
        }
    }

如何访问对象的属性 object.property（属性）

 console.log(obj.name);
    console.log(obj.age);

访问对象的方法

console.log(obj.hobby());
<!--object["property"]（属性）对象的键必须是字符串类型-->
    console.log(obj["name"]);
    console.log(obj["age"]);
    console.log(obj["hobby"]());

    console.log(obj["sex"]);// undefined

2、通过 new 关键字声明 构造(对象)函数

var obj2=new Object();
     <!--添加属性和方法-->
    obj2.name="李四";
    obj2["age"]=19;
    obj2["hobby"]=function(){
        return "吃饭，睡觉，打豆豆"
    }


    console.log(obj);
    console.log(obj2);

添加属性和方法

obj2.name="李四";
    obj2["age"]=19;
    obj2["hobby"]=function(){
        return "吃饭，睡觉，打豆豆"
    }

删除对象的属性 delete 关键字
delete:删除对象的属性

console.log(obj2);
    delete obj2.name;
    delete obj2.age;
    console.log(obj2);

遍历对象的属性 for...in
语法：prop in object

for(x in obj){
        console.log(x+":"+obj[x]);
    }

检测对象的属性是否存在
使用 in 检查对象中是否包含指定的属性
"属性" in 对象 返回 true false

console.log("sex" in obj);
    if("name" in obj){
        console.log("obj对象包含name属性")
    }else{
        console.log("obj对象不包含name属性")
    }
<!--hasOwnProperty() 检测是否 含有 属性-->
    console.log(obj.hasOwnProperty("name"));//true
    console.log(obj.hasOwnProperty("sex"));//fasle

三、对象的注意事项

1、对象可以嵌套对象属性值可以为任意数据类型

var caoshuai={
        name:"张三",
        age:20,
        boyFriend:{
            name:"李四",
            age:21
        }
    }

    console.log(caoshuai.boyFriend.name);

2、对象的属性具有唯一性 key是唯一的

var person={
        name:"孙悟空",
        age:500,
        name:"白龙马"
    }
    person.name="唐僧";
    console.log(person)

3、对象的键必须是字符串类型

 <!--var person2={-->
 <!--        name:"字符串",-->
 <!--        1:'2',-->
 <!--        "[]":"数组",-->
 <!--        "{}":"对象",-->
 <!--        null:"kong",-->
 <!--        undefined:"未定义"-->
 <!--    }-->
 <!--     console.log(person2)-->
 <!--    for(x in person2){-->
 <!--        console.log(typeof x);//string-->
 <!--    }-->

<!--键为非字符串类型，会转换为字符串类型-->
    var a={name:"a"};
    var b={name:"b"};
    var c=[1,2,3,];
    var d=[4,5,6];
     <!--创建一个空对象-->
    var obj={};
     <!--可以给对象添加属性-->
    obj[a]=10;
    console.log(obj);// [object Object]
    obj[b]=20;
    console.log(obj);// [object Object]
    obj[c]=30;
    console.log(obj);
    obj[d]=40;    
    console.log(obj);
    console.log(obj[a]);//?  20

四、JavaScript的类（构造函数）

类：抽象的概念
构造函数：对象的构造器 用来构造对象的函数
创建一个类(函数) 类名(函数名)首字母大写

<!--人类：name  age  sex  hobby -->
function Person(name,age,sex,hobby) {
        this.eyes="黑色";
        this.hair="黑色";
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.hobby=hobby;
    }

<!--使用 Person 创建对象-->
var xiaoming=new Person("小明",20,"男",function(){return "唱歌"});
    var xiaohong=new Person("小红",18,"女",function(){return "跳舞"});

    console.log(xiaoming);
    console.log(xiaohong);

类添加属性和方法
prototype 返回原型对象

<!--原型对象-->
console.log(Car.prototype);
<!--通过 prototype向原型对象添加属性和方法-->
 Car.prototype.name="比亚迪";
    Car.prototype.price="16.68w";
    Car.prototype.func=function(){
        return "撩妹"
    }
    <!--继承 类 的属性(原型部分)-->

五、this指向

this关键字 ： this指向
1、在构造函数中使用 指向实例对象

 function Car(color) {
        this.color = color
    }
    <!--创建car的实例-->
var car1 = new Car("红色");
    var car2 = new Car("黄色");
    var car3 = new Car("黑色");

    console.log(car1.color);
    console.log(car2);
    console.log(car3);

2、方法(函数)被调用时 事件触发 this指向调用方法的元素

var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = document.getElementById("num3");
num1.onclick=function(){
        console.log(this.innerText);
        res.value+=this.innerText
    }
num2.onclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }
num3.onclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }