JavaScript基础语法_JavaScript对象
JavaScript对象
JavaScript 是一种面向对象的编程语言,在 JavaScript 中几乎所有的东西都是对象。因此,要想有效的使用 JavaScript,首先需要了解对象的工作原理以及如何创建并使用对象。
我们可以将对象看作是一个属性的无序集合,每个属性都有一个名称和值(键/值对)。我们知道,数组是值的集合,每个值都有一个数字索引(从零开始,依次递增)。对象类似与数组,不同的是对象中的索引是自定义的,例如 name(姓名)、age(年龄)、gender(性别)等。
创建对象
可以使用花括号{ }来创建对象,{ }中用来定义对象中的属性。属性是一个个键:值对的组合,其中键(属性名称)始终是字符串类型的,而值(属性值)则可以是任意类型,例如字符串、数组、函数或其它对象等。不同的属性之间使用逗号进行分隔。
示例:
var person = {name: "Peter",age: 28,gender: "Male",displayName: function() { ///在对象中定义的函数通常被称为方法。document.write(this.name);}};
上面示例中创建了一个名为 person 的对象,该对象中包含三个属性 name、age、gender 和一个方法 displayName()。displayName() 方法中的 this.name 表示访问当前对象中的 name 属性,会被 JavaScript 解析为 person.name。
在定义对象时,属性名称虽然是字符串类型,但通常不需要使用引号来定义,但是以下三种情况则需要为属性名添加引号:
- 属性名为 JavaScript 中的保留字;
- 属性名中包含空格或特殊字符(除字母、数字、_ 和 $ 以外的任何字符);
- 属性名以数字开头。
示例:
var person = {"first name": "jiumeilove","current age": 18,gender: "Male"};
构造函数
构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用,我们可以把对象中一些公共属性和方法抽取出来,然后封装到这个函数里面
构造函数语法格式
function 构造函数名(){this.属性=值;this.方法=function(){}}new 构造函数名()
示例
//构造函数首字母要大写//构造函数不需要return就可以返回结果//调用构造函数必须使用new//只要new Student()调用函数就创建了一个对象jiumei{}//属性和方法前面必须添加thisfunction Student(uName, age, sex) {this.stuName = uName;this.stuAge = age;this.stuSex = sex;this.Endorsement = function (verse) {console.log(verse);}}var jiumei = new Student("jiumei", 18, "男");console.log(jiumei);console.log(jiumei.stuName);console.log(jiumei["stuAge"]);jiumei.Endorsement("离离原上草,一岁一枯荣");
访问对象的属性
要访问或获取属性的值,可以使用对象名.属性名或者对象名[“属性名”]的形式,
示例:
var person = {name: "jiumeilove",age: 18,gender: "Male",displayName: function() {document.write(this.name);}}document.write("姓名:" + person.name + "<br>"); // 输出:姓名:jiumeilovedocument.write("年龄:" + person["age"]); // 输出:年龄:18
在访问对象属性时,使用对象名.属性名的形式更易于代码的编写,但并不是所有情况下都可以使用。如果属性名中包含空格或者特殊字符,则不能使用对象名.属性名的形式来访问对象属性,必须使用对象名[“属性名”]的形式才行,如下例所示:
var person = {"first name": "jiumeilove","current age": 28,gender: "Male"};document.write(person["first name"]); // 输出:jiumeilovedocument.write(person.current age); // 报错:missing ) after argument list
使用对象名[“属性名”]的形式访问对象属性相对比较灵活,您除了可以直接通过属性名访问属性外,还可以将属性名称赋值给变量,然后再通过这个变量来访问属性的值,如下所示:
var person = {name: "jiumeilove",age: 18,gender: "Male"};var key = "age";document.write(person[key]); // 输出:18
设置修改对象的属性
使用对象名.属性名或者对象名[“属性名”]的形式除了可以获取对象的属性值外,也可以用来设置或修改对象的属性值,
示例:
var person = {name: "jiumeiloves",age: 18,gender: "Male"};person.phone = "16620133780";person.age = 20;person["name"] = "Peter Parker";for (var key in person) {document.write(key + ":" + person[key] + "<br>")}
删除对象的属性
可以使用 delete 语句来删除对象中的属性,
示例:
var person = {name: "jiumeilove",age: 18,gender: "Male",phone: "15012345678"};//delete 语句是从对象中删除指定属性的唯一方式,而将属性值设置为 undefined 或 null 仅会更改属性的值,并不会将其从对象中删除。delete person.gender;delete person["phone"];for (var key in person) {document.write(key + ":" + person[key] + "<br>")}
调用对象的方法
可以像访问对象中属性那样来调用对象中的方法,
示例:
var person = {name: "jiumeilove",age: 18,gender: "Male",displayName: function () {document.write(this.name);}};person.displayName(); // 输出:jiumeiloveperson["displayName"](); // 输出:jiumeilove
JavaScript基础语法_JavaScript对象相关推荐
- JavaScript基础语法_JavaScript内置对象
JavaScript内置对象 JavaScript中的对象分为3种:自定义对象,内置对象,浏览器对象 前两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于js独有 内置对象就是指J ...
- javascript基础语法——表达式
前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
- javascript基础语法——词法结构
前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫:而说它复杂,是因为要真正掌握它则需要数年时间.实际上,前端工程师很大程度上就是指javasc ...
- html5扩展函数的使用方法,知识分享:JavaScript基础语法
知识分享:JavaScript基础语法 原创 mb5fd868d58f1472021-01-22 16:52:56©著作权 阅读数 41 ©著作权归作者所有:来自51CTO博客作者mb5fd868d5 ...
- 【Javascript基础语法】第五周预习博客
Javascript基础语法 前言 一.初识JavaScript 1.JS是什么 2.作用 3.浏览器执行js简介 4.Js组成 二.JS的引入方式 1.行内式 2.内部引入 3.外部引入 三.js语 ...
- 前端技术学习第三讲:JavaScript基础语法
JavaScript基础语法 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被 ...
- JavaScript基础语法(一)
目录 前言 js变量 数据类型 数据类型转换 传送门 --> JavaScript基础语法(二).JavaScript之数组与函数(三).JavaScript之对象(四).JavaScript阶 ...
- RUNOOB JavaScript 基础语法
JavaScript 基础语法 JavaScript 的特点: JavaScript是一种动态类型.弱类型.基于原型的解释型脚本语言 动态类型:变量在声明时不需要声明类型,在运行时根据被赋值类型进行转 ...
- JavaScript基础语法(输出语句)
JavaScript基础语法(输出语句) 学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->J ...
最新文章
- CentOS常用环境配置(MySQL、jdk、Redis、Nginx)
- 分页原理+软件架构师
- SpringCloud底层原理
- Linux 查看CPU信息、机器型号等硬件信息
- python数据分析图表展示_1行代码实现Python数据分析:图表美观清晰,自带对比功能丨开源...
- 利用计算机程序解决问题的基本过程,第四章第一节编制计算机程序解决问题
- javascript的DOM、BOM操作
- NBU对oracle数据库进行rman备份
- 30万总奖金·垃圾分类挑战赛进入最后冲刺(附baseline完整分享)
- 课程设计:大学生信息管理系统
- 使用Xmanger登陆aix系统桌面时报桌面服务DT未启动问题
- AlphaGo Zero:从头开始学习
- 用计算机关闭无线网络连接,干货分享:打印机无线连接断开了怎么办?
- 下载网站TS格式文件进行合并
- 关于安装mysql环境闪退无法安装
- python打包成exe fail to ex_使用python写的PDF转EXCEL工具,已打包exe
- Unity Shader零基础入门4:纹理贴图与法线贴图
- 获取手机mac地址和串号IMEI
- 统计字符号串“aaaabbbccccddfggh”中字母个数或统计最多字母数;
- 高德地图自定义点标记大小_自定义高德地图的标记样式和内容