首页 > 编程语言 >JavaScript对象

JavaScript对象

时间:2023-06-24 17:12:23浏览次数:44  
标签:函数 对象 JavaScript 作用域 属性 Math 构造函数

JavaScript对象

  • Object类型,我们也称为一个对象。是JavaScript中的引用数据类型
  • 它是一种复合值,它将很多值聚合到一起,可以通过名字访问这些值
  • 对象也可以看做是属性的无序集合,每个属性都是一个key/value对
  • 对象除了可以创建自有属性,还可以通过从一个名为原型的对象那里继承属性
  • 除了字符串、数字、truefalsenullundefined之外,JS中的值都是对象

创建对象

创建对象有两种方式:

// 第一种
var person = new Object();
person.name = "孙悟空";
person.age = 18;

// 第二种
var person = {
    name:"孙悟空",
    age:18
};

对象属性

访问属性的两种方式

var person = new Object();
person.name = "孙悟空";
person.age = 18;

// 对象.属性名
var name = person.name

// 对象['属性名']
var age = person['age']

向对象中添加属性

语法:

  1. 对象.属性名 = 属性值
  2. 对象["属性名"] = 属性值

对象的属性名没有任何要求,不需要遵守标识符的规范,但是在开发中,尽量按照标识符的要求去写。属性值也可以任意的数据类型。

读取对象中的属性

语法:

  1. 对象.属性名
  2. 对象["属性名"]

如果读取一个对象中没有的属性,它不会报错,而是返回一个undefined

枚举对象中的属性

for...in 语法:

for(var 属性名 in 对象){

}

for...in语句的循环体会执行多次,对象中有几个属性就会执行几次,每次将一个属性名赋值给我们定义的变量,我们可以通过它来获取对象中的属性

删除对象中的属性

语法:

  1. delete 对象.属性名
  2. delete 对象["属性名"]

使用in检查对象中是否含有指定属性

语法:"属性名" in 对象

如果在对象中含有该属性,则返回true如果没有则返回false

使用对象字面量,在创建对象时直接向对象中添加属性

语法:

var obj = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
    }

基本数据类型与引用数据类型

  • JS中的变量可能包含两种不同数据类型的值:基本数据类型和引用数据类型
  • JS中一共有5种基本数据类型:StringNumberBooleanUndefinedNull
  • 基本数据类型的值是无法修改的,是不可变的
  • 基本数据类型的比较是值的比较,也就是只要两个变量的值相等,我们就认为这两个变量相等
  • 引用类型的值是保存在内存中的对象
  • 当一个变量是一个对象时,实际上变量中保存的并不是对象本身,而是对象的引用
  • 当从一个变量向另一个变量复制引用类型的值时,会将对象的引用复制到变量中,并不是创建一个新的对象
  • 这时,两个变量指向的是同一个对象。因此,改变其中一个变量会影响另一个

栈和堆

  • JavaScript在运行时数据是保存到栈内存和堆内存当中的
  • 简单来说栈内存用来保存变量和基本类型。堆内存用来保存对象
  • 我们在声明一个变量时实际上就是在栈内存中创建了一个空间用来保存变量
  • 如果是基本类型则在栈内存中直接保存
  • 如果是引用类型则会在堆内存中保存,变量中保存的实际上对象在堆内存中的地址

img

函数

  • 函数是由一连串的子程序(语句的集合)所组成的,可以被外部程序调用。向函数传递参数之后,函数可以返回一定的值
  • 通常情况下,JavaScript代码是自上而下执行的,不过函数体内部的代码则不是这样。如果只是对函数进行了声明,其中的代码并不会执行。只有在调用函数时才会执行函数体内部的代码
  • 这里要注意的是JavaScript中的函数也是一个对象
  • 函数也是一个对象,所以函数和其他对象一样也可以作为一个参数传递给另外一个函数。
  • 但是要注意的是使用函数作为参数时,变量后边千万不要加(),不加()表示将函数本身作为参数,加上以后表示将函数执行的结果作为参数。
  • 函数对象的方法

    每个函数都有两个方法call()和apply(),call()和apply()都可以指定一个函数的运行环境对象,换句话说就是设置函数执行时的this值。
    函数对象.call(this对象,参数数组)
    函数对象.apply(this对象,参数1,参数2,参数N)

