【JavaScript】4.JavaScript对象

最新推荐文章于 2024-09-09 18:01:48 发布
最新推荐文章于 2024-09-09 18:01:48 发布
阅读量556 收藏
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46293452/article/details/130005316
版权
文章介绍了JavaScript中对象的概念，包括它们由属性和方法组成。接着详细讲解了三种创建对象的方式：字面量创建、newObject创建以及使用构造函数创建。通过实例展示了如何创建并调用对象的属性和方法，强调了构造函数在初始化对象和复用代码中的作用。最后提到了new关键字的工作原理和遍历对象属性的方法。
摘要由CSDN通过智能技术生成

JavaScript 对象

1. 对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

  • 对象是由属性和方法组成的。
    • 属性：事物的特征，在对象中用属性来表示（常用名词）
    • 方法：事物的行为，在对象中用方法来表示（常用动词）

2. 创建对象的三种方式

  • 利用字面量创建对象

  • 利用 new Object 创建对象

  • 利用构造函数创建对象

2.1 利用字面量创建对象

属性或者方法 采取 键值对 的形式 键 属性名 : 值 属性值

  • 对象的调用
    • 对象里面的属性调用 : 对象.属性名
    • 对象里面属性的另一种调用方式 : 对象[‘属性名’]
    • 对象里面的方法调用：对象.方法名()
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用字面量创建对象</title>
    <script>
        // 利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
            uname: 'ich',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        // 对象的调用
        // 对象名.属性名
        console.log(obj.uname);
        // 对象名['属性名']
        console.log(obj['age']);
        // 调用对象的方法 对象名.方法名()
        obj.sayHi();
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.2 练习：创建一个名字为可可的狗对象

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个名字为可可的狗对象</title>
    <script>
        var keke = {
            name: '可可',
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            bark: function () {
                console.log('它会汪汪汪')
            },
            showFilm: function () {
                console.log('它会演电影');
            }
        }
        console.log(keke.name + '是' + keke.type + '，今年' + keke.age + '岁，' + '它是' + keke.color);
        keke.bark();
        keke.showFilm();
    </script>
</head>

<body>
    <!-- 请用对象字面量的形式创建一个名字为可可的狗对象 -->
    <!-- 
        姓名：可可 
        类型(type)：阿拉斯加犬
        年龄：5岁，
        颜色：棕红色。  
        技能：汪汪汪(bark) ，演电影 (showFilm)
     -->
</body>

</html>

在这里插入图片描述

2.3 利用 new Object 创建对象

Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用 new Object 创建对象</title>
    <script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.name = 'ich';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hi~');

        }
        // 利用 等号 = 赋值的方法 添加对象的属性和方法
        // 每个属性和方法之间用 分号结束
        console.log(obj.name);
        console.log(obj['sex']);
        obj.sayHi();
    </script>
</head>

<body>

</body>

</html>

2.4 请用new Object 形式创建一个鸣人对象

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请用new Object 形式创建一个鸣人对象</title>
    <script>
        var mingren = new Object();
        mingren.name = '鸣人';
        mingren.sex = '男';
        mingren.age = '19';
        mingren.skill = '影分身术';

        console.log(mingren.name + '是' + mingren.sex + '的，今年' + mingren.age + '岁，' + '他会' + mingren.skill);
    </script>
</head>

<body>
    <!-- 请用new Object 形式创建一个鸣人对象 -->
    <!-- 
        姓名：鸣人  
        性别：男 
        年龄：19岁  
        技能（skill）：影分身术
     -->
</body>

</html>

在这里插入图片描述

2.5 为什么需要使用构造函数

构造函数 ：
是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用
可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要使用构造函数</title>
    <script>
        // 为什么需要使用构造函数
        // 就是因利用 字面量 和 new Object 创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function () {
                console.log('冰雨');

            }
        }
        var zxy = {
            uname: '张学友',
            age: 58,
            sing: function () {
                console.log('李香兰');

            }
        }
        // 因为一次创建一个对象，里面很多的属性和方法是大量相同的 只能复制
        // 因此可以利用函数的方法 重复这些相同的代码 就把这个函数称为 构造函数
        // 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
        // 构造函数 就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>
</head>

<body>

</body>

</html>

2.6 利用构造函数创建对象

  • 注意
    • 构造函数约定首字母大写
    • 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
    • 构造函数中不需要 return 返回结果
    • 当创建对象的时候，必须用 new 来调用构造函数
