10.JS笔记-对象

news2025/1/12 6:19:10

1、什么是对象

对象是一个具体的事物,在js中,对象是一组无序的属性和方法的集合
属性:事物的特征
方法:事物的行为

2、创建对象

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

2.1 变量、属性和方法、函数的区别

变量和属性:
相同点:存储数据
不同点:

  • 变量是单独声明和赋值,使用时直接写变量名
  • 属性是在对象里不需要声明(没有var),使用时是用对象.属性名

函数和方法:
相同点:实现某种功能,做某件事
不同点:

  • 函数是单独声明,调用时直接写函数名()
  • 方法是在对象里声明的,调用时用对象.方法名()

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>Document</title>
    <script>
        // 字面量创建对象:
        // 属性或方法采用键值对的形式
        // 多个属性或方法用逗号分开
        // 方法名:匿名函数
        var obj={
            username:'张三',
            age:18,
            sayHi:function(){
                console.log('hi~');
            }
        }
        // 使用对象
        // 1、对象名.属性名或者对象名['属性名']
        console.log(obj.username,obj['age']);
        // 2、调用对象方法 对象名.方法名()
        obj.sayHi();


    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.3 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>Document</title>
    <script>
        // 利用new Object创建对象
        // 使用等号=赋值的方式,每个属性和方法用;分开
        var obj = new Object();
        obj.username = '里斯';
        obj.age = 12;
        obj.sayHi = function () {
            console.log('hi~');
        }
       console.log(obj.username);
       obj.sayHi();

    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.4 利用构造函数创建对象

前两种创建对象的方式一次只能创建一个对象,如果需要多个对象,使用这两种方式会发现很多代码是重复的
在这里插入图片描述

因此可以利用函数的方式,将这些重复的代码封装到函数中,我们称为构造函数,构造函数里封装的是对象
构造函数就是把对象中的一些相同的属性和方法抽象出来封装到函数里
构造函数:一种特殊的函数,用来初始化对象,为对象成员变量赋初始值,它总和new运算符一起使用

声明:
function 构造函数名(){
	this.属性=值;
	this.方法=function(){}
}
调用:
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>Document</title>
    <script>
        // 利用构造函数创建对象
        // 1、构造函数名首字母大小
        // 2、构造函数不需要return就可以返回结果
        function Star(username, age) {
            this.username = username;
            this.age = age;
            this.sing=function(sing){
                console.log(sing);
            }
        }
        //3、调用构造函数,必须使用new
        var wyb = new Star('王一博', 26);
        console.log(typeof wyb);
        console.log(wyb.username);
        wyb.sing('像阳光一样');
        var lb = new Star('李饼', 500);
        console.log(typeof lb);
        console.log(lb.username);
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.5 对象和构造函数的区别

构造函数:泛指的某个大类,类似于java中的类
对象:是某个具体的事物
利用构造函数创建对象的过程,也叫做对象的实例化

2.6 new关键字执行过程

1、遇到new时,构造函数在内存中(堆)创建了一个空的对象,
2、this会指向刚才创建的空对象、
3、开始执行构造函数的代码,给空对象添加属性和方法
4、返回这个对象(不需要return)

3、遍历对象属性和方法

for…in语句用于对数组或对象的属性进行循环操作