函数的声明

  • 首先明确一点函数也是一个对象,所以函数也是在堆内存中保存的

  • 函数声明比较特殊,需要使用function关键字声明

    // 函数表达式
    var sum = function(a,b){return a+b};
    
  • 上边的例子就是创建了一个函数对象,并将函数对象赋值给了sum这个变量。其中()中的内容表示执行函数时需要的参数,{}中的内容表示函数的主体

// 函数声明
function 函数名([形参1,形参2...形参N]){
    // 语句...
}

函数的调用

  • 调用函数时,传递给函数的参数称为实参(实际参数)。
  • 如果想调用我们上边定义的sum函数,可以这样写:
    var result = sum(123,456);

    这样表示调用sum这个函数,并将123和456作为实参传递给函数,函数中会将两个参数求和并赋值给result

传递参数

JS中的所有的参数传递都是按值传递的。也就是说把函数外部的值赋值给函数内部的参数,就和把值从一个变量赋值给另一个变量是一样的。

形参和实参

  • 形参:形式参数

    定义函数时,可以在()中定义一个或多个形参,形参之间使用,隔开定义形参就相当于在函数内声明了对应的变量但是并不赋值,形参会在调用时才赋值。

  • 实参:实际参数

    调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参,调用函数时JS解析器不会检查实参的类型和个数,可以传递任意数据类型的值。如果实参的数量大于形参,多余实参将不会赋值,如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined

函数内部属性

在函数内部,有两个特殊的对象:

  • arguments
    1. 该对象实际上是一个数组,用于保存函数的参数
    2. 同时该对象还有一个属性callee来表示当前函数
  • this
    1. this引用的是一个对象。对于最外层代码与函数内部的情况,其引用目标是不同的。
    2. 此外,即使在函数内部,根据函数调用方式的不同,引用对象也会有所不同。需要注意的是,this引用会根据代码的上下文语境自动改变其引用对象

this 引用的规则

  • 在最外层代码中,this引用的是全局对象。
  • 在函数内,this根据函数调用方式的不同而有所不同:
函数的调用方式 this引用的对象
构造函数 所生成的对象
调用对象的方法 当前对象
apply或call调用 参数指定的对象
其他方式 全局对象(window)

作用域

作用域简单来说就是一个变量的作用范围。

在JS中作用域分成两种:

  • 全局作用域
    1. 直接在script标签中编写的代码都运行在全局作用域中
    2. 全局作用域在打开页面时创建,在页面关闭时销毁
    3. 全局作用域中有一个全局对象windowwindow对象由浏览器提供,可以在页面中直接使用,它代表的是整个的浏览器的窗口
    4. 在全局作用域中创建的变量都会作为window对象的属性保存在全局作用域中创建的函数都会作为window对象的方法保存
    5. 在全局作用域中创建的变量和函数可以在页面的任意位置访问。在函数作用域中也可以访问到全局作用域的变量。
    6. 尽量不要在全局中创建变量
  • 函数作用域
    1. 函数作用域是函数执行时创建的作用域,每次调用函数都会创建一个新的函数作用域
    2. 函数作用域在函数执行时创建,在函数执行结束时销毁
    3. 在函数作用域中创建的变量,不能在全局中访问
    4. 当在函数作用域中使用一个变量时,它会先在自身作用域中寻找,如果找到了则直接使用,如果没有找到则到上一级作用域中寻找,如果找到了则使用,找不到则继续向上找,一直会
  • 变量的声明提前
    1. 在全局作用域中,使用var关键字声明的变量会在所有的代码执行之前被声明,但是不会赋值。所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
    2. 在函数作用域中,也具有该特性,使用var关键字声明的变量会在函数所有的代码执行前被声明,如果没有使用var关键字声明变量,则变量会变成全局变量
  • 函数的声明提前
    1. 在全局作用域中,使用函数声明创建的函数(function fun(){}),会在所有的代码执行之前被创建,也就是我们可以在函数声明前去调用函数,但是使用函数表达式(var fun = function(){})创建的函数没有该特性
    2. 在函数作用域中,使用函数声明创建的函数,会在所有的函数中的代码执行之前就被创建好了

