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

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

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

对象 属性 方法
 

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. 终极CURD-4-java8新特性

    目录 1 概述 2 lambda表达式 2.1 lambda重要知识点总结 2.2 java内置函数接口 2.3 方法引用 2.4 构造器引用 2.5 数组引用 2.6 lambda表达式的陷阱 3 ...

  2. 【高可用架构】用Nginx实现负载均衡(三)

    前言 在上一篇,已经用Envoy工具统一发布了Deploy项目代码.本篇我们来看看如何用nginx实现负载均衡 负载均衡器IP 192.168.10.11 [高可用架构]系列链接:待部署的架构介绍 演 ...

  3. CODING 敏捷看板全新上线,助力研发管理可视化升级

    在服务企业研发团队的过程中,我们发现不少团队碰到了类似的问题: 团队成员声称完成了自己的大部分任务,但团队实际交付的需求却寥寥无几? 由于某些问题导致工序一直处于等待状态,怎么识别和处理这些延迟? 成 ...

  4. Bash脚本编程之脚本基础和bash配置文件

    脚本基础 参考资料:Shell Scripts (Bash Reference Manual) 不严谨地说,编程语言根据代码运行的方式,可以分为两种方式: 编译运行:需要先将人类可识别的代码文件编译成 ...

  5. Python—解析HTML页面(HTMLParser)

    HTMLParser类的定义及常用方法 类的定义 HTMLParser主要是用来解析HTML文件(包括HTML中无效的标记). 参数convert_charrefs表示是否将所有的字符引用自动转化为U ...

  6. Django的Form验证

    Django的Form验证 Form验证:Form提交Form表单数据验证 针对Form提交的数据进行验证 创建模板 class loginForm() 请求提交给模板,创建对象 obj=loginF ...

  7. .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

    我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版.针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍.具体的可以关注&q ...

  8. 一起学Spring之AOP

    概述 在软件开发中,我们重点关注的是业务逻辑代码,但在实际开发中,需要写的代码却不仅仅是业务逻辑,还需要处理记录日志,异常处理,事务控制等一些与业务无关的事情.而且这些代码也是服务端必须的,类似这样的 ...

  9. Git实战指南----跟着haibiscuit学Git(第八篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  10. layui table+复杂表头+合并单元格

    效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...