方法里的 this#

方法里要拿”当前对象自己”的属性，用 this——上面 sing() 里的 this.name 就是 user.name。

1
let user = {
2
  name: 'Tom',
3
  age: 18,
4
  gender: '男',
5
  sing: () => { //注意: 在箭头函数中, this并不指向当前对象 - 指向的是当前对象的父级 【不推荐】
6
    alert(this + ':悠悠的唱着最炫的民族风~')
7
  }
8
}

一、知识回顾（读完直接做下面的实践题）#

1. 函数（function） 是被设计用来执行特定任务的代码块，方便程序的封装复用；定义用 function 关键字，调用写 函数名称(实际参数列表)
2. 因为 JS 是弱类型语言，定义函数时形参、返回值都不需要指定类型；调用时实参个数与形参个数可以不一致（但建议一致）——少传参数会默默算出 NaN，多传的会被忽略，都不报错
3. 匿名函数（没有名称的函数）有两种定义方式：函数表达式 let add = function(a,b){...} 和 箭头函数 let add = (a,b) => {...}；定义后通过变量名调用（add(10,20)）
4. 箭头函数只有一个表达式时，可以省略 {} 和 return（如 let add = (a,b) => a + b;）；后面写事件监听（如 addEventListener('click', () => {...})）最常用它
5. 自定义对象格式：let 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 方法名: function (形参列表) {} }；方法还能简写成 方法名(){}
6. 调用格式：对象名.属性名、对象名.方法名()；方法内部用 this 取当前对象自己的属性（this.name）
7. 对象方法里不要用箭头函数：箭头函数的 this 不指向当前对象，而是指向外层（父级）——顶层写法里就是 window，拿不到属性
8. JSON 全称 JavaScript Object Notation（JavaScript 对象标记法），是文本，语法简单、层次结构鲜明，多用于作为数据载体在网络中传输；格式特点是所有的 key 必须用双引号引起来（不能带方法、不能用单引号）
9. JSON.stringify(js对象) 把 js 对象转为 json 字符串；JSON.parse(json字符串) 把 json 字符串转为 js 对象
10. 数组用 [ ] 定义、索引从 0 开始、数组.length 取长度；常用方法：push() 末尾加、pop() 末尾删、splice() 中间删/插、join() 拼成字符串、includes() 判断包含、forEach() 遍历；数组里放对象就是”多条数据”的存法

二、裸写题#

• 2-1 写一个具名函数做加法 定义一个函数：接收两个参数，返回它们的和。调用它计算 10 + 20，把结果打印到控制台。 做完想一想：这个函数在 Java 里要写成什么样？多了哪两种类型声明？ （练习文件 test_15_具名函数.html 里已经给了骨架和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：函数 = 名字 + 参数 + 返回值；“返回”是把结果交回给调用方，还需要一个地方把结果打印出来 二级 · 方法：定义用 function 函数名(参数){ return ...; }；调用写 函数名(10, 20)；打印用 console.log() 三级 · 骨架：function add(____, ____){ return ____ + ____; } / let result = add(10, 20); / console.log(____);

  参考答案（做完再点开）

  1
  // 定义函数：求两个数的和
  2
  function add(a, b){
  3
    return a + b;
  4
  }
  5
  
  6
  // 调用函数并打印结果
  7
  let result = add(10, 20);
  8
  console.log(result);   // 30

  对照课程 04. JS-函数.html 的第一段。Java 版本要写成 int add(int a, int b){ return a + b; }——多出的两个 int 就是因为 JS 是弱类型，形参和返回值都不用写类型。