闭包(closure)

  • 闭包是JS一个非常重要的特性,这意味着当前作用域总是能够访问外部作用域中的变量。因为函数是JS中唯一拥有自身作用域的结构,因此闭包的创建依赖于函数
  • 也可以将闭包的特征理解为,其相关的局部变量在函数调用结束之后将会继续存在

构造函数

  • 构造函数是专门用来创建对象的函数
  • 一个构造函数我们也可以称为一个类
  • 通过一个构造函数创建的对象,我们称该对象时这个构造函数的实例
  • 通过同一个构造函数创建的对象,我们称为一类对象
  • 构造函数就是一个普通的函数,只是他的调用方式不同,如果直接调用,它就是一个普通函数,如果使用new来调用,则它就是一个构造函数
  • 每个对象中都有一个constructor属性,它引用了当前对象的构造函数

例子:

function Person(){

}

new关键字

  • 使用new关键字执行一个构造函数时:
    1. 首先,会先创建一个空的对象
    2. 然后,会执行相应的构造函数。构造函数中的this将会引用这个新对象
    3. 最后,将对象作为执行结果返回
  • 构造函数总是由new关键字调用
  • 构造函数和普通函数的区别就在于调用方式的不同
  • 任何函数都可以通过new来调用,所以函数都可以是构造函数
  • 在开发中,通常会区分用于执行的函数和构造函数
  • 构造函数的首字母要大写

instanceof关键字

instanceof 用来检查一个对象是否是一个类的实例

语法:对象 instanceof 构造函数

  1. 如果该对象是构造函数的实例,则返回true,否则返回false
  2. Object是所有对象的祖先,所以任何对象和Objectinstanceof都会返回true

垃圾回收

  • 不再使用的对象的内存将会自动回收,这种功能称作垃圾回收。
  • 所谓不再使用的对象,指的是没有被任何一个属性(变量)引用的对象。
  • 垃圾回收的目的是,使开发者不必为对象的生命周期管理花费太多精力。

原型

  • JS是一门面向对象的语言,而且它还是一个基于原型的面向对象的语言
  • 所谓的原型实际上指的是,在构造函数中存在着一个名为原型的(prototype)对象,这个对象中保存着一些属性,凡是通过该构造函数创建的对象都可以访问存在于原型中的属性
  • 最典型的原型中的属性就是toString()函数,实际上我们的对象中并没有定义这个函数,但是却可以调用,那是因为这个函数存在于Object对应的原型中
  • 创建一个构造函数以后,解析器都会默认在函数中添加一个prototype,prototype属性指向的是一个对象,这个对象我们称为原型对象。
  • 它所创建的对象中都会有一个隐含的属性执行该原型对象。这个隐含的属性可以通过对象.__proto__来访问。
  • 原型对象就相当于一个公共的区域,凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。我们可以将对象中共有的属性和方法统一添加到原型对象中,这样我们只需要添加一次,就可以使所有的对象都可以使用。
  • 当我们去访问对象的一个属性或调用对象的一个方法时,它会先自身中寻找,如果在自身中找到了,则直接使用。如果没有找到,则去原型对象中寻找,如果找到了则使用,如果没有找到,则去原型的原型中寻找,依此类推。直到找到Object的原型为止,Object的原型的原型为null,如果依然没有找到则返回undefined
  • hasOwnProperty()
    1. 这个方法可以用来检查对象自身中是否含有某个属性
    2. 语法:对象.hasOwnProperty("属性名")

获取原型对象的方法

除了可以通过构造函数获取原型对象以外,还可以通过具体的对象来获取原型对象。

Object.getPrototypeOf(对象)
对象.proto
对象.constructor.prototype

需要注意的是,我们可以获取到Object的原型对象,也可以对它的属性进行操作,但是我们不能修改Object原型对象的引用

