首页 > 编程语言 >前端技术中对JavaScript对象的学习

前端技术中对JavaScript对象的学习

时间:2024-11-26 19:34:39浏览次数:10  
标签:Object 函数 对象 前端 JavaScript greet person Hello

对象


目录

创建对象

创建新对象有两种不同的方法:

  • 使用 Object 定义并创建对象的实例。
  • 使用函数来定义对象,然后创建新的对象实例。

new Object

在 JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。

Object 构造函数创建一个对象包装器。

Object 构造函数,会根据给定的参数创建对象,具体有以下情况:

  • 如果给定值是 null 或 undefined,将会创建并返回一个空对象。
  • 如果传进去的是一个基本类型的值,则会构造其包装类型的对象。
  • 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。
  • 当以非构造函数形式被调用时,Object 的行为等同于 new Object()。

语法格式:

// 以构造函数形式来调用
new Object([value])

字面量创建

也可以使用对象字面量来创建对象,语法格式如下:

var myObject = {
    key1: value1,
    key2: value2,
    // 更多键值对...
};
  • myObject: 变量名,用于引用整个对象。
  • key1, key2: 属性名称,可以是字符串或标识符。
  • value1, value2: 属性的值,可以是任意 JavaScript 数据类型,包括数字、字符串、布尔值、函数、数组、甚至其他对象。

使用循环遍历对象属性

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object)
{
    执行的代码……
}

注意: for...in 循环中的代码块将针对每个属性执行一次。

示例:

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)
{
    txt=txt + person[x];
}

对象中的方法

this

this 关键字在函数体内使用时,其值取决于函数是如何被调用的。它通常指向调用该函数的对象。但是,this 的行为在JavaScript中可能有些复杂,因为它不是由函数声明的位置决定的,而是由函数调用的方式决定的。

  • 在全局环境中,this 通常指向全局对象(在浏览器中是 window,在Node.js中是 global)。
  • 在对象的方法中,this 指向调用该方法的对象。
  • 在构造函数中,this 指向新创建的对象实例。
  • 使用箭头函数时,this 被绑定到其定义时的上下文,而不是执行时的上下文。

apply

apply 方法调用一个函数,同时为其设置 this 值(称为函数运行的上下文)和一个数组(或类数组对象)作为参数列表。

function greet(greeting, punctuation) {  
  console.log(greeting + ', ' + this.name + punctuation);  
}  
  
const person = {  
  name: 'John'  
};  
  
greet.apply(person, ['Hello', '!']); // 输出: Hello, John!

在这个例子中,greet.apply(person, ['Hello', '!']) 调用 greet 函数,并将 this 设置为 person 对象,同时将 ['Hello', '!'] 作为参数传递给 greet 函数。

call

call 方法的作用与 apply 类似,但它接受一个参数列表作为单独的参数,而不是一个数组。

function greet(greeting, punctuation) {  
  console.log(greeting + ', ' + this.name + punctuation);  
}  
  
const person = {  
  name: 'John'  
};  
  
greet.call(person, 'Hello', '!'); // 输出: Hello, John!

在这个例子中,greet.call(person, 'Hello', '!') 调用 greet 函数,并将 this 设置为 person 对象,同时将 'Hello''!' 作为参数传递给 greet 函数。

总结

  • this 关键字用于在函数体内部引用当前对象。
  • applycall 方法用于在调用函数时显式地设置 this 的值,并传递参数。
  • apply 接受一个数组(或类数组对象)作为参数列表,而 call 接受单独的参数。
  • 使用这些方法可以在不同上下文中重用函数,使得JavaScript更加灵活和强大。

标签:Object,函数,对象,前端,JavaScript,greet,person,Hello
From: https://www.cnblogs.com/BingBing-8888/p/18570829

相关文章

  • Prometheus Operator自定义监控对象 -- Ingress-Nginx
    PrometheusOperator自定义监控对象--Ingress-Nginx一、自定义资源Prometheus-operator通过定期循环watchapiserver,获取到CRD资源(比如servicemonitor)的创建或者更新,将配置更新及时应用到运行中的prometheuspod中转换成标准promethesu配置文件供prometheusserver使用。各......
  • 你不知道的javascript-4
    this的指向,绑定规则,作用域1.什么是this?this是在函数执行时用来指代那个当前执行上下文的对象也就能说明this的值是在函数被调用时确定的,而不是在函数被定义时确定的因为只有当函数执行的时候,才会创建对应的FEC(函数执行上下文)2.为啥需要this?在常见的编程语言中,几乎......
  • 前端技术学习路线图
    以下Web开发人员学习路线图是来自Githubdeveloper-roadmap项目,目前已经有繁体版翻译developer-roadmap-chinese。主要有三个方向,分别为前端开发、后端开发和运维。图片中不同颜色的意义:黄色:推荐;灰色:尽可能学习;橙色:任选其一。可以看到,作为Web开发者,不管从事什么职位,下......
  • JavaScript 类型转换
    基础概念什么是类型转换JavaScript是一种动态弱类型语言,其类型转换机制允许开发者灵活地处理不同数据类型之间的交互。类型转换是指将一个值从一种数据类型转换为另一种数据类型的过程,在JavaScript中主要分为两种方式:隐式类型转换:由JavaScript引擎自动执行,例如在算术运......
  • JavaScript 条件语句详解
    JavaScript条件语句概述条件语句的作用在JavaScript编程中,条件语句是控制程序流程的核心机制。它们使程序能够根据特定条件执行不同代码块,从而实现灵活的决策逻辑。通过使用if、if-else和switch等语句,开发者可以根据变量值或表达式结果动态地改变代码执行路径,使得程序能够......
  • 【前端】vue引入tinymce富文本编辑器上传视频自动转img问题
    近期遇到了一个问题,前端项目引入tinymce富文本编辑器后有一个上传视频的需求,可是放入了视频以后,在预览时发现,视频标签未能正确展示,被替换为了img标签找了很多解决办法,都没有解决这个问题,最后找到了一个办法,特此记录。解决办法:1.找到node_modules下tinymce插件里面的media文......
  • Jenkin window bat批处理脚本如何请求api,获取json对象返回值数据
    需求:在jenkins的windowsbat批处理脚本中,请求一个api返回json数据,然后获取返回值的某个指定key的value直接上脚本:cdC:\workspace\jenkinxx\workspace\job-ta-webgitcheckoutmastergitpulldir::使用curl请求APIcurl-shttp://xx.xx.xx.xx:8088/testapi/getData......
  • Jenkin window bat批处理脚本如何 获取json对象返回值数据
    前两天有这么个小需求:在cmd中运行某测试工具后/请求某个api后,会返回一个json结果,其中有一个参数的值每次都变且经常要用,正常情况复制粘贴就好了,但这个值非常长,配上cmd的标记+粘贴的行为,就很酸爽了。然后就想快速提取这个值,顺着cmd的这个思路,就走上了批处理的道路。借这个机会,简......
  • JavaScript 中的“造物”艺术:对象、构造函数与原型
    走进JS,走近讶语在JavaScript的世界里,对象和面向对象编程(OOP)是不可或缺的一部分。本文将带你深入了解JavaScript中对象的创建方式,特别是ES6中引入的class语法,以及传统的构造函数和原型的概念。希望通过这篇文章,你能对JavaScript的面向对象编程有一个更深入的理解。1.造对象......
  • asp.net实现微信支付综合管理平台前端页面(支付、订单查询、退款、退款查询)
    <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index4V2.aspx.cs"Inherits="WXPayDemo.index4V2"%><!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat=&q......