转载请注明预见才能遇见的博客：https://my.csdn.net/
原文地址：https://blog.csdn.net/weixin_42787326/article/details/81297232
JavaScript对象详解
目录
练习:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头 看代码
练习:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信 看代码
* 2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
练习:创建一个图片的对象,图片有宽,有高,有大小(4M),图片可以展示内容
练习:创建一个小猫的对象,猫有颜色，体重，年龄,小猫可以抓耗子,可以打架
3.如何获取该变量(对象)是不是属于什么类型的? instanceof
1.对象的概念、特点
* 什么是对象?
* 看的见,摸得到,具体特指的某个事物
对象:js中就是一组无序的属性的集合
* 分析对象有什么特点:特征和行为
* 对象:有特征和行为,具体特指的某个事物
* 对象:有属性和方法,具体特指的某个事物
* js不是面向对象的语言,但是可以模拟面向对象的思想，js是一门基于对象的语言: 万物皆对象
在当前的对象的方法中,可以使用this关键字代表当前的对象
2.创建对象三种方式
* 1.调用系统的构造函数创建对象
* var 变量名= new Object(); Object 是系统的构造函数，如果需要创建数组对象，也可以new Array();
* 2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
* 3.字面量的方式创建对象
详细的讲解
* 1.调用系统的构造函数创建对象
* var 变量名= new Object(); Object 是系统的构造函数，如果需要创建数组对象，也可以new Array();
看代码
//实例化对象
var obj = new Object();
//对象 特征---属性 和 行为---方法
//添加属性-----如何添加属性? 对象.名字=值;
obj.name = "小苏";
obj.age = 38;
obj.sex = "女";
//添加方法----如何添加方法? 对象.名字=函数;
obj.eat = function () {
console.log("我喜欢吃油炸榴莲凉拌臭豆腐和大蒜");
};
obj.play = function () {
console.log("我喜欢玩飞机模型");
};
obj.cook = function () {
console.log("切菜");
};
console.log(obj.name);//获取--输出了
console.log(obj.age);
console.log(obj.sex);
//方法的调用
obj.eat();
obj.play();
obj.cook();理解 特征---属性 和 行为---方法 ，这样就比较容易写对象了
练习:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头 看代码
//创建对象
var smallDog=new Object();
smallDog.name="大黄";
smallDog.age=3;
smallDog.color="黄色";
smallDog.weight="250";
smallDog.eat=function () {
console.log("我要吃大骨头");
};
smallDog.walk=function () {
console.log("走一步摇尾巴");
};
smallDog.eat();//方法的调用
smallDog.walk();练习:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信 看代码
var phone=new Object();
phone.size="iphone8";
phone.color="黑色";
phone.call=function () {
console.log("打电话");
};
phone.sendMessage=function () {
console.log("你干啥捏,我烧锅炉呢");
};
phone.call();
phone.sendMessage();* 2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
工厂模式创建对象
如何一次性创建多个对象?把创建对象的代码封装在一个函数中
看代码
//工厂模式创建对象
function createObject(name,age) {
var obj = new Object();//创建对象
//添加属性
obj.name = name;
obj.age = age;
//添加方法
obj.sayHi = function () {
console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
};
return obj;
}
//创建人的对象
var per1 = createObject("小芳",20);
per1.sayHi();
//创建一个人的对象
var per2 = createObject("小红",30);
per2.sayHi();自定义构造函数创建对象
函数和构造函数的区别；名字是不是大写(首字母是大写)
自定义构造函数 看代码
function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("我叫:"+this.name+",年龄是:"+this.age);
};
}自定义构造函数创建对象 看代码
var obj=new Person("小明",10);
console.log(obj.name);
console.log(obj.age);
obj.sayHi();
var obj2=new Person("小红",20);
console.log(obj2.name);
console.log(obj2.age);
obj2.sayHi();
//这里如果看不懂往下看一点博客再回来看
console.log(obj instanceof Person);
console.log(obj2 instanceof Person);
//创建对象----实例化一个对象,并初始化
var per=new Person("小明",20);
per.name="张三";自定义构造函数创建对象做了几件事，需要理解
* 1. 在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象
* 2. 把this设置为当前的对象
* 3. 设置对象的属性和方法的值
* 4. 把this这个对象返回
通过自定义构造函数实现下面的例子:
练习:创建一个图片的对象,图片有宽,有高,有大小(4M),图片可以展示内容
练习:创建一个小猫的对象,猫有颜色，体重，年龄,小猫可以抓耗子,可以打架
* 3.字面量的方式创建对象 看代码
var obj={};
obj.name="小白";
obj.age=10;
obj.sayHi=function () {
console.log("我是:"+this.name);
};
obj.sayHi();
var obj2={
name:"小明",
age:20,
sayHi:function () {
console.log("我是:"+this.name);
},
eat:function () {
console.log("吃了");
}
};
obj2.sayHi();
obj2.eat();点语法: 对象.名字=值; 对象.名字=函数;
3.如何获取该变量(对象)是不是属于什么类型的? instanceof
看代码
* 语法:
* 变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型看代码
var person=new Object();
console.log(person instanceof Object);4.设置和获取属性的扩展 看代码
* 对象设置属性的值的写法
* 对象.属性名字=值;----点语法
* 对象["属性的名字"]=值;-----
*
* 对象获取属性的值的写法
* 对象.属性
* 对象["属性"]
*
* 遍历对象
* for(var key in 对象){ key---是一个变量,这个变量中存储的是遍历的对象的属性的名字
*
* }看代码
function Person(name,age) {
this.name=name;
this.age=age;
this.play=function () {
console.log("喜欢玩游戏");
};
}
var obj=new Person("卡卡西",20);
//obj.name="佐助";
obj["name"]="佐助";
console.log(obj["name"]);
obj.play();
obj["play"]();
// console.log(obj.name);
// console.log(obj.age);
// obj.play();
var obj={
"name":"牙擦苏",
"age":20,
"sex":"男",
"height":198,
"weight":55
};
//遍历对象
for(var key in obj){
console.log(key+"======>"+obj[key]);
}
JavaScript对象详解
博客地址：https://blog.csdn.net/weixin_42787326/article/details/81297232