• 2-2 用箭头函数重写一边加法，再故意少传一个参数 分两步：

  1. 用箭头函数（匿名函数的一种）实现同样的加法，把 100 和 200 传进去、打印结果
  2. 再调用一次这个函数，只传一个参数，看看打印出来是什么——解释一下为什么不是报错 （练习文件 test_15_箭头函数.html 里已经给了写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：匿名函数没有名字，要把它”存”在变量里才能调用；箭头函数用 => 连接参数和函数体 二级 · 方法：let 变量名 = (参数) => { return ...; }；调用用变量名；打印用 console.log() 三级 · 骨架：let add = (a, b) => { return ____ + ____; } / let result = ____(100, 200); / 再调用一次 add(____) 观察结果

  参考答案（做完再点开）

  1
  // 箭头函数：匿名函数赋给变量 add
  2
  let add = (a, b) => {
  3
    return a + b;
  4
  }
  5
  
  6
  let result = add(100, 200);
  7
  console.log(result);   // 300
  8
  
  9
  // 少传一个参数：b 是 undefined
  10
  console.log(add(100)); // NaN —— 100 + undefined 得不到数字，但不报错

  对照课程 04. JS-函数.html 的第 2 部分（函数表达式与箭头函数二选一）。第 2 步说明：JS 里实参个数与形参个数可以不一致，缺的形参是 undefined，参与算术运算就变成 NaN（Not a Number）——这正是弱类型语言”灵活但容易埋 bug”的地方。

• 2-3 定义一个员工对象并打印它的属性 定义一个对象表示一名员工：姓名 Tom、年龄 18、性别 男，另外给它一个”自我介绍”的方法（打印一句带上自己名字的话）。 然后：打印这个对象的姓名和年龄，再调用它的自我介绍方法。 （练习文件 test_15_自定义对象.html 里已经给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：对象用一对大括号装”属性名: 属性值”；方法就是”值是函数的属性”；取值用点号 二级 · 方法：let user = { name: 'Tom', age: 18, gender: '男', intro(){ ... } }；取值 user.name、调用 user.intro()；方法里用 this.name 拿自己的名字；打印用 console.log() 三级 · 骨架：let emp = { name: '____', age: ____, gender: '____', intro(){ console.log('我是' + ____.name); } } / console.log(emp.____); / emp.____();

  参考答案（做完再点开）

  1
  // 定义员工对象
  2
  let emp = {
  3
    name: 'Tom',
  4
    age: 18,
  5
    gender: '男',
  6
    // 方法：打印一句自我介绍
  7
    intro(){
  8
      console.log('我是' + this.name + '，今年' + this.age + '岁');
  9
    }
  10
  }
  11
  
  12
  // 访问属性
  13
  console.log(emp.name);   // Tom
  14
  console.log(emp.age);    // 18
  15
  
  16
  // 调用方法
  17
  emp.intro();             // 我是Tom，今年18岁

  显示更多显示更少

  对照课程 05. JS-自定义对象.html 的第一段（课程里方法名是 sing，用 alert 弹出 this.name + '悠悠的唱着最炫的民族风~'）。注意：方法不要写成箭头函数——箭头函数的 this 指向 window，this.name 就取不到 Tom 了。

• 2-4 写一个函数判断成绩等级 定义一个函数：接收一个分数，返回对应的等级文字——90 及以上返回 优秀、80 及以上返回 良好、60 及以上返回 及格、其余返回 不及格。 调用它分别在 95、85、72、50 四个分数上测试，把返回的等级打印出来。 （练习文件 test_15_成绩等级.html 里已经给了写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：函数里做”多重条件判断”，每个分支把等级返回出去（不是打印）；测试时循环几个分数调用它 二级 · 方法：function 函数名(分数){ if (… >= 90) { return '优秀'; } else if (…) { … } }；打印用 console.log() 三级 · 骨架：function level(score){ if (score >= 90) { return '____'; } else if (score >= 80) { return '良好'; } else if (score >= ____) { return '及格'; } else { return '不及格'; } } / console.log(level(95));

  参考答案（做完再点开）

  1
  // 判断成绩等级
  2
  function level(score){
  3
    if (score >= 90) {
  4
      return '优秀';
  5
    } else if (score >= 80) {
  6
      return '良好';
  7
    } else if (score >= 60) {
  8
      return '及格';
  9
    } else {
  10
      return '不及格';
  11
    }
  12
  }
  13
  
  14
  // 测试四个分数
  15
  console.log(level(95));  // 优秀
  16
  console.log(level(85));  // 良好
  17
  console.log(level(72));  // 及格
  18
  console.log(level(50));  // 不及格

  显示更多显示更少

  三个检查点：① 判断顺序必须从高到低——score >= 60 若写在最前面，95 分也会被判成”及格”；② 每个分支用 return 把结果交回去，函数里不打印；③ return 执行后函数立刻结束，后面的 else if 不会再判断。

