JavaScript对象

妍华之喜

已于 2022-04-27 18:47:47 修改

阅读量299

点赞数 2

文章标签： js javascript 前端

于 2020-12-12 10:29:27 首次发布

本文链接：https://blog.csdn.net/XVJINHUA954/article/details/111057535

版权

JavaScript对象

概念

在JS中,对象本质是对一组无序的相关变量(属性)以及函数(方法)进行组合的结果，将这些变量及方法进行统一再封装对封装结果命名为对象

JavaScript中所有的事物都是对象:字符串,数字,数组,日期,等等.

可以说万事万物皆对象，在程序中可以将生活中的所有事物映射成一个对象，已达到程序实现现实生活中的事务。

在JavaScript中,对象是拥有属性和方法的数据.

属性

主要是对对象的特征的描述,属性是与对象相关的值

方法

主要是对对象的行为描述,方法是能够在对象上执行的动作

为什么要用对象?

我们通常在记录一个数据值时，基本上都是使用变量，保存多个数据值时，我们一般都是使用数组。

那么对于记录数据而言，可以使用数组记录大量数据，但是数组中的数据只能通过索引值进行访问，并不明确每个数据的实际价值，而在开发中基本上每一步都需要明确每个数据的实际价值是什么，继续使用数组的话数据量变得非常庞大时索引也很混乱。

为了解决这种问题，我们使用对象的方式去解决，在对象中使用属性进行记录数据，同时还可以通过属性名称明确数据的价值

提示:在面向对象的语言中,属性和方法常被称为对象的成员.

面向对象和面向过程之间的区别以及优缺点

创建JavaScript对象

我们知道JS中几乎所有的事物都是对象,那么我们也可以定义和创建自己的对象.

创建对象的方式

通过字面量创建

通过字面量创建就是使用创建变量的方式，等号后面给一对花括号{}，花括号里面包含了表达这个具体事物(对象)的属性和方法比如:name:"张三"，花括号里面的内容以键值对形式表示,这是创建对象最简单的方法.

键值对的概念

键：关键词，在一个对象内是唯一的(包含：属性名、方法名)

值：数据值，可以重复完全取决于实际要求，而且数据类型不限

语法

var 变量名 = {
    键:值,
    属性名:数据值,
    键:值
};

通过new Object创建

Object:是复杂数据类型Object的原始对象(原名称)

new:创建一个新的这个类型成员

通过new Object();会创建出来一个新的Object类型的数据,而且这个数据装在man变量里面,Object类型就是JS代码中的所有数据类型的一个基类型.

只要是我们接触的类型都是由object类型所演变而来

语法

var person=new Object();
person.键=值;
person.属性名=数据值;

通过构造函数创建

构造函数是一种特殊的函数，主要是用来初始化对象，也是对象的一个成员，这个成员方法特殊到调用方式为隐式调用，这个函数的执行在创建对象的时候默认执行。

提示:

其实上面通过new Object();这种方式创建对象时其实也使用的是调用构造函数的方式进行创建的对象

构造函数

我们先看语法和栗子,然后对比着学习构造函数.

构造函数的语法

// 创建构造函数和创建函数基本上一样
function 函数名(参数1,参数2,...){  //构造函数名,命名首字母大写
    this.属性名=参数1;
    this.属性名=属性值;
    this.方法名 = function () {
        console.log("你好,世界!");
    }
    ......
}
var 对象名 = new 函数名(参数1,参数2,...);
console.log(对象名.属性名);
对象名.方法名();

栗子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            function Man() {
                this.name = "张三";
                this.age = 20;
                this.say = function () {
                    console.log("你好");
                }
            }
            var man1 = new Man();
            console.log(man1.name);
            man1.say();
        }
    </script>
</body>

</html>

构造函数的使用

构造函数和普通函数没有什么区别
构造函数的函数名使用帕斯卡命名法(用大写首字母对构造函数命名)
构造函数内的属性和方法创建必须使用this.名称方式进行创建添加
构造函数中不需要return返回结果
当创建对象的时候(构造函数的调用)，必须使用new 来调用构造函数
使用构造函数的方式创建对象，可以称之为创建了一个类，而构造函数对这一类对象的公共部分进行了抽象处理。

类和对象的概念以及关系
创建对象使用的var 对象名 = new 函数名();特指某一类对象，通过new关键字创建属于这一类的一个新成员对象，这个过程叫做类的实例化对象成员

构造函数的调用

构造函数的调用必须使用new关键字搭配使用
构造函数执行完创建了一个构造函数所属的原始对象
可以通过构造函数对原始对象中的属性等进行初始化赋值

JavaScript对象的使用

对象的属性

对象中存储的具体数据，属性名是键值对中的键，而存储的具体数据是键所对应的值

对象的方法

对象中存储的具体函数，方法名是键值对中的键，而具体的函数是键所对应的匿名函数

对象属性以及方法的添加

通过之前学习的调用的方式进行添加

例如:

//通过new Object创建对象
var man=new Object();
//对象属性的添加
//对象名.属性名=属性值;
man.name="张三";
man.age=20;
//对象方法的添加
//对象名.方法名=function(){}
man.say=function(){
    return "hello";
}

访问对象成员

访问对象里面的属性，通过对象名称.属性名方式进行访问
访问对象里面的属性还有一种方式，通过对象名称["属性名"]方式进行访问，和数组索引访问元素方式类似，区别在于访问属性方括号中使用的是键名称，必须是字符串

访问对象方法

访问对象里面的方法，通过“对象名称.方法名()”方式进行访问

总结对象中变量和属性及函数和方法之间的区别

属性是对象的一个组成部分，而变量不是对象的组成成员，而且变量只是一个存储数据的容器，基本上没有任何的实际含义。
方法是对象的一个组成部分，而函数不是对象的组成成员，函数只是单独的封装了一些操作算法的简单容器。

通过遍历获取对象成员

使用遍历语法对对象进行遍历，遍历到的每一个元素是对象键值对中的键的值，如果使用这种遍历方式进行遍历数组，那么得到的结果是每个元素的索引

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            function Man() {
                this.name = "张三";
                this.age = 20;
                this.say = function () {
                    console.log("你好");
                };
                this.self = function () {
                    return this;
                }
            }
            var man1 = new Man();
            for (var item in man1) {
                console.log(item);
            }
        }
    </script>
</body>

</html>