JavaScript之原生对象ES5

web前端

发布日期: 2021-09-25

更新日期: 2021-09-27

文章字数: 1.1k

阅读时长: 3 分

阅读次数:

对象的概述

背景

为了更方便的描述复杂数据，用数组描述，操作不便，还需记忆每个下标对应的意义

概念

JavaScript 原生对象是一种引用的数据类型，该数据可以包含多个基本类型的数据
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

对象操作

创建对象

构造函数创建对象

使用new关键字调用的函数，是构造函数function
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时，会返回object
```
var obj = new Object();
```

字面量创建对象

定义一个空的对象
```
var 对象变量名 = {};
```

定义带有默认数据的对象

var 对象变量名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    属性名n: 属性值n
};

属性

在对象中保存的值称为属性

基本操作

向对象中添加或修改属性

//添加
对象.属性名=属性值；
obj.name = "孙悟空";
对象['属性名']=属性值；
//修改
对象['属性名']=新值；
对象.属性名 = 新值；
obj.name = "tom";

读取对象中的属性

//1.方式一
对象.属性名
console.log(obj.gender)；
//2.方式二
对象['属性名']
console.log(obj['gender'])；

如果读取到对象中没有的属性，不会报错而是返回undefined

删除对象的属性

delete  对象.属性名；
delete obj.name;

属性名和属性值

属性名

对象的属性名不强制要求遵守标识符的规范
如果要使用特殊的属性名，不能采用.的方式来操作,读取时也需使用这种方式
```
对象["属性名"] = 属性值
```
使用[ ]这种形式去操作属性，更加的灵活，
在[ ]中可以直接传递一个变量，来读取对应属性名的属性值

属性值

JS对象的属性值，可以是任意的数据类型，甚至也可以是一个对象

扩展

in运算符
- 通过该运算符可以检查一个对象中是否含有指定的属性
- 如果有则返回true，没有则返回false
```
"属性名" in 对象
//检查obj中是否含有test2属性
console.log("test2" in obj);
```

工厂模式创建对象

//使用工厂方法创建对象
//通过该方法可以大批量的创建对象
function createPerson(name , age ,gender){
    //创建一个新的对象 
    var obj = new Object();
    //向对象中添加属性
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
        alert(this.name);
    };
    //将新的对象返回
    return obj;
}
//使用工厂方法创建的对象，使用的构造函数都是Object
//所以创建的对象都是Object这个类型，
//就导致我们无法区分出多种不同类型的对象

构造函数

专门用于创建对象，对对象中的属性等进行初始化
构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用
使用同一个构造函数创建的对象，称为一类对象，一个构造函数称为一个类
通过一个构造函数创建的对象，称为该类的实例

执行流程

立刻创建一个新的对象
将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回,在创建对象时，用一个变量接收

function Person(name , age , gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function(){
        alert(this.name);
    };
}
var per = new Person("孙悟空",18,"男");