// 构造函数的语法格式
function 构造函数名() {
    this.属性 = 值;
    this.方法 = function() {}
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用构造函数创建对象</title>
    <script>
        // 利用构造函数创建对象
        // new 构造函数名();
        function Star(uname, age, sex) { //构造函数名字首字母要大写
            // 属性和方法前面必须添加 this
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
            // 构造函数不需要return 就可以返回结果
        }

        // 调用构造函数 必须使用 new
        // new Star() 调用函数就创建一个对象 ldh {}
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');

        var zxy = new Star('张学友', 19, '男');
        console.log(typeof zxy);
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')
    </script>
</head>

<body>

</body>

</html>

2.7 利用构造函数创建两个英雄对象

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用构造函数创建两个英雄对象</title>
    <script>
        function Hero(name, type, blood, attack) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = attack;
            this.newHero = function () {
                console.log(this.name + ' 是 ' + this.type + '英雄，血量 ' + this.blood + '，属于' + this.attack + '攻击');
            }
        }

        var lp = new Hero('廉颇', '力量型', 500, '近战');
        var hy = new Hero('后羿', '射手型', 100, '远程');
        lp.newHero();
        hy.newHero();
    </script>
</head>

<body>
    <!-- 利用构造函数创建两个英雄对象 -->
    <!-- 
        函数中的公共部分包括：
            姓名属性(name)
            类型属性（type）
            血量属性（blood）
            攻击方式（attack） 
    -->
    <!-- 
        廉颇   力量型    500血量    攻击：近战
        后羿   射手型    100血量    攻击：远程
     -->
</body>

</html>

3. new关键字

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>new关键字执行过程</title>
    <script>
        // new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('ich', 18, '男');
    </script>
</head>

<body>

</body>

</html>

4. 遍历对象属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遍历对象</title>
    <script>
        // 遍历对象 
        var obj = {
            name: 'ich',
            age: 18,
            sex: '男',
            fn: function () { }
        }
        // console.log(obj.name);
        // console.log(obj.age);
        // console.log(obj.sex);

        // for in 遍历对象
        // for (变量 in 对象) {}
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值
        }

        for (var key in obj) {
            console.log(key + ' : ' + obj[key]);
        }
        // 使用 for in 里面的变量 我们喜欢写 k  或者  key
    </script>
</head>

<body>

</body>

</html>

GitHub代码
gitee代码

