JS-4-14

71 阅读2分钟

对象

对象是一个具体的事物

语法:

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

对象分类

内置对象

// 圆周率   3.1415926
    console.log(Math.PI);
    console.log(new Date());

宿主对象

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

自定义对象

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

对象的声明

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

添加属性和方法

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
    }