副队长JavaScript教程(44)-JS对象方法的使用

点此查看所有教程、项目、源码导航

1. 背景

前面两篇，我们认识了 JS 对象，也学习了对象属性的增删改查。
属性用来描述事物的静态特征，比如学生的姓名、年龄，汽车的品牌、颜色。

但是现实里的事物，除了特征，还会有自己的行为动作。
学生可以读书、写作业；汽车可以启动、刹车、鸣笛。
在 JS 对象里，用来表示行为动作的成员，我们称之为方法。

本质上来说：方法就是放在对象里面的函数。

2. 如何定义对象方法

我们还是使用对象字面量{}来书写。
键名就是方法名，冒号后面的值，写一个函数。

varstudent={// 属性name:"张三",age:20,// 方法：函数写在对象内部，就是方法readBook:function(){console.log("张三正在读书");},doHomework:function(){console.log("张三正在写作业");}};

readBook和doHomework就是这个学生对象的两个方法。

3. 方法的调用

调用方式和普通函数很像，通过对象访问方法名，后面加上小括号()。

varstudent={name:"张三",readBook:function(){console.log("张三正在读书");}};// 调用方法student.readBook();student["readBook"]();

运行结果：

张三正在读书 张三正在读书

一个容易踩坑的区分：
student.readBook只是拿到这个函数本身，不会执行；
student.readBook()才是执行这个方法里面的代码。

4. 方法里面的 this 关键字（初步认识）

现在出现一个问题：上面的代码里，我们直接写死了 “张三”。
如果对象改成李四，方法里面的文字也要手动修改，非常麻烦。

JS 在方法内部提供了this，在对象的方法里面，this 代表调用这个方法的当前对象。

我们改造上面的例子：

varstudent={name:"张三",age:20,readBook:function(){// this 代表当前这个 student 对象console.log(this.name+"正在读书");}};student.readBook();

输出：

张三正在读书

我们再新建另一个学生对象，感受 this 的自动适配：

varstudent2={name:"李四",readBook:function(){console.log(this.name+"正在读书");}};student2.readBook();

输出：

李四正在读书

✅ 重点理解：
哪个对象调用方法，方法里的this就指向谁。
this 不需要我们手动传参，JS 自动帮我们绑定。
现阶段我们先记住这个基础规则，后面会单独一篇深入讲解 this。

5. 带参数、带返回值的方法

和普通函数一样，对象的方法同样支持参数，也可以使用 return 返回结果。

示例：定义一个打招呼的方法，接收一个参数

varperson={name:"小明",sayHi:function(friendName){console.log(this.name+"向"+friendName+"打招呼");}};person.sayHi("小红");

输出：

小明向小红打招呼

示例：方法带有 return 返回数据

varcalculator={add:function(a,b){returna+b;}};varres=calculator.add(10,20);console.log(res);

输出：

30

6. 动态新增、修改、删除方法

和属性一样，方法也可以后续动态增删改，语法完全一致。

vardog={name:"旺财"};// 新增方法dog.bark=function(){console.log(this.name+"汪汪叫");};dog.bark();// 修改方法dog.bark=function(){console.log(this.name+"小声汪汪叫");};dog.bark();// 删除方法deletedog.bark;

7. 简写写法（ES6 方法简写，了解即可）

还有一种更简洁的写法，去掉: function，适合日常开发，新手可以先看懂：

varstudent={name:"张三",// 简写形式readBook(){console.log(this.name+"读书");}};student.readBook();

8. 小结

1. 方法本质：写在对象内部的函数，用来描述对象的行为。
2. 调用：对象.方法名()或者对象["方法名"]()。
3. 核心关键字 this：在对象方法中，谁调用这个方法，this 就指向谁。
4. 方法和普通函数一样，支持形参、return 返回值。
5. 方法同样支持动态新增、修改、删除，操作语法和属性完全相同。