JavaScript Day5

JavaScript对象

数据类型 引用数据类型

 var person={
 name:"张三",
 age:18,
 prop:function(){
 console.log("吹")
        }
    }

###JavaScript对象的分类
// 内置对象
// 圆周率 3.1415926

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

// 宿主对象

 console.log(document);    
 console.log(window);
 // nodejs  global

// 自定义对象

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

JavaScript对象的声明

// 1.字面量 声明 {}

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

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

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


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

JavaScript对象属性的操作

// 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 "吃饭，睡觉，打豆豆"
    }

// 删除对象的属性 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

JavaScript对象的注意事项

// 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);

 // 工厂
    function Car(color){
 this.name="比亚迪";
 this.price="16.68w";
 this.func=function(){
 return "买菜"
        }
 this.color=color;
    }

 // 生产线
 var car1=new Car("红色");
 var car2=new Car("白色");
    console.log(car1.func());
    console.log(car2.func());

JavaScript类添加属性和方法

// 类：抽象的概念
// 构造函数：对象的构造器 用来构造对象的函数

 // 工厂
 function Car(color){
        this.color=color;
    }

    // prototype 返回原型对象
    console.log(Car.prototype);// 原型对象

    // 通过 prototype 向原型对象添加属性和方法
 Car.prototype.name="比亚迪";
 Car.prototype.price="16.68w";
 Car.prototype.func=function(){
        return "撩妹"
    }

 // 继承 类 的属性(原型部分)
 // 生产线 
 var car1=new Car("红色");
    car1.type="跑车";
 var car2=new Car("白色");
    console.log(car1);
    console.log(car2);

了解JavaScript的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");
var num4 = document.getElementById("num4");
var num5 = document.getElementById("num5");
var num6 = document.getElementById("num6");
var res=document.getElementById("res");


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
}
num4.onclick=function(){
    console.log(this.innerText)
    res.value+=this.innerText
}
num5.onclick=function(){
    console.log(this.innerText)
    res.value+=this.innerText
}
num6.onclick=function(){
    console.log(this.innerText)
    res.value+=this.innerText
}