JavaScript全栈Pre-Course
  • Introduction
  • 课程介绍
  • Start
    • 教学方法
    • 软件和工具
  • 基本技能
    • 如何提问
    • Markdown 使用
    • 如何写 blog
    • Git 的简单应用
    • GitHub Pages
    • 在Chrome DevTools中进行调试
  • JavaScript基础
    • 如何引用JavaScript
    • 变量
    • 数据类型
    • 数学运算符
    • 逻辑运算符
    • 条件分支结构
    • 循环结构
    • 字符串
    • 对象
    • 数组
    • 函数
    • DOM 介绍
  • 整洁代码
  • 初识Linux
Powered by GitBook
On this page
  • 本节学习目标
  • 本节内容
  • 其他资料推荐
  • 本节练习
  1. JavaScript基础

对象

本节学习目标

  • 熟悉JavaScript中的对象的基本用法

本节内容

回想之前我们讲到的JavaScript数据类型,其中共有七种数据类型,其中有六种数据类型被称为原始类型,因为它们的值只包含单一的属性(是一个字符串,数字等);还有一种数据类型就是这节将要讲述的内容 - 对象(Object)。JavaScript对象类似真实世界中的对象,它们有不同的属性和行为。也就是说,JavaScript对象就是一组属性和方法(函数)的集合。一个对象也需要用一个变量来存储,然后通过点(.)来访问该对象的属性和方法。

比如说:就一个人来说,他有姓名,年龄,可以说话,可以走路。姓名和年龄就是这个人的属性。说话,走路就是一个人的行为,当然他还可以有其他更为复杂的行为,像这样子的行为被称作方法。

在JavaScript中,用大括号的语法就可以创建一个对象,示例如下:

var person = {
  name: "Ming",
  age: 17,
  talk: function () { 
    console.log("another... Sky... walk...");
  }
};

在这个例子中,我们定义了一个姓名为'Ming',年龄17岁的人,同时他还可以说话。其中,姓名和年龄就是属性,而说话就是方法。

我们可以通过点(.)来访问他的属性和方法:

var name = person.name; // 'Ming'
var age = person.age; // 17
person.talk(); // 'another... Sky... walk...'

当然我们也可以方便的修改他的属性或者再为他添加新的属性和方法,如下:

person.name = 'Jackie';
console.log(person.name); // 'Jackie' - edited
person.gender = 'male';
console.log(person.gender); // 'male' - added

一个对象的属性可以是任何的数据类型,比如我们可以将这个人的姓名修改为另一个对象,如下:

person.name = {
    first: 'Jeanne',
    last: 'Calment'
};

这样person.name也是一个对象了,同样我们也可以使用点(.)运算符来访问该对象的属性,如下:

console.log(person.name.first); // 'Jeanne'
console.log(person.name.last); // 'Calment'

其他资料推荐

本节练习

  • 阅读推荐链接的文章,复习JavaScript对象基础,并总结为一篇文章,发布到简书上。

  • 编程程序,完成下列需求:

    • 创建一个空对象,变量名为user;

    • 添加一个name属性,并设置值为John;

    • 添加一个surname属性,并设置其值为Mike;

    • 将name属性的值改为Peter;

    • 删除user的name属性

  • 编写程序,实现下列需求:计算下面fruit对象共有多少个水果,应该输出50。

    var fruit = {
    apple: 20,
    pear: 20,
    peach: 10
    };
    // write your code here...
Previous字符串Next数组

Last updated 6 years ago

JavaScript对象基础
JavaScript对象基础讲解
JavaScript 对象基础