松软科技前端课堂:JavaScript 对象
真实生活中的对象、属性和方法
在真实生活中,汽车是一个对象。
汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:
对象 | 属性 | 方法 |
---|---|---|
![]() |
car.name = porsche car.model = 911 car.length = 4499mm car.color = white |
car.start() car.drive() car.brake() car.stop() |
所有汽车都拥有同样的属性,但属性值因车而异。
所有汽车都拥有相同的方法,但是方法会在不同时间被执行。
JavaScript 对象
您之前已经学到,JavaScript 变量是数据值的容器。
这段代码把一个单一值(porsche)赋给名为 car 的变量:
var car = "porsche";
对象也是变量。但是对象包含很多值。
这段代码把多个值(porsche, 911, white)赋给名为 car 的变量:
var car = {type:"porsche", model:"911", color:"white"};
值以名称:值对的方式来书写(名称和值由冒号分隔)。
JavaScript 对象是被命名值的容器。
对象属性
(JavaScript 对象中的)名称:值对被称为属性。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
属性 | 属性值 |
---|---|
firstName | Bill |
lastName | Gates |
age | 62 |
eyeColor | blue |
对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
属性 | 属性值 |
---|---|
firstName | Bill |
lastName | Gates |
age | 62 |
eyeColor | blue |
fullName | function() {return this.firstName + " " + this.lastName;} |
方法是作为属性来存储的函数。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
属性属性值firstNameBilllastNameGatesage62eyeColorblue
this 关键词
在函数定义中,this 引用该函数的“拥有者”。
在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象。
换言之,this.firstName 的意思是 this 对象的 firstName 属性。
对象定义
我们定义(创建)了一个 JavaScript 对象:
实例
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
空格和折行都是允许的。对象定义可横跨多行:
实例
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
};
访问对象属性
您能够以两种方式访问属性:
objectName.propertyName;
objectName["propertyName"];
访问对象方法
您能够通过如下语法访问对象方法:
objectName.methodName()
objectName.methodName()
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
松软科技前端课堂:JavaScript 对象的更多相关文章
- 松软科技前端课堂:JavaScript 日期
JavaScript 日期输出 默认情况下,JavaScript 将使用浏览器的时区并将日期显示为全文本字符串: Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间) ...
- 松软科技Web课堂:JavaScript JSON
JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...
- 松软科技Web课堂:JavaScript 类型转换
Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...
- 松软科技web课堂:JavaScript 布尔(逻辑)
JavaScript 布尔(逻辑)代表两个值之一:true 或 false. 布尔值 通常,在编程中,您会需要只能有两个值之一的数据类型,比如 YES / NO ON / OFF TRUE / FAL ...
- 松软科技web课堂:JavaScript 数组方法
JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串. 实例 var fruits = [& ...
- 松软科技web课堂:JavaScript Math 对象
JavaScript Math 对象允许您对数字执行数学任务. 实例 Math.PI; // 返回 3.141592653589793 Math.round() Math.round(x) 的返回值是 ...
- 松软科技前端课堂:JavaScript 数值方法
Number 方法帮助您处理数值. Number 方法和属性 原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象). 但是通过 JavaScript,方法和属性也可用于原始值 ...
- 松软科技Web课堂:JavaScript this 关键词
实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...
- 松软科技Web课堂:JavaScript 异常
JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...
随机推荐
- 简单实现vue列表点击某个高亮显示
比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...
- [译]C# 7系列,Part 4: Discards 弃元
原文:https://blogs.msdn.microsoft.com/mazhou/2017/06/27/c-7-series-part-4-discards/ 有时我们想要忽略一个方法返回的值,特 ...
- 《CSAPP》实验一:位操作
<CSAPP>号称程序员圣经,虽然中文译名为<深入理解计算机系统>,但其实没那么"深",只是覆盖面很广,一般用作计算机专业大一导论课的教科书.早就听闻书上配 ...
- AbstractMethodError: abstract method "androidx.databinding.ViewDataBinding androidx.databinding.DataBinderMapper.getDataBinder(androidx.databinding.DataBindingComponent, android.view.View, int)"
混淆导致的数据绑定库错误 问题摘要 AbstractMethodError: abstract method "androidx.databinding.ViewDataBinding an ...
- 解决mysql导入数据量很大导致失败及查找my.ini 位置(my.ini)在哪
数据库数据量很大的数据库导入到本地时,会等很久,然而等很久之后还是显示失败: 这是就要看看自己本地的没mysql是否设置了超时等待,如果报相关time_out这些,可以把mysql.ini尾部添加ma ...
- 从eslint规则学点JavaScript知识
在知识星球陆续发了些eslint小知识,意在通过eslint知识去了解规则内部的原理,汇总在此: prefer-const 含义:始终用const定义你从不修改的变量,如果会被修改则使用let,永不使 ...
- React: 通过React.Children访问特定子组件
一.简介 React中提供了很多常用的API,其中有一个React.Children可以用来访问特定组件的子元素.它允许用来统计个数.map映射.循环遍历.转换数组以及显示指定子元素,如下所示: va ...
- 封装和@property
封装和@property 一.复习 1.接口类和抽象类 python中没有接口类,有抽象类,abc模块中的metaclass=ABCMeta,@abstructmethod,本质是做代码规范用的,希望 ...
- 一分钟理解Java公平锁与非公平锁
本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...
- ES-入门
https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html 1. 安装 https://www.elastic.co/cn/downloads/ ...