三、综合题#

• 3-1 用”对象 + 数组 + 函数 + JSON”做一份员工列表数据 不碰页面（DOM 以后再学），先在控制台里把”多条数据”处理明白：

  1. 用对象描述 3 名员工，每人四个属性：姓名、年龄、性别、职位（自己编数据）
  2. 把这 3 个对象放进一个数组
  3. 写一个函数 describe(emp)：接收一个员工对象，返回一句话（如 Tom，18岁，男，讲师）——用模板字符串拼
  4. 遍历这个数组，对每个员工调用 describe，把结果打印出来
  5. 打印这个数组的长度
  6. 最后把整个数组转成 JSON 字符串打印出来（模拟发给服务器的数据），再把这段 JSON 字符串转回对象，取出第一个员工的姓名打印 （练习文件 test_15_综合_员工列表.html 里已经给了写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：第 12 步是”对象装数据、数组装对象”；第 34 步是”函数加工 + 循环遍历”；第 6 步是对象与 JSON 文本之间的两个互转方法 二级 · 方法：数组 let emps = [ {…}, {…} ]；函数 function describe(emp){ return …; }；遍历 for (let i = 0; i < emps.length; i++)；长度 emps.length；互转 JSON.stringify(emps)、JSON.parse(字符串) 三级 · 骨架：let emps = [ { name: '____', age: 18, gender: '男', position: '____' }, … ]; / function describe(emp){ return ${emp.name}，${emp.____}岁，…; } / for (let i = 0; i < emps.____; i++) { console.log(describe(____[i])); } / let json = JSON.stringify(____); / let obj = JSON.parse(____); console.log(obj[0].____);

  参考答案（做完再点开）

  1
  //1. 用对象描述员工，放进数组（多条数据）
  2
  let emps = [
  3
    { name: 'Tom', age: 18, gender: '男', position: '讲师' },
  4
    { name: 'Jerry', age: 20, gender: '女', position: '班主任' },
  5
    { name: 'Lucy', age: 22, gender: '女', position: '学工主管' }
  6
  ];
  7
  
  8
  //2. 写一个函数：接收员工对象，返回一句描述
  9
  function describe(emp){
  10
    return `${emp.name}，${emp.age}岁，${emp.gender}，${emp.position}`;
  11
  }
  12
  
  13
  //3. 遍历数组，逐个打印描述
  14
  for (let i = 0; i < emps.length; i++) {
  15
    console.log(describe(emps[i]));
  16
  }
  17
  
  18
  //4. 数组长度
  19
  console.log(emps.length);   // 3
  20
  
  21
  //5. 对象数组 → JSON 字符串（准备发给服务器）
  22
  let json = JSON.stringify(emps);
  23
  console.log(json);          // [{"name":"Tom","age":18,...}, ...]
  24
  
  25
  //6. JSON 字符串 → 对象，再取值
  26
  let obj = JSON.parse(json);
  27
  console.log(obj[0].name);   // Tom

  显示更多显示更少

  三个检查点：① describe(emp) 里用 emp.name 取的是传进来的那个对象，不能写成固定的名字；② 模板字符串的引号是反引号，${} 里放的是表达式（emp.age）；③ 第 5 步打印出的 JSON 里所有 key 都是双引号的文本——它就是”网络传输时数据的样子”，第 6 步的 JSON.parse 是它的逆向操作。