菜鸟教程 -- 学的不仅是技术,更是梦想!

Javascript 教程
JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript VScode JavaScript Chrome 中运行 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 字符串模板 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript break 和 continue 语句 JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单 JavaScript 表单验证 JavaScript 验证 API JavaScript 保留关键字 JavaScript this JavaScript let 和 const JavaScript JSON JavaScript void JavaScript 异步编程 JavaScript Promise JavaScript async/await JavaScript 代码规范 JavaScript 测验

JS 函数

JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包

JS 类

JavaScript 类 JavaScript 类继承 JavaScript 静态方法

JS HTML DOM

DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素 HTMLCollection 对象 NodeList 对象

JS 高级教程

JavaScript 对象 JavaScript prototype JavaScript Number 对象 JavaScript String JavaScript Date(日期) JavaScript Array(数组) JavaScript Boolean(布尔) JavaScript Math(算数) JavaScript RegExp 对象

JS 浏览器BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookie

JS 库

JavaScript 库 JavaScript 测试 jQuery JavaScript 测试 Prototype

JS 实例

JavaScript 实例 JavaScript 对象实例 JavaScript 浏览器对象实例 JavaScript HTML DOM 实例 JavaScript 总结

JS 参考手册

JavaScript 对象 HTML DOM 对象 JavaScript 异步编程 JavaScript 静态方法
(追記) (追記ここまで)

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

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

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

对象有它的属性,如重量和颜色等,方法有启动停止等:

对象 属性 方法

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

所有汽车都有这些属性,但是每款车的属性都不尽相同。

所有汽车都拥有这些方法,但是它们被执行的时间都不尽相同。

JavaScript 对象

在 JavaScript中,几乎所有的事物都是对象。

Note 在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。

你已经学习了 JavaScript 变量的赋值。

以下代码为变量 car 设置值为 "Fiat" :

var car = "Fiat";

对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

在以上实例中,3 个值 ("Fiat", 500, "white") 赋予变量 car。

Note JavaScript 对象是变量的容器。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:

实例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

尝试一下 »

定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:

实例

var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};

尝试一下 »

对象属性

可以说 "JavaScript 对象是变量的容器"。

但是,我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

Note JavaScript 对象是属性变量的容器。

对象键值对的写法类似于:

  • PHP 中的关联数组
  • Python 中的字典
  • C 语言中的哈希表
  • Java 中的哈希映射
  • Ruby 和 Perl 中的哈希表

访问对象属性

你可以通过两种方式访问对象属性:

实例 1

person.lastName;

尝试一下 »

实例 2

person["lastName"];

尝试一下 »

对象方法

对象的方法定义了一个函数,并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

该实例访问了 person 对象的 fullName() 方法:

实例

name = person.fullName();

尝试一下 »

如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:

实例

name = person.fullName;

尝试一下 »
Note JavaScript 对象是属性和方法的容器。

在随后的教程中你将学习到更多关于函数,属性和方法的知识。

访问对象方法

你可以使用以下语法创建对象方法:

methodName : function() {
 // 代码 
}

你可以使用以下语法访问对象方法:

实例

objectName.methodName()

尝试一下 »

通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。

如果使用 fullName 属性,不添加 (), 它会返回函数的定义:

实例

objectName.methodName

尝试一下 »

有多种方式可以创建,使用和修改 JavaScript 对象。

同样也有多种方式用来创建,使用和修改属性和方法。

Note 在随后的教程中,你将学习到更多关于对象的知识。

更多实例

创建 JavaScript 对象 I

创建 JavaScript 对象 II

访问对象属性 I

访问对象属性 II

函数属性作为一个方法访问

函数属性作为一个属性访问

AI 思考中...

7 篇笔记 写笔记

  1. #0

    追梦

    104***[email protected]

    146

    JavaScript对象:属性和方法的容器;

    对象的属性之间一定要用逗号隔开;

    对象的方法定义了一个函数,并作为对象的属性存储。

    对象方法通过添加 () 调用 (作为一个函数)。

    比如:

    var person={
"name":"小明",
"age":"18",
"like":function(){
 return "喜欢打篮球,弹吉他";
 }
}

    追梦

    104***[email protected]

    9年前 (2017年07月21日)
  2. #0

    吃掉小秋秋

    159***[email protected]

    120

    javaScript 可以通过 new Object 来创建对象,再添加属性和属性值,比如:

    var person=new Object();