for(变量 in 对象){
}
<!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>Document</title>
    <script>
        var obj={
            username:'me',
            age:18,
            fn:function(){
                console.log('aa');
            }
        }
        // 使用for in里的变量喜欢用k或key
        for(var k in obj){
            console.log(k);//k输出得到变量名
            console.log(obj[k]);//得到属性值
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/145994.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

人工智能的核心技术是什么?

&#xff08;本文阅读时间&#xff1a;5分钟&#xff09;人工智能的核心技术是它的算法被广泛认可的「算法」专业定义是&#xff1a;算法是模型分析的一组可行的&#xff0c;确定的&#xff0c;有穷的规则。基于规则的人工智能上个世纪六七十年代出现的早期人工智能系统都是基于…

VueJs中如何自定义hooks(组合式)函数

前言在Vue当中,一个非常重要的功能就是组件的复用,编写Vue组件,更多的也是在拼装组件,将页面的各个功能进行模块化便于维护和管理,而在项目里,有些页面中的组件的逻辑功能是一样的,如果没有进行功能逻辑的复用,那么每个页面都需要重复的写一遍在Vue当中各个组件是保持独立的,如…

一份职业游戏3D建模师日常工作流程列表,看完不信还有人说建模门槛低

随着游戏行业的发展&#xff0c;越来越多的人开始对这个行业感兴趣&#xff0c;因此有很多的小伙伴梦想成为一个游戏模型师&#xff0c;成为游戏行业里的一员。但是很多人都对这个工作具体是做什么的并不是很了解&#xff0c;下面&#xff0c;我们就来说说游戏模型师的主要工作…

Word处理控件Aspose.Words功能演示:使用 C# 将 DOCX 转换为 HTML

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c; Aspose API支持流行文件格式处…

Javascript:Class构造函数

为什么需要class 在其他语言中class已经是一个早就被实现的功能&#xff0c;在JavaScript中一直到ES6被实现。在class没有实现之前我们是这样写的&#xff08;如下代码&#xff09; function Person(name,sex){this.name this.sex } Person.prototype.sayfunction(){alert(h…

金融类的APP该如何进行ASA推广

移动理财成为新金融的主流&#xff0c;在如今&#xff0c;金融机构都在争相推出自己的移动理财产品&#xff0c;那今天柚鸥ASO就来给大家讲一下&#xff0c;金融类的APP在进行ASA前的一些注意事项。 APP进行ASA前的开户有两种&#xff1a; 自主开户&#xff08;1&#xff0c;…

检测物理内存容量

文章目录前言前置知识BIOS 中断 0x15 子功能 0xe820 获取内存代码说明实验操作前言 本博客记录《操作系统真象还原》第五章实验操作~ 实验环境&#xff1a;ubuntu18.04VMware &#xff0c; Bochs下载安装 实验内容&#xff1a;三种检测内存的方法。 实验原理&#xff1a; …

volaile关键字详解!

文章目录什么是volatile &#xff1f;volatile三大特性volatile如何使用volatile保证可见性volatile不保证原子性volatile禁止指令重排volatile总结什么是volatile &#xff1f; volatile是一个Java关键字volatile是Java虚拟机提供的轻量级的同步机制 volatile三大特性 保证…

【服务器搭建个人网站】教程五:手把手教你怎样进行公安备案 快来学~

前言 购买一台服务器&#xff0c;再来个域名&#xff0c;搭建一个自己的个人博客网站&#xff0c;把一些教程、源码、想要分享的好玩的放到网站上&#xff0c;供小伙伴学习玩耍使用。我把这个过程记录下来&#xff0c;想要尝试的小伙伴&#xff0c;可以按照步骤&#xff0c;自己…

【Qt】将QtDesigner生成的.ui文件转化为.h头文件

【Qt】将QtDesigner生成的.ui文件转化为.h头文件1、背景2、实例3、附件1、背景 操作系统&#xff1a;windows10专业版。 Qt版本&#xff1a;qt-opensource-windows-x86-msvc2013_64-5.7.1.exe 博主的Qt安装目录&#xff1a;E:\E01_cppIDE\E01_qt\install 并将安装后的bin目录…

校园wifi网页认证登录入口

一、校园WIFI自助服务简介在我校校园网认证业务中&#xff0c;教职工校园通行证账号支持最大3个终端同时在线&#xff0c;如果超出最大在线数&#xff0c;最后上线的终端会把第一个上线的终端踢下线&#xff0c;导致终端经常掉线&#xff0c;需要重新登录才可上网。那么&#x…

【Linux】基础:基础IO

【Linux】基础&#xff1a;基础IO 摘要&#xff1a;本文基础IO的内容将从过往熟悉的C语言文件操作出发&#xff0c;引申指系统调用的文件操作&#xff0c;再进一步深化为对于进程管理的文件进行介绍&#xff0c;从而了解文件描述符的概念和管理方式&#xff0c;其中还会介绍其运…

2022 IoTDB Summit:京东刘刚《Apache IoTDB 在京东万物互联场景中的应用》

12 月 3 日、4日&#xff0c;2022 Apache IoTDB 物联网生态大会在线上圆满落幕。大会上发布 Apache IoTDB 的分布式 1.0 版本&#xff0c;并分享 Apache IoTDB 实现的数据管理技术与物联网场景实践案例&#xff0c;深入探讨了 Apache IoTDB 与物联网企业如何共建活跃生态&#…

基于JavaSpringMvc+mybatis实现学生信息管理系统

基于JavaSpringMvcmybatis实现学生信息管理系统 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系…

IOS Theos Tweak 之 HelloWorld

一、目标 Theos是什么&#xff1f; 是一套跨平台的开发工具套件,不仅可以开发Ios&#xff0c;Mac、Windows和Linux也可以的哦&#xff0c;开源免费。 Tweak是什么&#xff1f; 可以理解成动态链接库&#xff0c;有搞过Windows下dll注入的同学应该可以秒懂了。Android的同学…

JavaWeb——redis_1/6

链接: day23_redis_代码&资料 提取码&#xff1a;ijyg 今日内容redis——数据库软件1. 概念2. 下载安装3. 命令操作1. redis的数据结构2. 字符串类型 string3. 哈希类型 hash4. 列表类型 list:可以添加一个元素到列表的头部&#xff08;左边&#xff09;或者尾部&#xff0…

硬件工程师成长之路(0)----认识元件

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录前言1、电阻①、贴片电阻②、金属膜电阻③、水泥电阻④、制动电阻⑤、电位器⑥、压敏电阻⑦、热敏电阻⑧、光敏电阻⑨、…

奇舞周刊478期:算法工程师深度解构 ChatGPT 技术

记得点击文章末尾的“ 阅读原文 ”查看哟~下面先一起看下本期周刊 摘要 吧~奇舞推荐■ ■ ■算法工程师深度解构 ChatGPT 技术本文用专业视野带你由浅入深了解 ChatGPT 技术全貌。它经历了什么训练过程&#xff1f;成功关键技术是什么&#xff1f;将如何带动行业的变革&#xf…

Spark学习(8)-SparkSQL的运行流程,Spark On Hive

1. SparkSQL的运行流程 1.1 SparkRDD的执行流程回顾 1.2 SparkSQL的自动优化 RDD的运行会完全按照开发者的代码执行&#xff0c; 如果开发者水平有限&#xff0c;RDD的执行效率也会受到影响。而SparkSQL会对写完的代码&#xff0c;执行“自动优化”&#xff0c; 以提升代码运…

In-Context Learning玩法大全

卷友们好&#xff0c;我是rumor。虽然ChatGPT在大众眼里的热度可能已经过去了&#xff0c;但它prompt出了我的焦虑&#xff0c;于是最近一直在补大模型相关的工作。比起小模型&#xff0c;大模型有一个很重要的涌现能力&#xff08;Emergent ability&#xff09;就是In-Context…