JS-对象
了解对象前先说说数据类型
数据类型可以分为两大类
1.基本数据类型2.引用数据类型
基本数据类型
String 字符串
Number 数值
Boolean 布尔
Null 空值
Undefined 未定义
引用数据类型
Object 对象
对象
对象属于一种符合的数据类型,在对象中可以保存多个不同数据类型的属性
对象的分类
1.内建对象
-由ES标准中定义的对象,在任何的ES的视线中都可以实现
-比如:Math String Number Boolean Function Object
2.宿主对象
-由JS的运行环境提供的对象,目前来讲主要是指浏览器提供的对象
-比如 DOM BOM
3.自定义对象
-由开发人员创建的对象
对象的基本操作
创建对象
//使用nuw关键字调用的函数,是构造函数
//构造函数是专门用来创建对象的函数
var obj=new Object();
console.log(obj);
在对象中保存的值称为属性
向对象添加属性
语法:对象.属性名=属性值;
obj.name="小阿涵";
obj.age=24;
读取对象中的属性
语法:对象.属性名
如果读取对象中没有的属性,不会报错而是返回undefined
console.log(obj.name);
修改对象的属性值
语法:对象.属性名=新值;
obj.name="阿涵";
删除对象的属性
语法:delete 对象.属性名
delete obj.name;
属性值和属性名
. [] 都是读取属性的运算符
. [] new 在运算符中的优先级最高
属性名:
-对象的属性名强制要求遵守标识符的规范
什么名字都可以
-但是尽量按照标识符的规范去使用
如果使用特殊的属性名,不能使用.的方式操作
需要使用另一种方式:
语法:对象[“属性名”]=属性值;
读取时也需要采取这样的方式
使用 [] 这种形式去操作属性,更加灵活
在 [] 中可以直接传递一个变量 这样变量值是多少就会读取哪个属性
变量的好处就是:灵活
例如:
var obj=new Object();
obj["123"]=789;
console.log(obj["123"]);
属性值:
JS对象的属性值,可以是任意的数据类型
甚至可以是一个对象
obj.test="hello";
obj.test=null;
obj.test=undefined;
//创建一个对象
var obj2=new Object();
obj2.name="小张";
obj.test=obj2;
console.log(obj.test);
//如果要取出obj2的name属性
console.log(obj.test.name);
in 运算符
-可以通过该运算符检查一个对象中是否含有指定的属性
如果有则返回 true 没有则返回 false
语法:
“属性名” in 对象
console.log("test" in obj);
基本数据类型和引用数据类型
JS中的变量都是保存在栈内存中的
区别:
基本数据类型的值直接在栈内存中存储
值与值之间是独立存在,修改一个变量不会影响其他的变量
对象是保存在堆内存中,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象的
引用,当通过一个变量的修改时,另一个也会受到影响
var a=123;//Number
var b=a;
a++;
console.log("a="+a);//输出124
console.log("b="+b);//输出123
var obj=new Object();
obj.name="小阿涵";
var obj2=obj;
//修改obj name属性
obj.name="阿涵";
//修改前
console.log(obj.name);//输出 小阿涵
console.log(obj2.name);//输出 小阿涵
//修改后
console.log(obj.name);//输出 阿涵
console.log(obj2.name);//输出 阿涵
对象字面量
使用对象字面量创建一个对象
var obj={ };
obj.name="小阿涵";
使用对象字面量,可以在创建对象时,直接指定对象中的属性
语法:
{属性名:属性值,属性名:属性值…}
var obj={
name:"小阿涵"
}
枚举对象中的属性
所谓的枚举就是将对象中的属性一个个取出来
枚举对象中的属性 使用 for…in语句
语法:
for(var 变量 in 对象){
}
for…in语句中对象有几个属性,循环体就执行几次
每次执行时,就会将对象中的一个属性的名字赋值给变量
var obj={
name:"小阿涵",
age:24,
sex:"男"
}
for (var n in obj){
console.log("枚举对象"+obj[n]);//输出3次 n的值是哪个属性就找哪个属性
console.log("属性名"+n);
console.log("属性值"+obj[n]);
}
工厂方法创建对象
所谓工厂式可以通过该方法大批量的创建对象
该方法适用于大量的重复性代码,可以将重复的属性提取到一个函数内,在需要的时候进行调用该函数
function creatPerson(name,age,sex){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sex=sex;
obj.sayName=function (){
alert(this.name);
}
return obj;
}
var obj2=creatPerson("小阿涵",24,"男");
console.log(obj2);
obj2.sayName();
注意:使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型
就导致我们无法区分多种不同类型的对象
因此我们需要借助构造函数来区分
构造函数
构造函数就是一个普通的函数,创建方式也与普通函数一样,就是一个创建对象的函数
不同的是构造函数习惯将首字母大写
不同的是两者的调用方式不一样
-普通函数可以直接调用
-构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
var per=new Person("小阿涵",24,"男");
console.log(per);//输出 Person{name="小阿涵",age=24,sex="男"}
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象instanceof构造函数
如果是,则返回true,否则false
console.log(per instanceof Person);
原型对象
原型prototype,原型对象也是对象,所以他也有原型。
我们所创建的每一个对象,解析器都会像函数中添加一个prototype
这个属性对应一个对象,这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数调用时,他所创建的对象都会有一个隐含的属性,
指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,
我们可以将对象中共有的内容,统一设置到原型对象中
当我们访问对象的一个属性或方法时,他会先在对象自身中寻找,如果有则直接使用,
如果没有则会去原型对象中寻找,如果找到则直接使用
function Person(){
}
//向Person的原型中添加属性a
Person.prototype.a=123;
//向per中添加a属性
per.a=123;
var per=new Person();
console.log(per.a);
前面补充可以使用 in 运算符来检查该属性是否存在于该对象
“属性名” in 对象名
同样我们也可以使用hasOwnProperty()来检查对象自身是否含有该属性
该方法只有当对象自身中含有属性时才会返回true
有则true无则false
function Person(){
}
Person.prototype.name="小阿涵";
var per=new Person();
per.age=24;
console.log(per.hasOwnProperty("name"));//false
console.log(per.hasOwnProperty("age"));//true
补充
对象中的属性可以是任意数据类型
//创建对象
var obj=new Object();
//添加属性
obj.name="小阿涵";
obj.age=24;
//对象中的属性可以是任意数据类型,可以是一个函数
obj.sayName=function (){
console.log(obj.name);
};
//调用方法
obj.sayName();//输出 小阿涵