数组

  • 数组也是对象的一种

  • 数组是一种用于表达有顺序关系的值的集合的语言结构

  • 数组内的各个值被称作元素。每一个元素都可以通过索引(下标)来快速读取。索引是从零开始的整数

  • 创建数组

    var arr = new Array();
    var arr = [];
    
  • 向数组中添加元素

    arr[0] = 123;
    arr[1] = "hello";
    
  • 创建数组时直接添加元素

    var arr = [123,"hello",true,null];
    
  • 获取和修改数组的长度

    1. 使用length属性来操作数组的长度,获取长度:数组.length length获取到的是数组的最大索引+1
    2. 修改数组的长度数组.length = 新长度,如果修改后的length大于原长度,则多出的部分会空出来,如果修改后的length小于原长度,则原数组中多出的元素会被删除
  • 向数组的最后添加元素 数组[数组.length] = 值

  • 数组的方法

    1. push() 用来向数组的末尾添加一个或多个元素,并返回数组新的长度,语法:数组.push(元素1,元素2,元素N)
    2. pop() 用来删除数组的最后一个元素,并返回被删除的元素
    3. unshift() 向数组的前边添加一个或多个元素,并返回数组的新的长度
    4. shift() 删除数组的前边的一个元素,并返回被删除的元素
    5. slice()
      • 可以从一个数组中截取指定的元素
      • 该方法不会影响原数组,而是将截取到的内容封装为一个新的数组并返回
      • 参数:
        1. 截取开始位置的索引(包括开始位置)
        2. 截取结束位置的索引(不包括结束位置),第二个参数可以省略不写,如果不写则一直截取到最后
      • 参数可以传递一个负值,如果是负值,则从后往前数
    6. splice()
      • 可以用来删除数组中指定元素,并使用新的元素替换,该方法会将删除的元素封装到新数组中返回
      • 参数:
        1. 删除开始位置的索引
        2. 删除的个数
        3. 三个以后,都是替换的元素,这些元素将会插入到开始位置索引的前边
  • 遍历数组

    // 一般情况我们都是使用for循环来遍历数组:
    for(var i=0 ; i<数组.length ; i++){
        //数组[i]
    }
    
    // 使用forEach()方法来遍历数组(不兼容IE8)
    数组.forEach(function(value , index , obj){
        // value:正在遍历的元素
        // index:正在遍历元素的索引
        // obj:被遍历对象
    });
    

Date

  • Date类型用来表示一个时间。
  • Date采取的是时间戳的形式表示时间,所谓的时间戳指的是从1970年1月1日0时0秒0分开始经过的毫秒数来计算时间。
  • 直接使用new Date()就可以创建一个Date对象。
  • 创造对象时不传参数默认创建当前时间。可以传递一个毫秒数用来创建具体的时间。
  • 也可以传递一个日期的字符串,来创建一个时间。

    格式为:月份/日/年 时:分:秒
    例如:06/13/2004 12:12:12

Math

  • JS还为保存数学公式和信息提供了一个公共位置,即Math对象。
  • 与我们在JavaScript直接编写的计算功能相比,Math对象提供的计算功能执行起来要快得多。Math对象中还提供了辅助完成这些计算的属性和方法

Math对象的属性

属性 说明
Math.E 自然对数的底数,即常量 e 的值
Math.LN10 10的自然对数
Math.LN2 2的自然对数
Math.LOG2E 以2为底 e 的对数
Math.LOG10E 以10为底 e 的对数
Math.PI π的值
Math.SQRT1_2 1/2的平方根(即2的平方根的倒数)
Math.SQRT2 2的平方根

Math的方法

  1. Math.abs() 绝对值运算
  2. Math.ceil() 向上取整
  3. Math.floor() 向下取整
  4. Math.round() 四舍五入取整
  5. Math.random() 生成一个0-1之间的随机数

    生成一个x-y之间的随机数示例示例:Math.round(Math.random()*(y-x)+x)

  6. Math.pow(x,y) 求x的y次幂
  7. Math.sqrt() 对一个数进行开方
  8. Math.max() 求多个数中最大值
  9. Math.min() 求多个数中的最小值

