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
}