真实生活中的对象、属性和方法

在真实生活中,汽车是一个对象。

汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:

对象 属性 方法
 

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 对象的更多相关文章

  1. 松软科技前端课堂:JavaScript 日期

    JavaScript 日期输出 默认情况下,JavaScript 将使用浏览器的时区并将日期显示为全文本字符串: Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间) ...

  2. 松软科技Web课堂:JavaScript JSON

    JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...

  3. 松软科技Web课堂:JavaScript 类型转换

    Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...

  4. 松软科技web课堂:JavaScript 布尔(逻辑)

    JavaScript 布尔(逻辑)代表两个值之一:true 或 false. 布尔值 通常,在编程中,您会需要只能有两个值之一的数据类型,比如 YES / NO ON / OFF TRUE / FAL ...

  5. 松软科技web课堂:JavaScript 数组方法

    JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串. 实例 var fruits = [& ...

  6. 松软科技web课堂:JavaScript Math 对象

    JavaScript Math 对象允许您对数字执行数学任务. 实例 Math.PI; // 返回 3.141592653589793 Math.round() Math.round(x) 的返回值是 ...

  7. 松软科技前端课堂:JavaScript 数值方法

    Number 方法帮助您处理数值. Number 方法和属性 原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象). 但是通过 JavaScript,方法和属性也可用于原始值 ...

  8. 松软科技Web课堂:JavaScript this 关键词

    实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...

  9. 松软科技Web课堂:JavaScript 异常

    JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...

随机推荐

  1. c++-重载等号,数组,指针,字符串类

    重载 重载=操作符 1先释放旧对象资源 2用一个对象=给另外一个对象 3函数返回值当左值 返回一个引用 4 数组类 Array& operator=(Array& a1); 5 字符串 ...

  2. Android 插件化开发(一):Java 反射技术介绍

    写在前面:学习插件化开发推荐书籍<Android 插件化开发指南>,本系列博客所整理知识部分内容出自此书. 在之前的项目架构的博文中,我们提到了项目插件化架构,提到插件化架构不得不提的到J ...

  3. 林克的小本本之——HCL网络知识随笔

    单臂路由 单臂路由是一种通过在路由器的一个接口上配置逻辑接口,来实现不同Vlan之间互通的方法. 实例: #配置SW1的VLAN [SW1]vlan 2 #配置端口vlan略 [SW1]int g1/ ...

  4. linux 常用Mysql脚本命令

    常用命令 无需系统Root权限 新数据库设置Root密码 visible > mysql -uroot -p visible > mysqladmin -uroot password &q ...

  5. 最短路径之Dijsktra算法(python)

    定义: 起始位置:A 终止位置:F 持久集合:permanent = set() 暂时集合:temporary = set() 首先将起始位置A加入永久集合,并将A的距离设为0, 此时遍历A的邻接节点 ...

  6. Leetcode题解 - 树、DFS部分简单题目代码+思路(700、671、653、965、547、473、46)

    700. 二叉搜索树中的搜索 - 树 给定二叉搜索树(BST)的根节点和一个值. 你需要在BST中找到节点值等于给定值的节点. 返回以该节点为根的子树. 如果节点不存在,则返回 NULL. 思路: 二 ...

  7. 自己封装Linux命令行万能解压命令

    问题背景 Linux下经常需要解压文件,直接在命令行敲命令解压是最便捷的. 但问题在于,不同的压缩格式,需要用不同命令和不同参数,完全记不住啊. 解决方式 既然记不住,那就换一种思路,假如有一条命令能 ...

  8. 2019 Vue开发指南:你都需要学点啥?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://dzone.com/articles/vue-development-in-2019 ...

  9. echarts 双Y轴图表

    直接代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  10. c#使用CefSharp开发winform——环境搭建

    因为nuget在线下载有时候很慢,所以下载nuget包,进行本地安装 登陆nuget官网https://www.nuget.org/下载相关资源 选择对应版本进行下载,同时需要下载相关依赖的包 ​ 最 ...