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
}