Web前端-JavaScript（对象）

文章目录

    • 1.对象
      • 1.1 概念
      • 1.2 创建对象三种方式
        • **对象字面量创建对象**：
        • new Object创建对象
        • 构造函数创建对象
      • 1.3 遍历对象
    • 2.作用域
      • 1.1 概述
      • 1.2 全局作用域
      • 1.3 局部作用域
      • 1.4 JS没有块级作用域
      • 1.5 变量的作用域
      • 1.6 作用域链
      • 1.7 预解析

1.对象

1.1 概念

  1. 什么是对象

    1. 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，万物皆对象，对象是由属性和方法组成的。

      1. 属性：事物的特征，在对象中用属性来表示（常用名词）
      2. 方法：事物的行为，在对象中用方法来表示（常用动词）
      image-20230219205510742

  2. 为什么需要对象

    1. 保存一个值时，可以使用变量，保存多个值时，可以使用数组。

    2. 如果要保存一个人的完整信息呢？

      例如，将张三的个人的信息保存在数组中的方式为：

      var arr = ['张三', '男', 23];

      上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清楚所有的数据的排行才能准确地获取数

      据，而当数据量庞大时，不可能做到记忆所有数据的索引值。

      使用对象：

       var zs = {
            name: "张三", //键值对
            sex: "男",
            age: 23
					}

1.2 创建对象三种方式

对象字面量创建对象：

  1. 键：相当于属性名

  2. 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

var star = {
            name : 'pink',
            age : 18,
            sex : '男',
            sayHi : function(){
                alert('大家好啊~');
            }
				};
  1. 对象的使用

  • 对象的属性

    • 对象中的 键称为对象的属性，即对象中存储具体数据的项

  • 访问对象的属性

    • 对象里面的属性调用 : 对象.属性名

    • 对象里面属性的另一种调用方式 : 对象['‘属性名’]

    console.log(star.name) // 调用名字属性
    console.log(star[‘name’]) // 调用名字属性

  • 调用对象的方法

    • 对象里面的方法调用：对象.方法名()

    star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

  • 修改变量属性

    start.age = 22
start['age'] = 23
new Object创建对象

  1. 创建空对象

    var andy = new Object();

  2. 给空对象添加属性和方法

    1. 通过对象操作属性和方法的方式，来为对象增加属性和方法
    2. Javascript的动态特性：可以随时的为对象增加一些成员，方法是对象.属性=’ ’
    var andy = new Obect();

andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}
构造函数创建对象

  1. 我们为什么需要构造函数

    因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制

  2. 构造函数注意事项

    1. 构造函数约定首字母大写
    2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
    3. 构造函数中不需要 return 返回结果。
    4. 当我们创建对象的时候，必须用 new 来调用构造函数。
    5. 创建对象，如 new Person()，通过 new 关键字创建对象的过程我们也称为对象实例化
    //1.自定义构造函数
function Person(name, age, height) {
    this.name = name
    this.age = age
    this.height = height
}
    //2.创建对象
var zs = new Person("张三",23,181);
var ls = new Person("李四",24,182);
console.log(zs.name)
console.log(ls.name)

1.3 遍历对象

for in

