JavaScript学习的第五天

**JavaScript的对象

-对象（object）：是一个以键值对形式储存属性的集合，每一个属性有一个特定的名称，以及与名称相对应的值。这种关系有一个专有名称，叫做映射。对于对象来说，除了可以通过这种方式来保持自由属性，还可以通过继承的方式来继承属性。这种方式称为“原型式继续”。

-万物皆对象。

-语法：{key1:value1,key2:value2,key3:value3,.....}

-JavaScript对象的值是 属性和方法的数据。

**JavaScript对象的分类

-内建（内置）对象

由ES标准中定义的对象，在任何ES中都可以使用

例如：Math，Date，Array，String，Number，Boolean....

//内置对象
//圆周率
console.log(Math.PI);  //3.1415926
console.log(new Date());  //Thu Apr 14 2022 15:05:17 GMT+0800 (中国标准时间)

-宿主对象

由JS的运行环境提供的对象，现在主要指由浏览器提供的对象。

例如：DOM（document），BOM（window）。

//宿主对象
console.log(document);  //整个代码
console.log（window）;  //控制台window窗口
//nodejs  global

-自定义对象

由开发人员自己创建的对象。

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

 -对象的声明

1、字面量 声明

var obj={
    name="囡囡"，
    age="18",
    hobby:funcyion(){
          return "吃饭，睡觉，打王者"；
    }
}

2、 通过 new 关键字声明，构造（对象）函数

var obj={
    name="囡囡"，
    age="18",
    hobby:funcyion(){
          return "吃饭，睡觉，打王者"；
    }
}
var obj2=new Object();
obj2.name="小曹";
obj2["age"]=20;
obj2["hobby"]=function(){
    return "吃饭，睡觉，想囡囡"；
}
console.log(obj);
console.log(obj2);

-对象的属性的操作

-如何访问对象的属性 

object.property(属性)

var obj={
    name="囡囡"，
    age="18",
    hobby:funcyion(){
          return "吃饭，睡觉，打王者"；
    }
}
//访问对象的属性
console.log(obj.name);
console.log(obj.age);
//访问对象的方法
console.log(obj.hobby());

 object["property"]  对象的键必须是字符串类型，不写""会报undefined

var obj={
    name="囡囡"，
    age="18",
    hobby:funcyion(){
          return "吃饭，睡觉，打王者"；
    }
}
console.log(obj["name"]);
console.log(obj["age"]);
console.log(obj["hobby"]());
console.log(obj["sex"]);  //undefined

 删除对象的属性  delete 关键字

detete：删除对象的属性

var obj2=new Object();
obj2.name="小曹";
obj2["age"]=20;
obj2["hobby"]=function(){
    return "吃饭，睡觉，想囡囡"；
}
console.log(obj2);
delete obj2.name;
console.log(obj2); 

 遍历对象的属性 for...in

语法：prop in object 

var obj={
    name="囡囡"，
    age="18",
    hobby:funcyion(){
          return "吃饭，睡觉，打王者"；
    }
}
for(x in obj){
   console.log(x);  //name,age,hobby
   console.log(x+":"+obj[x]);  name:囡囡，age：18，hobby：funct（）{...}
}

检测对象的属性是否存在，使用in来检查对象中是否包含有指定的属性 

"属性" in 对象   返回true 或 false

var obj={
    name="囡囡"，
    age="18",
    hobby:funcyion(){
          return "吃饭，睡觉，打王者"；
    }
}
console.log("name" in obj);  //true
console.log("sex" in obj);  //false
<!--第一种检测方法-->
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"));  //false

-对象的注意事项

 1、对象可以嵌套对象 属性值可以为任意类型（包含对象）

var caoshuai={
    name："小曹",
    age:23,
    girlFriend:{
        name:"马士洋",
        age:21,
    }
}
console.log(caoshuai.girlFriend.name);  //马士洋

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

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

3、对象的键必须是字符串类型，键为非字符串类型会自动转换为字符串类型

var person2={
    name:"字符串",
    1：'2',
   "[]":"数组",
   "{}":"对象",
    null:"空"，
    undefined:"未定义"，
}
console.log(typeof x);  //string

var a={mane:"a"};
var b={mane:"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]覆盖了上面的=10
obj[c]=30;
console.log(obj); //数组不产生影响
obj[d]=40;
console.log(obj); //数组不产生影响
console.log(obj[a]);  //20

**JavaScript的类（构造函数）

一种抽象的概念，类似于工厂，模板。

对象：是一个具体的实例。

 通过构造函数创建对象，对象会继承构造函数的属性。

构造函数：对象的构造器  用来构造对象的函数

创建一个类（函数）   类名（函数名）首字母大写

function Person(name,age,sex,hobby){
     this.eyes="黑色";
     this.hair="红色";
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.hobby=hobby;  //前面的为this里面包含的类型，后面的为具体赋的值
}
//使用Person  创建一个对象
var nannan=new Person("囡囡"，18,"小仙女"，function(){return"睡大觉"});
var xiaocao=new Person("小曹"，20,"小仙男"，function(){return"破大防"});
console.log(nannan);
console.log(xiaocao);

function Car(//color){
     this.name="兰博基尼";
     this.price="668.99w";
     this.fuc=fuction(){
          return "装逼";
     }
     this.color=color;  //特有的
}
var Car1=new Car(//"金色");
var Car2=new Car(//"银色");
console.log(Car1);
console.log(Car2);

 通过prototype向原型对象添加属性和方法

function Car(color){
     this.color=color;  
}
console.log(Car.prototype);  //原型对象
Car.prototype.name="玛莎拉蒂";
Car.prototype.price="558.98w";
Car.prototype.fuc=fuction(){
     return"赛车";
}
//继承 类 的属性（原型部分）
//生产线
var Car1=new Car("金色");
Car1.type="敞篷"
var Car2=new Car("银色");
console.log(Car1);
console.log(Car2);

**this指向

1、在构造函数中使用，指向实例对象。

var car1=new Car("color")
function Car(color){
    this.color=color;
}
//this指向car1。

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