JS-对象详解

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();//输出 小阿涵