JavaScript基础——对象简介

最新推荐文章于 2022-09-19 22:02:12 发布

Kong_十六

最新推荐文章于 2022-09-19 22:02:12 发布

阅读量420

点赞数

分类专栏： # Javascript基础

本文链接：https://blog.csdn.net/qq_42383764/article/details/104553678

版权

Javascript基础专栏收录该内容

34 篇文章 2 订阅

订阅专栏

对象的分类

Javascript中有三种对象：自定义对象、内置对象、浏览器对象

这里我主要简单说明介绍下自定义对象。

对象的含义

JavaScript中，万物皆对象。比如，一本书、一个杯子、一个数据库或者一个与远程连接的服务器都是对象。

对象是指一个具体的事物，不是一个模糊或者一类事物。比如，人不是对象，但是这个人、那个人、在我旁边喝水的一个人是对象；笔不是对象，一支红色的笔、一支断掉的笔、一支没有水的钢笔是对象。

对象：是一组无序的相关属性和方法的集合

属性：对象的特征（一般是名词）。描述对象的外在外形

方法：对象的行为（一般是动词）。描述对象可以做什么

对象数据类型的必要性

在Javascript中，有五种简单数据类型和一个复杂数据类型。五种简单数据类型：number、Boolean、string、undefined、NaN。复杂数据类型就是Object——对象。

对象的存在使我们的结构更清晰，更强大了。

就我个人的理解：

比如我们可以用五种简单数据类型表示一个人，但是结构比较复杂一些，但是使用对象的话，就相对简单。

一个人就是一个对象，我们可以抽象出他的外在特征作为属性，抽象出行为特征作为方法。这样结构就比较清晰，如果还有其他的属性和方法也可以直接添加，而不是再去使用简单数据类型去添加那么麻烦了。这就是对象的必要性。

创建对象的方式

1.使用对象的字面量 {}

语法结构：

对象名 = {

属性名：值，

方法名： function（）{}

}

注意：采用键值对的方式写属性和方法，注意冒号后面有空格，使用逗号隔开

var obj = {
            // 三个属性 一个方法
            uname: '张三',
            uage: 18,
            usex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }

2.使用new Object创建对象

语法结构：

对象名 = new Object（）；创建的是一个空对象

对象名.属性 = 属性值；追加属性

对象名.方法 = function（）{} 追加方法

注意：此方法是使用 . 追加方法和属性

var person = new Object(); //创建一个空对象
        person.uname = '李四';
        person.uage = 20;
        person.usex = '男';
        person.sayHi = function () {
            console.log('我是李四');
        }

3.使用构造函数创建对象

语法结构：

new 构造函数名（形参）{

this.属性 = 值;

this.方法 = function （形参）{}

}

注意：形参根据情况有或没有

function Start(uname, uage, usex) {
            this.name = uname;
            this.age = uage;
            this.sex = usex;
            // 构造函数里的方法
            this.do = function (doting) {
                console.log(doting);
            }
        }

构造函数的调用：

var person= new 构造函数名（）{}

person 指向这个构造函数

var lyf = new Start('李易峰', 32, '男'); //调用函数返回的是一个对象
        console.log(lyf.name);
        console.log(lyf['age']);
        lyf.do('演员、歌手');

调用函数的属性和方法

// 调用对象的方法

        obj.sayHi();

        // 调用对象的属性  两种方法：对象名.属性名、对象名['属性名']

        console.log(obj.uname); //更常用

        console.log(obj['uage']);

案例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 对象：是一组无序的相关属性和方法的集合  万物皆对象
        // 创建对象的三种方式
        // 1. 对象的字面量 {}  {}里面放对象的属性和方法——采用的是键值对方法
        // 语法结构，方法和属性之间需要用逗号隔开，最后一个不用
        // 对象名 = {
        //     属性名: 值,
        //     ...,
        //     方法名: function () {}
        // }
        var obj = {}; //创建的是一个空对象
        var obj = {
            // 三个属性 一个方法
            uname: '张三',
            uage: 18,
            usex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        // 调用对象的方法
        obj.sayHi();
        // 调用对象的属性  两种方法：对象名.属性名、对象名['属性名']
        console.log(obj.uname); //更常用
        console.log(obj['uage']);



        // 2.利用 new Object创建对象   利用=赋值的方法追加对象的方法和属性。
        // 语法结构：
        // 对象名 = new Object();
        // 对象名.属性 = 值;
        // 对象名.方法名 = function () {}
        var person = new Object(); //创建一个空对象
        person.uname = '李四';
        person.uage = 20;
        person.usex = '男';
        person.sayHi = function () {
            console.log('我是李四');
        }
        person.sayHi();


        //3.使用构造函数创建对象
        // 构造函数：就是初始化对象，泛指某一类事物,把相同的属性和方法抽象出来封装到函数里。
        // 对象：某一类事物中的一个具体事物
        // 构造函数创建对象的过程又叫对象的实例化
        // 语法结构：
        // function 构造函数名(形参【可有，也可没有】) {
        //     this.属性 = 值
        //     this.方法 = function(形参【可有，也可没有】) {}
        // }
        function Start(uname, uage, usex) {
            this.name = uname;
            this.age = uage;
            this.sex = usex;
            // 构造函数里的方法
            this.do = function (doting) {
                console.log(doting);
            }
        }
        //1.一般构造函数名首字母大写
        //2.没用return 直接返回一个对象
        //3.构造函数必须用new 创建

        // 调用构造函数  new 构造函数名();
        var lyf = new Start('李易峰', 32, '男'); //调用函数返回的是一个对象
        console.log(lyf.name);
        console.log(lyf['age']);
        lyf.do('演员、歌手');
    </script>
</head>

<body>

</body>

</html>

今天到这里了先。