标签:函数,对象,JavaScript,作用域,属性,Math,构造函数
From: https://www.cnblogs.com/wdszh/p/17501305.html

相关文章

  • 在 Python 中,类型属于对象,变量是没有类型的
    在Python中,类型属于对象,变量是没有类型的:━━━━━━━━━━━━━━━━━━━━━━━━━a=[1,2,3]a="w3cschool"以上代码中,[1,2,3]是list类型,"w3cschool"是string类型,而变量a是没有类型,她仅仅是一个对象的引用(一个指针),可以是list类型对象,也可以指向是stri......
  • 3、错误的面向对象
    1、滥用getter、setter方法在之前参与的项目开发中,我经常看到有同事定义完类的属性之后,就顺手把这些属性的getter、setter方法都定义上有些同事更加省事,直接用IDE或者Lombok插件(如果是Java项目的话)自动生成所有属性的getter、setter方法当我问起,为什么要给每个属性......
  • JavaScript学习笔记:Web Components
    组件的概念组件是对可重用的HTML与JS功能的封装。在没有组件的时候,同样的HTML结构会在文档中多次出现,使代码变得复杂。在使用组件封装后,就像使用一个HTML标签那样使用这些HTML结构,HTML文档变得清晰易维护。它主要由三项技术实现:CustomElement:自定义元素,JavaScriptWEBAP......
  • VBA对象:Workbooks、Worksheets、Range1
     Workbooks打开工作簿使用VBA可以打开指定位置的目标工作簿,使用Workbooks集合的Open方法。SubWB()'打开工作簿,需要指定完整的路径、名称、后缀名Workbooks.Open"D:\Files\工作簿1.xlsx"EndSub新建工作簿使用Workbooks集合的Add方法创建新的工作簿:S......
  • JavaScript 之 高级程序设计 基础篇 (一)
    导读此篇文章为作者拜读JavaScrpit第四版(红宝石)的笔记内容、适用于有经验的程序员阅读;作者java开发出身。在之前前后端不分离的时代使用esayUIJQuery的时代经常写js相关代码。现在前后端分离的时代;前端工程日新月异、各种框架层出不穷;万变不离其中;学好js才是根本;很喜欢并......
  • JavaScript基础
    JavaScript基础简介JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准名命名为ECMAScriptJS的特点解释型语言类似于C和Java的语法结构动态语言......
  • JAVA面向对象程序设计_PTA题目集07-11总结分析
    JAVA面向对象程序设计_PTA题目集07-11总结分析前言:天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为。所以动心忍性,增益其所不能。随堂检测在最末浅析。 题目集七:知识点:类间设计,类的设计。题量:一题,菜单计价五。难度:八个满分。 题目集八:知识点:类......
  • string类型可以作为lock的锁对象吗
    lock关键字介绍lock关键字是用于在多线程编程中实现同步和互斥访问的关键字。它的作用是确保共享资源在任意时刻只能被一个线程访问,从而避免出现竞态条件(racecondition)和数据不一致的问题。当多个线程同时访问共享资源时,如果没有合适的同步机制,可能会导致数据损坏、结果的不......
  • Kotlin 语法糖(对象不为空返回自身,为空返回其他)
    原文地址:Kotlin语法糖(对象不为空返回自身,为空返回其他)-Stars-One的杂货小窝开发中,经常会有这样逻辑:判断对象如果不为空,则取对象本身;为空,则得到其他对象;然后每次写个if还是有些啰嗦,可以使用kotlin的语法糖可空对象使用?:如果是可空对象,可以使用?:来实现原......
  • C++面向对象技术与C++课程设计任务书[2023-06-23]
    C++面向对象技术与C++课程设计任务书[2023-06-23]面向对象技术与C++课程设计任务书题目1 小型学籍管理系统班级 21060101~02 指导教师 耿军雪姓名 学号 地点 G1-203 完成时间 2023/6/262023/6/30【目的与要求】1、目的:(1)要求学生达到熟练掌握C++语言的基本知识和技能;(2)基......