for (var 变量 in 对象名字) {
    
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

//1.自定义构造函数
function Person(name, sex, age) {
    this.name = name
    this.sex = sex
    this.age = age
}

//2.创建对象
var zs = new Person("张三", '男', 23);
for (var key in zs) {
    //console.log(key);
    console.log(zs[key]);
}

删除对象的成员：属性及方法使用关键字delete

function Person(name, sex, age, eat) {
    this.name = name
    this.sex = sex
    this.age = age
    this.eat = eat
}

//创建对象
var zs = new Person("张三", '男', 23, function () { console.log('eat'); });

console.log(zs.age);
delete zs.age
console.log(zs.age);

zs.eat()
delete zs.eat //不可以加()
zs.eat()//调用失败

2.作用域

1.1 概述

​ 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

1.2 全局作用域

​ 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.3 局部作用域

​ 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，也称为函数作用域。

1.4 JS没有块级作用域

  • 块作用域由 { } 包括。

  • 在其它编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用。

    java有块级作用域：

    if(true){
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错

    而与之类似的JavaScript代码，则不会报错：

    Js中没有块级作用域

    if(true){
  var num = 123;
  console.log(num); //123
}
console.log(num);   //123

1.5 变量的作用域

  1. 全局变量

    1. 在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）
    2. 全局变量在代码的任何位置都可以使用
    3. 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
    function add() {
  a = 3;//全局变量 一般不用
  console.log(a);
}
add();//函数必须被执行起来
console.log(a);

  2. 局部变量

    1. 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
    2. 局部变量只能在该函数内部使用
    3. 在函数内部 var 声明的变量是局部变量
    4. 函数的形参实际上就是局部变量
    function add() {
    var a = 3
    console.log(a);
}
add()
console.log(a);//访问不到

  3. 全局变量和局部变量的区别

    1. 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；

    2. 局部变量：只在函数内部使用，当其所在的代码块的函数被调用执行时，会被初始化；

      ​ 当代码被调用的函数代码块运行结束后，就会被销毁，因此更节省内存空间；

1.6 作用域链

  1. 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
  2. 根据在**[内部函数可以访问外部函数变量]**的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值 这种结构我们称为作用域链

采取就近原则

案例分析1：

function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();
image-20230219205837175

案例分析2：

var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();
image-20230219205916047

1.7 预解析

奇怪问题1：

console.log(num);
var num = 5;

奇怪问题2：

f1();
function f1(){
		console.log('hello')
}

  1. 预解析相关概念

    1. 浏览器执行代码的时候分两步：预解析和代码执行。
    2. 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
    3. 代码执行： 从上到下执行JS语句。
    4. 预解析会把变量和函数的声明在代码执行之前执行完成。

  2. 变量预解析

    1. 变量预解析也叫做变量提升。
    2. 变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
    console.log(num);  // 结果是多少？
var num = 10; 

    结果：undefined
注意：变量提升只提升声明，不提升赋值

  3. 函数预解析

    1. 函数预解析也叫函数提升。
    2. 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
    fn();
function fn() {
    console.log('未来可期');
}

    结果：'未来可期'
注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！

    提升之后：

    function fn() {
    console.log('未来可期');
}
fn();

  4. 匿名函数问题

    匿名函数会执行变量提升，此时接收函数的变量名无法正确的调用：

    fn();
var  fn = function() {
    console.log('未来可期');
}

    结果：报错提示 ”fn is not a function"
解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用

    提升之后：

    var fn;
fn();
fn = function () {
    console.log('未来可期');
}

  5. 总结：

    1. 我们js引擎运行js 分为两步： 预解析 代码执行
      1. 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
      2. 代码执行 按照代码书写的顺序从上往下执行
    2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
      1. 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
      2. 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

预解析案例：

// 案例1
var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}

//预解析之后------------------

var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();




//案例2
var num = 10;
function fn() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();

//预解析之后------------------

var num;
function fn() {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fn();




// 案例3
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}

//预解析之后------------------

var a;
function f1() {
    var b = 9;
    var a;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
f1();

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu 磁盘管理DF命令用法

Ubuntu 磁盘管理DF命令用法

Linux磁盘空间管理是系统运维中的核心环节，它直接影响到系统的稳定运行、数据的安全性和业务的连续性。 通过实施有效的磁盘空间管理策略，系统管理员可以确保系统的高效运作，满足不断变化的业务需求，并为用户提供可靠的服务。 因此…
阅读更多...
【YOLOv8新玩法】姿态评估解锁找圆心位置

【YOLOv8新玩法】姿态评估解锁找圆心位置

前言 Hello大家好，今天给大家分享一下如何基于深度学习模型训练实现圆检测与圆心位置预测，主要是通过对YOLOv8姿态评估模型在自定义的数据集上训练，生成一个自定义的圆检测与圆心定位预测模型 制作数据集 本人从网络上随便找到了个工业工件…
阅读更多...
自动标注软件AnyLabeling安装

自动标注软件AnyLabeling安装

AnyLabeling自动标注软件介绍 该工具作为一个具有Segment Anything和YOLO模型的智能标签工具，可以快速、准确地对图像进行标注。 AnyLabeling LabelImg Labelme Improved UI Auto-labeling 在Python终端运行 pip install anylabeling启动AnyLabeling anylabe…
阅读更多...
危险品内陆运输相关知识_箱讯科技

危险品内陆运输相关知识_箱讯科技

危险品拖车 危险品拖车运输是一项涉及到高度危险物质的专业工作，需要确保合法合规的运输，并提供必要的信息以保障公共安全。进行这类运输时，需要携带一系列文件和具备特定的资质。 什么样的车适合做危险品拖车? 1、车辆类型：通…
阅读更多...
长三角安防行业盛会“2024杭州安博会”4月份在杭州博览中心召开

长三角安防行业盛会“2024杭州安博会”4月份在杭州博览中心召开

作为中国安防行业的盛会，2024杭州安博会将于4月份在杭州国际博览中心隆重召开。本届安博会将汇聚全球最先进的安防技术和产品，为来自世界各地的安防从业者、爱好者以及投资者提供一个交流、展示和合作的平台。 据了解，2024杭州安博会将会展示…
阅读更多...
Windows11系统下如何通过.cab文件更新PL2303串口驱动？

Windows11系统下如何通过.cab文件更新PL2303串口驱动？

Windows11系统下如何通过.cab文件更新PL2303串口驱动？ 首先，在微软官方网站上下载所需版本的.cab文件，具体链接如下： https://www.catalog.update.microsoft.com/Search.aspx?q=Prolific%20USB-to-Serial%20Comm%20Port 如下图所示，进入该网站后，找到自己所需的驱动版…
阅读更多...
IPD产品开发的三类变更的含义和在流程中的位置

IPD产品开发的三类变更的含义和在流程中的位置

在基于IPD的产品开发过程中，变更仍然不可避免，甚至变更比基于传统流程的产品开发更多，因为IPD的产品开发是盯着市场变化、快速响应市场需求的，而这个世界唯一的不变就是变。那么，我们如何对产品开发过程中的变更进行分…
阅读更多...
智能网络与网络安全：全球发展与未来趋势

智能网络与网络安全：全球发展与未来趋势

导言 随着数字化时代的到来，智能网络和网络安全成为科技领域的研究热点。本文将深入研究智能网络与网络安全的发展过程、遇到的问题、解决过程，以及未来的可用范围。同时，关注各国在这一领域的应用情况和未来研究的趋势，以便在全球…
阅读更多...
期货交易策略模拟测试-基于CLBISO01策略-2023.12.22

期货交易策略模拟测试-基于CLBISO01策略-2023.12.22

采取与昨天同样的策略进行盘中模拟测试，今天行情还可以，挺“顺溜”。
阅读更多...
Xcode15 iOS 17 Simulator 离线安装，模拟器安装

Xcode15 iOS 17 Simulator 离线安装，模拟器安装

Xcode 15 安装包的大小相比之前更小，因为除了 macOS 的 Components，其他都需要动态下载安装，否则提示 iOS 17 Simulator Not Installed。 如果不安装对应的运行模拟库 无法真机和模拟器运行，更无法新建项目。但是由于模拟器安装包…
阅读更多...
拖拽列表简单实现

拖拽列表简单实现

样式部分&#xff1a; <style>.item {width: 500px;text-align: center;margin-bottom: 5px;height: 40px;line-height: 40px;border-radius: 5px;color: #fff;margin: 5 auto;background-color: red;}.item.moving {background: transparent;color: transparent;border…
阅读更多...
JNI学习(二)

JNI学习(二)

静态注册 接着上篇博客学习 JNI函数 JNIEXPORT void JNICALL Java_com_example_jnidemo_TextDemo_setText(JNIEnv *env, jobject this, jstring string){ __android_log_print(ANDROID_LOG_ERROR, "test", "invoke set from C\n");char* str (char*)(*e…
阅读更多...
【mongoose】 Model.create() no longer accepts a callback 报错解决

【mongoose】 Model.create() no longer accepts a callback 报错解决

在最新版的 mongoose 操作 MongoDB 数据库的时候&#xff0c;当我们插入一条数据时候&#xff0c;会报错 &#xff1a;Model.create() no longer accepts a callback&#xff0c;看了很多文章都说是&#xff0c;版本太高&#xff0c;都妥协选择了降低回旧版本&#xff0c;但我就…
阅读更多...
HotRC DS600遥控器+F-06A接收机

HotRC DS600遥控器+F-06A接收机

PWM原理说明 DS600遥控器说明 DS600遥控器的默认高电平是1.5ms 1通道 左右 2通道 前后 3通道 接管 上电后是1ms &#xff0c;按一下是2ms&#xff0c;1ms和2ms切换 DS600接收机说明 */ #include "ps2.h" #include "common.h"#define LEFT_RIGHT_CHAN…
阅读更多...
centos7安装开源日志系统graylog5.1.2

centos7安装开源日志系统graylog5.1.2

安装包链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1Zl5s7x1zMWpuKfaePy0gPg?pwd1eup 提取码&#xff1a;1eup 这里采用的shell脚本安装&#xff0c;脚本如下&#xff1a; 先使用命令产生2个参数代入到脚本中&#xff1a; 使用pwgen生成password_secret密码 …
阅读更多...
数据库——事务

数据库——事务

智能2112杨阳 一、目的与要求&#xff1a; 1.熟悉提交事务 2.回滚事务 3.检查点技术 注&#xff1a;可以用可视化软件来实现 二、内容&#xff1a; 基于现有数据库设计事务提交、事务回滚、及检查点实验&#xff0c;观察比较提交前后执行结果并分析。 源码&#xff1a…
阅读更多...
管控品牌价格就是在维护品牌价值

管控品牌价格就是在维护品牌价值

当品牌各渠道中存在低价、乱价链接时&#xff0c;品牌首先应针对这些低价链接的不同现状进行管控&#xff0c;使链接不再低价&#xff0c;或者被下架删除链接&#xff0c;这些就是有效的价格管控流程&#xff0c;品牌价格被稳定住&#xff0c;也是在维护和稳定品牌价值。 品牌价…
阅读更多...
Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏

Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏

Vue表格中鼠标移入移出input显示隐藏 , 不再隐藏的效果 <el-tableref"table":data"tableDatas"borderstyle"width: 100%":span-method"arraySpanMethod"id"table"row-key"id"cell-mouse-enter"editCell&q…
阅读更多...
mysql主从复制(在虚拟机centos的docker下)

mysql主从复制(在虚拟机centos的docker下)

1.安装docker Docker安装(CentOS)简单使用-CSDN博客 2.部署2个mysql docker run --name some-mysql1 -p 33061:3306 -e MYSQL_ROOT_PASSWORD123456 -d mysql:5.7 --character-set-serverutf8mb4 --collation-serverutf8mb4_unicode_cidocker run --name some-mysql2 -p 330…
阅读更多...
Ubuntu 常用命令之 chown 命令用法介绍

Ubuntu 常用命令之 chown 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 chown 命令在 Ubuntu 系统中用于改变文件或目录的所有者和组。这个命令的基本格式是 chown [选项]... [所有者][:[组]] 文件...。 chown 命令的主要参数有 -c 或 --changes&#xff1a;类似 verbose&#xff0c;但只在发生改变时…
阅读更多...
最新文章

Copyright @ 2022~2023