对象方法
杯子的名字和价格已经放在一起。页面还缺一件属于这只杯子的小事：做出标签、把购物车数量加上去、跟购买的人打个招呼。把函数放在对象上。这个函数就是方法。
键和名单之后
属性那一课加过字段、删过字段、用 in 问过、走进嵌套对象，并用 Object.keys 取出名字。那里没有函数在跑。这里某个属性的值本身就是函数，要从握住它的对象上调用。
方法上的五个动作
📊 存放、调用、简写、this、参数
| 动作 | 写法 | 得到什么 |
|---|---|---|
| 存放 | greet: function () { return "Hi"; } |
坐在对象上的函数 |
| 调用 | product.greet() |
函数运行，你拿到结果 |
| 简写 | label() { return this.name; } |
同一种函数，写得更短 |
| this | 方法里的 this.name |
点号前面的那个对象 |
| 参数 | cart.add(3) |
只给这一次调用的额外输入 |
先给动作起名，再写那一行。存放并不会运行函数。简写不是一种新的值。this 不是你指望到处都有的全局商品名。参数是这一次调用的输入，不是第二个对象。
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);
值可以是函数
name 装着字符串。greet 装着函数。typeof product.greet 的结果是 "function"。还没运行，所以看不到 Hi。杯子的名字仍旧待在函数旁边。
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());
圆括号是运行按钮
product.greet() 走进函数。控制台打印 Hi。拿掉圆括号，你看到的是函数本身，不是它返回的值。点号告诉 JavaScript 这次调用属于哪个对象。
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());
简写只是更短的写法
花括号里的 label() { ... } 把函数放在键 label 上。它和 greet: function () { ... } 是同一种属性，只是少打几个字。product.label() 会运行它。函数体读取 this.name，控制台显示 Mug。
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());
普通调用里，this 就是点号前面的对象
product.tag() 的意思是：运行 tag，并让 this 成为 product。于是 this.name 和 this.price 是这只杯子自己的字段。控制台打印 Mug — 8。方法里光秃秃的 name 是另一次查找，不是这个属性。调用不再是 object.method() 这种形状时，this 可能指向别处——那是下一课。这一页只保留普通调用。
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));
方法可以为这一次调用接收输入
add 等着 extra。cart.add(3) 把 3 交进去，加到 count 上，并返回新的合计。控制台打印 5。购物车留着更新后的 count。参数只活在这次调用里；你自己存下来，它才会变成属性。
选跟手头工作相配的动作
函数要住在对象上？存起来，长写法或简写都行。要结果？用 () 调用。要对象自己的字段？通过 this 去读。只要这一次运行用的数字？传入参数。上一页的 Object.keys 列出的是名字。下一页在调用形状变了的时候继续讲 this。
把方法做出的标签放到页面上
给商品 name、price 和 tag。把 product.tag() 写进一个段落。
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>
段落显示 Mug — 8。tag 用商品自己的字段拼出了这串文字。只改 name 或 price，刷新，再读新的一行。下一课：this 关键字——调用不再是普通的 object.method() 时，this 指向哪里。
练习步骤
- 把函数放在
greet上，并打印该属性的typeof。 - 调用
product.greet()，读到Hi。 - 用简写写出
label，并打印product.label()。 - 做出
tag，让this.name和this.price合成一串文字。 - 让
count从 2 开始，调用add(3)，读到5。 - 在 HTML 演示里只改
name或price，刷新，读段落。
常犯的岔
- 打印不带
()的product.greet，却指望看到Hi - 把简写
label() {}当成字符串属性 - 在方法里写光秃秃的
name，而不是this.name - 以为
cart.add(3)会让count停在 2 - 本想调用方法，却去用
Object.keys - 把箭头函数塞进这一页的方法——下一课会在调用形状改变时继续看
this
小结
- 方法是作为属性存放的函数
object.method()运行它，并把返回值交给你- 简写
name() {}存放的是同一种函数 - 普通调用里，
this是点号前面的对象 - 参数接收这一次调用的实参
- 方法拼出的字符串可以填满页面上的一行
- 下一课：
this关键字，当调用不是object.method()时
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部