person.name='小明';
person.sex='男';
person.method=function(){
 return this.name+this.sex;
}

    吃掉小秋秋

    159***[email protected]

    9年前 (2017年09月14日)
  3. #0

    2018年01月18日

    445***[email protected]

    85

    javaScript对象中属性具有唯一性(这里的属性包括方法),如果有两个重复的属性,则以最后赋值为准。比如同时存在两个play:

    var person = {
 name: "小明",
 age: 18,
 sex: "男",
 play: "football",
 play: function () {
 return "like paly football";
 }
};

    2018年01月18日

    445***[email protected]

    9年前 (2018年01月18日)
  4. #0

    small blue

    129***[email protected]

    70

    使用 var name = person.fullName(); 调用对象函数时,fullName 会被立即执行:

    var person = {
 firstName: "John",
 lastName : "Doe",
 id : 5566,
 fullName : function() 
 {
 console.log("person.fullName");
 }
};
var name = person.fullName();
console.log(name);

    控制台会先打印 person.fullName ,再打印 name。

    small blue

    129***[email protected]

    8年前 (2018年12月19日)
  5. #0

    BIgFatStar

    799***[email protected]

    53

    JavaScript 对象是键值对的容器,"键"必须为字符串,"值" 可以是 JavaScript 中包括 null 和 undefined 的任意数据类型。

    代码实例:

    var bird = {
 name : "Amy",
 age : 1,
 color : "white",
 skill : function () {
 console.log("Fly");
 },
 nickname : null, 
 play : undefined 
}

    BIgFatStar

    799***[email protected]

    6年前 (2020年04月28日)
  6. #0

    lucid dream

    182***[email protected]

    111

    反对楼上的,键的类型不一定是字符串,而是字符串或符号,一般类型都是转换成字符串(对象数字等类型),但是符号不会被强制转换。

    注意:如果把符号用作对象的属性 / 键值,那么它会以一种特殊的方式存储,使得这个属性不出现在枚举中,要通过原型链上的函数 .getOwnPropertySymbols 才能找到: 

    var p = {
 foo: 16,
 [ Symbol( "bar" ) ]: "hello world",
 baz: true
};
Object.getOwnPropertyNames( p ); // [ "foo","baz" ]
//如果要取得对象的符号属性:
Object.getOwnPropertySymbols( p); // [ Symbol(bar) ]

    lucid dream

    182***[email protected]

    4年前 (2022年03月09日)
  7. #0

    对象的存储时键值对形式的存储,一般情况下 [] 适用于任何形式的取值,但是 . 并不一定适用于所有的情况,下边介绍两种情况的区别。

    • 1、当所取的属性名是一个动态的值时,只能用[]不能用。
    • 2、当所取得键名是一个特殊的字符串时,只能用[]不能用。

    什么是特殊:当键名试一下情况下,键名是一个含有数字的字符串;当键名有特殊符号时;当键值是一个引号引起来的字符串时。

    let person = {
 name : '饺子',
 age : 18,
 //以下属加引号是为了将其视为整体,两种访问方式区别情况2也体现在这
 "123":"chinese", 
 "my-job" : "我的工作,中间是连字符",
 "my word" : "我的,中间含有一个空格",
 say(){
 console.log(this.name+"年龄是:" + this.age);
 } 
};
// 两种方式都可以访问属性和方法
console.log(person.name) 
console.log(person.age)
person.say()
console.log(person["name"])
console.log(person["age"])
person["say"]()
// 区别1:动态变量作为属性
// 这里定义一个myName,值为对象属性中的一个键名,在这里是直接定义的,但是在开发环境中可能是接手的其他的可变化的值
let myName = "name"
console.log(person.myName) // undefined,使用.访问,不会取出myName的值,会在person对象上查找键名为"myName"的属性值,因为没有所以肯定也找不到了
console.log(person[myName]) // zhangsan,使用[]访问,中括号访问会把动态变量转换为实际的变量,这里就相当于person[name]
//区别2:特殊字符
//console.log(person.123) // 报错
//console.log(person.my-job) // 报错
//console.log(person.my word) // 报错
console.log(person[123]) // undefined
console.log(person["123"]) // chinese,注意只有合理的数字才能省略引号
console.log(person["my-job"]) // 我的工作,中间是连字符
console.log(person["my word"]) // 我的,中间含有一个空格
    3年前 (2023年08月01日)

点我分享笔记

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址

AltStyle によって変換されたページ (->オリジナル) /