ich&du
关注
专栏目录
Educoder JavaScript学习手册四：JS对象
Junds0的博客
05-21 7849
第1关：对象的创建 (1)创建你的第一个JavaScript对象。使用对象字面量方法创建名为student的对象，有两个属性name和gender，他们的值分别是mainJs()函数的参数a和参数b； 使用已给的构造函数Car(plate,owner)创建一个对象myCar，它的两个属性的值分别是参数c和参数d； 使用原型创建一个对象myJob，它的构造函数是Job(company,salary)，它的两个属性的值已经被设置，你需要用参数e覆盖属性company的值； function Car(plate,
JS对象（对象的创建、属性的增删改查、属性的检测和枚举）
m0_46270930的博客
12-17 671
对象的创建 对象的定义 JavaScript中的一切都是对象，这是该语言的一个很大的特点。像字符串、数组等已经定义的对象叫做内置对象。用户自己也可以定义对象，叫做自定义对象。 下面介绍五种创建对象的方法，其中通过对象字面量和使用构造函数创建对象最常用。 对象字面量 这是最常用的创建对象的方法，通过新建一个键值对的集合（对象字面量）创建对象，如下： var song = { name:"Liekkas", time:180, "song language":English,
JavaScript学习手册四：JS对象
qq_45823118的博客
04-18 5623
JS对象引言A、对象的创建任务描述相关知识代码文件B、属性的增删改查任务描述相关知识代码文件C、属性的检测和枚举任务描述相关知识代码文件 引言 1、JavaScript是基于对象的语言，在JavaScript中，一切都可以被称为对象，包括字符串、数字、布尔型、HTML Element等。这些JavaScript中已有的对象称为内置对象，而用户自己定义的对象叫做自定义对象。自定义对象是数据和函数（也叫方法）的集合。 2、这里要特别提醒的是，JavaScript虽然也是一门基于对象的语言，但是它实现对象的
JS学习日记——对象
最新发布
2301_80170590的博客
09-09 276
等同于return v;
javascript权威指南学习笔记(4)--对象
tonysmile的博客
12-06 313
1、创建对象 2、属性查询和设置 3、删除和检测属性 4、属性特性、序列化对象
第8节 JavaScript对象.rar
03-02
第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 ...
JavaScript 对象.pdf
11-21
JavaScript 对象 JavaScript 中的对象是非常重要的概念，所有事物都是对象，包括字符串、数值、数组、函数等等。对象只是带有属性和方法的特殊数据类型。布尔型、数字型、字符串也可以是一个对象，日期是一个对象，...
第10节 JavaScript内置对象.rar
03-02
第10节 JavaScript内置对象.rar第10节 JavaScript内置对象.rar第10节 JavaScript内置对象.rar第10节 JavaScript内置对象.rar第10节 JavaScript内置对象.rar第10节 JavaScript内置对象.rar第10节 JavaScript内置对象....
JavaScript对象.xmind
09-14
自己总结的JavaScript对象的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
Noesis.Javascript.dll.zip
10-09
4. **数据交互**：可能有示例展示如何在 C# 和 JavaScript 之间传递数据，如创建 .NET 对象并将其暴露给 JavaScript，或者从 JavaScript 代码中获取返回值。 5. **错误处理**：可能包含对 `ExecuteScript` 方法可能...
EduCoder_web实训作业--JavaScript学习手册十二：Math、日期和异常处理
weixin_45803282的博客
01-07 6569
最近复习还有小黄本，可能出的频率有点慢了。 不过大家不要着急，截止前肯定我都会出完的。 还请大家多多关注，以及关注我的公众号啊！！ 第一关 //请在此处编写代码 /********** Begin **********/ return Math.min(Math.ceil(a), Math.floor(a), Math.round(a), Math.sqrt(a), Math.sin(a))+Math.max(Math.ceil(a), Math.flo.
JavaScript学习（四）——对象
weixin_45927758的博客
07-20 757
对象的分类： 1.内建对象 ——由ES标准中定义的对象，在任何的ES的实现中都可以使用 ——比如，Math String Number Boolean Function Object.... 2.宿主对象 ——由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象 ——比如BOM DOM 3.自定义对象 ——由开发人员自己创建的对象 JS对象的创建：后边的object()是对象的构造函数 var TuBoWen=new Object(); var TuBoWen={}; ...
JavaScript学习笔记4：对象
weixin_44253902的博客
05-17 160
1.为什么要有对象？ 五大基本数据类型只能表示独立的变量，对象属于一种复合的数据类型，可以把单一的数据属性放在一起，使其同属于一个对象，产生联系。 2.对象的分类： a.内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用 常见的有Math,String，Function b.宿主对象: 由Js的运行环境定义的对象 例如，BOM，DOM ab类型的对象不需要开发人员重新建立，即可使...
JavaScript学习手册（四）
qq_44934847的博客
03-08 598
这一部分主要讲述JavaScript的算术运算和逻辑运算和基本数据类型的字面量
四.javascript对象
weixin_61133168的博客
04-09 1434
一.对象的介绍 1.对象的概念 对象时一种复合型数据类型，可以将很多数据集中在一个单元中。对象通过属性来获取数据集中的数据，也可以通过方法来实现数据的某些功能 2.对象的属性 在JavaScript中，将包含在对象内部的变量称为对象的属性 设置对象的属性： 对象名.属性名 设置对象的属性值： pen.color="red"; pen.price=20; ...
前端基础之《JavaScript（4）—JS事件对象》
csj50的专栏
09-29 440
看到图片滚着滚着就加载，是靠滚动了多少高，要加载什么。1、文档的高，屏幕的文档区域的高（body的高）4、滚动的高度（滚动条从最上面往下滚动了多少）3、屏幕的总高度（窗口整个可滚动区域的高）2、有效的高，屏幕可视的高。一、元素对象常用属性。
JavaScript 学习笔记4_对象_20181204
BugLiu
12-05 228
/********************************************************************** ** author : Bugliu ** date : 2018-12-04 ** description : 对象 ** 学习网站 : www.liaoxuefeng.com *********************************...
JavaScript面向对象编程解析
"JavaScript面向对象指南.pdf" 在JavaScript中，面向对象编程是一种强大的技术，它允许开发者通过模拟现实世界中的实体来构建复杂的应用程序。在传统Web开发中，JavaScript主要用于简单的任务，如表单验证，但随着...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值