当前位置: 首页 > news >正文

【前端攻城师之JS基础】02JS对象基础

1.对象的基本操作/new关键字创建一个对象

  1. 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性,在js中除了基本类型,剩下的都是对象

  2. 对象的分类

    • 内建对象:由ES标准指定好的对象,在任何ES的实现中可以直接拿来使用 例如Object ,数组,和Funtion对象
    • 宿主对象:由JS的运行环境提供的对象,
    • 目前来讲主要是指浏览器提供的对象,包括DOM(文档对象模型)和BOM(浏览器对象模型)
    • 自定义对象:由前端开发人员自己创建的对象
  3. 方法一:使用new关键字创建一个对象

    使用new关键字调用的函数是构造函数,构造函数是专门用来创建对象的函数

    使用typedef 关键字检查一个对象时,会返回object

    var obj=new Object( );

  4. 向对象中添加/修改属性

    在对象中保存的值称为属性

    语法 :对象名.属性名=属性值 ; person.nam,e=“张三”;

  5. 读取对象的属性

    如果读取对象中没有的属性,则会返回undefined

    语法 :对象名.属性名

  6. 删除对象的属性

    语法 :delete 对象名.属性名

2.属性名和属性值

  1. 属性名

    • 对象的属性名没有强制要求标识符的规范,什么乱七八糟的名字都可以使用

      但是我们还是尽量按照标识符的标准去定义

      person.var=“hello”;不会报错

    • 如果要使用特殊的属性名,不能采用对象.属性名的方式

      而应该使用对象[“属性名”]=属性值来使用

      person[“sf# %# %Edf”]=123;

    • 使用【】这种形式更加灵活,在【】中可以直接传递一个变量,属性就会从变量值中读取得到

  2. 属性值

    js中的属性值可以是任何类型(五个基本数据类型和一个对象)

  3. in运算符

    通过该运算符可以判断一个对象中是否含有指定的属性,返回值是true,或false

    语法:“属性名” in 对象名

3.基本数据类型和引用类型

  1. 基本数据类型

    基本数据类型的值直接在栈内存中存储,值与值之间互相独立,修改一个变量不会影响其他的变量

  2. 引用类型

    • 对象是在堆内存中存储,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,而变量保存的是对象的引用(地址),如果两个变量保存的是同一个对象的引用,这两个变量会相互影响,当通过一个变量修改属性时,另一个变量也会跟着改变

    • 时刻牢记 对象赋值的变量,它本身就不是对象,而是一个存着对象地址的变量

      当从一个变量向另一个变量复制引用类型的值时,会将对象的引用复制到变量中,并不是创建一个新的对象。

  3. 比较

    当比较两个基本数据类型时,就是比较值

    而比较两个引用数据类型时,它是比较对象的内存地址

4.使用字面量创建一个对象

  1. 使用字面量可以在创建对象的同时直接指定对象中的属性

    语法:{属性名:属性值,属性名:属性值,属性名:属性值}

    var person={

    }

  2. 对象字面量的属性名可以加引号也可以不加引号,建议不加

    如果属性名是特殊字符,则建议加上引号 比如numbers.a的属性名就要加上引号 ‘numbers.a’

  3. 属性名和属性值是一组键值对,多组键值对之间用 , 分隔,如果一个属性之后没有其他属性了,则不要加 ,

  4. 对象里面的属性值 仍然可以是一个对象

5.函数的简介

  1. 函数也是一个对象,对象能干的事函数都能干

  2. 方法一:用构造函数创建一个函数

    var fun1=fun(“console.log(“hello”)”)

    创建一个函数对象,可以将要封装的代码以字符串的形式传递给构造函数,封装好的函数不会直接执行,只有调用函数才会执行封装的代码

  3. 方法一:使用函数声明来创建一个函数

    语法 function 函数名([参数1,参数2,参数N]){

    }

  4. 方法三:使用函数表达式创建函数

    原理 :创建一个匿名函数,然后将函数赋值给一个变量

    语法 :var fun3=function([参数1,参数2,参数N]){

    }

    整个是一个赋值语句,最后要写好分号

6.函数的参数和返回值

1.实参

  • 调用函数时,解析器不会检查实参的类型,所以要注意是否存在接受非法的参数的情况,要对参数进行类型的检查

  • 函数的实参可以时任意的数据类型,也可以是一个对象,当我们参数过多时,可以将多个实参封装成一个对象,传给函数

  • 调用函数时,解析器也不会检查实参的个数,多余的实参不会被赋值,如果实参的个数少于形参,那么没有对应实参的形参的值会被赋值成undefined

  • 函数的实参也可以是函数,因为函数也是对象,这种调用方式就相当于,实参和形参是同一个函数对象,这种方式在开发中比较常见,我们通常会把一个匿名函数作为实参传递给形参

  • fun( sum( ) )这种方式相当于使用函数的返回值

    fun( sum )这种方式相当于直接使用函数对象

    有括号的是返回值,没括号的是函数对象

2.返回值

  • 可以使用return 来设置函数的返回值,语法:return 值,return后的值会作为函数的执行结果返回,可以定义一个变量来接受该结果
  • 如果return 中不写任何值,或者没有返回值,函数会返回undefined
  • return 可以返回任意数据类型的值,也可以是一个对象也就是说还能返回一个函数(因为函数本身就是一个对象)
  • 函数return语句后的所有代码都不会执行

7.立即执行函数

立即执行函数 在声明的时候就会执行,而且只会执行这一次

 (function(){alert("我是一个匿名函数");*//给匿名函数外面加上括号,代表是一个整体的函数对象,就不会报错*})();

// 例子(function(a,b){

​      console.log(a);

​      console.log(b);})(4,6);

8.对象的方法

1.对象的方法

对象的属性值也可以是函数

  1. 如果一个函数是一个对象的属性值,那么这个函数称为这个对象的方法,调用这个函数称为调用这个对象的方法
   obj.name="张三"

   obj.sayName=function(){

   console.log(obj.name);

   }

   obj.sayName()得到的值是张三

   SayName()函数是obj对象的方法
  1. obj.sayName()调方法

    fun( )调函数

2.对象的枚举

使用for in语法实现

语法 for( var 变量 in 对象){

}

 for...in  语句,对象有几个属性,循环就会执行几次,每执行一次,都会将对象的属性名赋值给变量

 for  n in obj{

  console.log( obj[ n ] ) //使用点运算符无效,obj.n返回undefined,因为obj对象中没有n这个属性名

  }

9.两个作用域

作用域指一个变量的作用范围

在JS中一共有两种作用域

1.全局作用域

  • 直接编写在script标签里面的代码,都在全局作用域内

  • 全局作用域在页面打开时创建,页面关闭时销毁

  • 在全局作用域中有一个对象window,它由浏览器创建,在开发时我们可以直接使用

  • 在作用域中,没有使用var关键字声明的变量都会成为全局变量

  • 在全局作用域中

    所有的变量都会作为window对象的属性保存

    所有的函数都会作为window对象的方法保存

2.函数作用域

  • 调用函数时,函数作用域创建,函数调用结束,函数作用域销毁

  • 每调用一次函数就会创建一个新的函数作用域,多个函数作用域之间是相互独立的

  • 当函数作用域操作一个变量时,会在自身作用域中寻找,如果有就直接使用,没有就向上一级作用域寻找

  • 在函数中如果想要使用全局变量,可以使用window对象

  • 在函数中使用var关键字声明的变量,也会在函数内部所有代码执行之前声明

  • 函数声明也会在函数内部所有代码执行之前执行

  • 在函数中,没有使用var关键字声明的变量都会成为全局变量

  • 函数的形参相当于在函数内部声明了一个变量

3.变量的声明提前

  • 使用var关键字声明的变量,会在所有代码执行之前被声明(但是不会赋值)

  • 如果声明变量时不使用var关键字,则声明不会提前

4.函数的声明提前

使用函数声明语句创建的函数,会在所有代码执行之前创建,所以我们可以在此函数的声明之前调用该函数

使用函数表达式语句创建的函数,不会被提前创建,所以不能在声明前调用

相关文章:

  • 【C/C++】程序环境,探索程序的执行过程(习得无上内功《易筋经》的第一步)
  • 计算机网络——基于UDP与TCP网络编程
  • 中兴设备18种命令模式总结大全,全网第一篇,强烈建议收藏!
  • 【学生管理系统】权限管理
  • NLP学习之:Bert 模型复现(1)任务分析 + 训练数据集构造
  • 【PTA】《数据结构与算法》线性结构复习题
  • Java利用工具类提升写报表效率
  • RFSoC应用笔记 - RF数据转换器 -14- RFSoC自动增益控制与NCO跳频功能
  • 大数据Hadoop之——Apache Hudi 数据湖实战操作(Spark,Flink与Hudi整合)
  • 智能机器人项目,安装人脸识别face_recognition报错解决
  • EMQX(emqtt)安装与入门
  • ansible常用模块的用法和ansible基于模块方式实现LNMP
  • ArcGIS || ENVI:如何将彩色影像拆分为R、G、B以及H、S、I(B/V)影像?
  • 【英语:基础进阶_原著扩展阅读】J6.原著阅读实战训练
  • SpringBoot学习1—安装与配置
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • CSS 专业技巧
  • ECMAScript6(0):ES6简明参考手册
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • JS+CSS实现数字滚动
  • JS函数式编程 数组部分风格 ES6版
  • Laravel 实践之路: 数据库迁移与数据填充
  • react 代码优化(一) ——事件处理
  • Webpack入门之遇到的那些坑,系列示例Demo
  • 从0到1:PostCSS 插件开发最佳实践
  • 基于遗传算法的优化问题求解
  • 技术胖1-4季视频复习— (看视频笔记)
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • 原生Ajax
  • d²y/dx²; 偏导数问题 请问f1 f2是什么意思
  • ​云纳万物 · 数皆有言|2021 七牛云战略发布会启幕,邀您赴约
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • #162 (Div. 2)
  • #define、const、typedef的差别
  • #if 1...#endif
  • #宝哥教你#查看jquery绑定的事件函数
  • (arch)linux 转换文件编码格式
  • (Java实习生)每日10道面试题打卡——JavaWeb篇
  • (Note)C++中的继承方式
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (pojstep1.1.2)2654(直叙式模拟)
  • (多级缓存)缓存同步
  • (二开)Flink 修改源码拓展 SQL 语法
  • (黑马C++)L06 重载与继承
  • (七)c52学习之旅-中断
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • (转)Sql Server 保留几位小数的两种做法
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .NET学习教程二——.net基础定义+VS常用设置
  • []常用AT命令解释()
  • [AIGC 大数据基础]hive浅谈
  • [BZOJ4016][FJOI2014]最短路径树问题
  • [C puzzle book] types