浅析 JavaScript 中的方法链

开发 前端
方法链是一种流行的编程方法,可以帮助你写出更简洁易读的代码。在本文中我们一起学习 JavaScript 中的方法链是什么,以及它是怎样工作的。另外我们还会探讨如何使用方法链接来提高代码的质量和可读性。

 方法链是一种流行的编程方法,可以帮助你写出更简洁易读的代码。在本文中我们一起学习 JavaScript 中的方法链是什么,以及它是怎样工作的。另外我们还会探讨如何使用方法链接来提高代码的质量和可读性。

[[381301]]

JavaScript 中方法链

你一定曾经用过 jQuery 之类的库,可能看到过类似的东西。在进行级联时主要有两种方法:一种是一个接一个的执行方法,另一种是在同一行上。在纯 JavaScript 中这种做法也很普遍。你可以在数组、字符串和 promise 看到它。

在这些情况下所有的过程都是相同的。首先引用要使用的对象。然后根据需要使用多种方法。但不是单独使用这些方法,而要一个接一个地使用。基本上是把它们链接在一起。先看一些例子。

方法链的例子

在处理字符串时有两种方法。第一个种不用方法链,这要求必须在字符串上分别使用每个方法,这样必须每次都引用这个字符串。

第二种方式是用方法链。这时可以用所有想要的字符串方法。写出的代码也可以是单行或多行,这取决于你的习惯。而且只需要引用一次字符串。尽管结果相同,但是代码量却有很大的差异。

 

  1. // 在字符串上使用方法链的例子 
  2. let myStr = ' - Hello-world. ' 
  3.  
  4. // 不用方法链: 
  5. myStr = myStr.toLowerCase() 
  6. myStr = myStr.replace(/-/g, ' '
  7. myStr = myStr.trim() 
  8.  
  9. // 用方法链: 
  10. myStr = myStr.toLowerCase().replace(/-/g, ' ').trim() 
  11.  
  12. // 多行方法链的写法: 
  13. myStr = myStr 
  14.   .toLowerCase() 
  15.   .replace(/-/g, ' '
  16.   .trim() 
  17.  
  18. // 查看 "myStr" 的值 
  19. console.log(myStr) 
  20. // Output
  21. // 'hello world.' 

在数组上也能用方法链:

 

  1. // 在数组上使用方法链的例子 
  2. let myArray = [1, 7, 3, null, 8, null, 0, null'20', 15] 
  3.  
  4. // 不用方法链: 
  5. myArray = myArray.filter(el => typeof el === 'number' && isFinite(el)) 
  6. myArray = myArray.sort((x, y) => x - y) 
  7.  
  8. // 使用方法链: 
  9. myArray = myArray.filter(el => typeof el === 'number' && isFinite(el)).sort((x, y) => x - y) 
  10.  
  11. // 多行方法链的写法: 
  12. myArray = myArray 
  13.   .filter(el => typeof el === 'number' && isFinite(el)) 
  14.   .sort((x, y) => x - y) 
  15.  
  16. // 查看 "myArray" 的值. 
  17. console.log(myArray) 
  18. // Output
  19. // [ 0, 1, 3, 7, 8 ] 

Promise 是一个很好的例子,因为在使用时差不多全都是方法链。首先创建一个 promise,然后添加适当的处理函数。

 

  1. // 创建 Promise 
  2. const myPromise = new Promise((resolve, reject) => { 
  3.   // 创建一个假延迟 
  4.   setTimeout(function() { 
  5.     // 用一条简单的消息解决诺言 promise 
  6.     resolve('Sorry, no data.'
  7.   }, 1000) 
  8. }) 
  9.  
  10. // 使用方法链: 
  11. myPromise.then((data) => console.log(data)).catch(err => console.log(error)) 
  12.  
  13. // 多行方法链的写法: 
  14. myPromise 
  15.   .then((data) => console.log(data)) 
  16.   .catch(err => console.log(error)) 
  17. // Output
  18. // 'Sorry, no data.' 

方法链是怎样工作的

接下来研究它是怎样工作的。答案很简单,是因为 this 。

假设有一个对象。如果在该对象内使用 this,它会引用这个对象。如果创建该对象的实例或副本,则 this 将会引用这个实例或副本。当你使用某些字符串或数组方法时,实际上是在用一个对象。

 

  1. const myObj = { 
  2.   name'Stuart'
  3.   age: 65, 
  4.   sayHi() { 
  5.     // 这里的 this 是 myObj 的引用 
  6.     return `Hi my name is ${this.name}.` 
  7.   }, 
  8.   logMe() { 
  9.     console.log(this) 
  10.   } 
  11.  
  12. myObj.sayHi() 
  13. // Output
  14. // 'Hi my name is Stuart.' 
  15.  
  16. myObj.logMe() 
  17. // Output
  18. // { 
  19. //   name'Stuart'
  20. //   age: 65, 
  21. //   sayHi: ƒ, 
  22. //   logMe: ƒ 
  23. // } 

如果是字符串,则使用的是原始数据类型。但是你所使用的方法例如 toLowerCase(),存在于 String 对象的原型中。在对象上使用方法链还有一个关键要素:this。

为了使链起作用,方法必须返回与其一起使用的对象,也就是必须返回 this。就像接力赛跑时的接力棒一样。

在 JavaScript 中实现方法链

为了使方法链有效,必须满足三个条件:首先,需要一些对象。其次,该对象需要一些以后可以调用的方法。第三,这些方法必须返回对象本身,它们必须返回 this 才能使用方法链。

让我们创建一个简单的对象 person。person 有 name, age 和 state 属性。state 用来表示当前处于什么状态。要想改变这个状态,需要用到几个方法:walk(), sleep(), eat(), drink(), work() 和 exercise()。

由于我们希望所有这些方法都是可链的,所以它们都必须返回 this。另外代码中还有一个用来把当前状态记录到控制台的工具方法。

 

  1. // 创建 person 对象 
  2. const person = { 
  3.   name'Jack Doer'
  4.   age: 41, 
  5.   state: null
  6.   logState() { 
  7.     console.log(this.state) 
  8.   }, 
  9.   drink() { 
  10.     // 修改 person 的 state. 
  11.     this.state = 'Drinking.' 
  12.  
  13.     // 把状态输出到控制台 
  14.     this.logState() 
  15.  
  16.     // 返回 this 值。 
  17.     return this 
  18.   }, 
  19.   eat() { 
  20.     this.state = 'Eating.' 
  21.     this.logState() 
  22.     return this 
  23.   }, 
  24.   exercise() { 
  25.     this.state = 'Exercising.' 
  26.     this.logState() 
  27.     return this 
  28.   }, 
  29.   sleep() { 
  30.     this.state = 'Sleeping.' 
  31.     this.logState() 
  32.     return this 
  33.   }, 
  34.   walk() { 
  35.     this.state = 'Walking.' 
  36.     this.logState() 
  37.     return this 
  38.   }, 
  39.   work() { 
  40.     this.state = 'Working.' 
  41.     this.logState() 
  42.     return this 
  43.   } 
  44.  
  45. //  
  46. person 
  47.   .drink() // Output'Drinking.' 
  48.   .exercise() // Output'Exercising.' 
  49.   .eat() // Output'Eating.' 
  50.   .work() // Output'Working.' 
  51.   .walk() // Output'Walking.' 
  52.   .sleep() // Output'Sleeping.' 
  53.  
  54. // 写在一行上 
  55. person.drink().exercise().eat().work().walk().sleep() 
  56. // Output
  57. // 'Drinking.' 
  58. // 'Exercising.' 
  59. // 'Eating.' 
  60. // 'Working.' 
  61. // 'Walking.' 
  62. // 'Sleeping.' 

方法、链、this 和箭头函数必须使用

也意味着无法使用箭头函数创建方法链。因为在箭头函数中,this 没有绑定到对象的实例,而是全局对象 window 的引用。如果返回 this,那么返回的不是对象本身而是 window。

另一个问题是从箭头函数内部访问和修改对象属性。由于 this 是全局对象 window,所以不能用它来引用对象及其属性。

如果你一定要使用箭头函数,必须想办法绕过这种方法。不用 this 来引用该对象,必须直接通过其名称引用该对象,也就是用对象名替换所有出现在箭头功能内的 this。

 

  1. // 创建 person 对象 
  2. const person = { 
  3.   name'Jack Doer'
  4.   age: 41, 
  5.   state: null
  6.   logState() { 
  7.     console.log(this.state) 
  8.   }, 
  9.   drink: () => { 
  10.     person.state = 'Drinking.' 
  11.  
  12.     person.logState() 
  13.  
  14.     return person 
  15.   }, 
  16.   eat: () => { 
  17.     person.state = 'Eating.' 
  18.  
  19.     person.logState() 
  20.  
  21.     return person 
  22.   }, 
  23.   exercise: () => { 
  24.     person.state = 'Exercising.' 
  25.  
  26.     person.logState() 
  27.  
  28.     return person 
  29.   }, 
  30.   sleep: () => { 
  31.     person.state = 'Sleeping.' 
  32.  
  33.     person.logState() 
  34.  
  35.     return person 
  36.   }, 
  37.   walk: () => { 
  38.     person.state = 'Walking.' 
  39.  
  40.     person.logState() 
  41.  
  42.     return person 
  43.   }, 
  44.   work: () => { 
  45.     person.state = 'Working.' 
  46.  
  47.     person.logState() 
  48.  
  49.     return person 
  50.   } 
  51.  
  52. //  
  53. person 
  54.   .drink() // Output'Drinking.' 
  55.   .exercise() // Output'Exercising.' 
  56.   .eat() // Output'Eating.' 
  57.   .work() // Output'Working.' 
  58.   .walk() // Output'Walking.' 
  59.   .sleep() // Output'Sleeping.' 

这样做的缺点是灵活性不好。如果如果用Object.assign() 和 Object.create()复制对象,所有箭头函数仍然会硬连接到原始对象。

 

  1. // 创建原始 person 对象 
  2. const person = { 
  3.   name'Jack Doer'
  4.   age: 41, 
  5.   state: null
  6.   logState() { 
  7.     // 打印整个对象 
  8.     console.log(this) 
  9.   }, 
  10.   drink: () => { 
  11.     person.state = 'Drinking.' 
  12.  
  13.     person.logState() 
  14.  
  15.     return person 
  16.   }, 
  17.   eat: () => { 
  18.     person.state = 'Eating.' 
  19.  
  20.     person.logState() 
  21.  
  22.     return person 
  23.   } 
  24.  
  25. // 让 person eat 
  26. person.eat() 
  27. // Output
  28. // { 
  29. //   name'Jack Doer'
  30. //   age: 41, 
  31. //   state: 'Eating.'
  32. //   logState: ƒ, 
  33. //   drink: ƒ, 
  34. //   eat: ƒ 
  35. // } 
  36.  
  37. // 基于person对象创建新对象。 
  38. const newPerson = new Object(person) 
  39.  
  40. // 修改 "name" 和 "age" 属性 
  41. newPerson.name = 'Jackie Holmes' 
  42. newPerson.age = 33 
  43.  
  44. // 让 newPerson drink。 
  45. // 这会打印 Jack Doer 而不是 Jackie Holmes。 
  46. newPerson.drink() 
  47. // Output
  48. // { 
  49. //   name'Jack Doer'
  50. //   age: 41, 
  51. //   state: 'Drinking.'
  52. //   logState: ƒ, 
  53. //   drink: ƒ, 
  54. //   eat: ƒ 
  55. // } 

但是,如果用 Object() 构造函数,就不会发生上述问题。如果用 new 关键字的和 Object() 构造造函数,将会创建独立的新对象。当你对这个新对象使用某个方法时,它将仅对这个新对象有效,而对原始对象无效。

 

  1. // 创建原始 person 对象 
  2. const person = { 
  3.   name'Jack Doer'
  4.   age: 41, 
  5.   state: null
  6.   logState() { 
  7.     // 打印整个对象 
  8.     console.log(this) 
  9.   }, 
  10.   drink: () => { 
  11.     person.state = 'Drinking.' 
  12.  
  13.     person.logState() 
  14.  
  15.     return person 
  16.   }, 
  17.   eat: () => { 
  18.     person.state = 'Eating.' 
  19.  
  20.     person.logState() 
  21.  
  22.     return person 
  23.   } 
  24.  
  25. // 让 person eat. 
  26. person.eat() 
  27. // Output
  28. // { 
  29. //   name'Jack Doer'
  30. //   age: 41, 
  31. //   state: 'Eating.'
  32. //   logState: ƒ, 
  33. //   drink: ƒ, 
  34. //   eat: ƒ 
  35. // } 
  36.  
  37. // 基于 person 对象创建新对象  
  38. const newPerson = new Object(person) 
  39.  
  40. // 修改 "name" 和 "age" 属性 
  41. newPerson.name = 'Jackie Holmes' 
  42. newPerson.age = 33 
  43.  
  44. // 让 newPerson drink. 
  45. newPerson.drink() 
  46. // Output
  47. // { 
  48. //   name'Jackie Holmes'
  49. //   age: 33, 
  50. //   state: 'Drinking.'
  51. //   logState: ƒ, 
  52. //   drink: ƒ, 
  53. //   eat: ƒ 
  54. // } 

如果你一定要用箭头功能,并想要复制对象的话,最好用 Object() 构造函数和 new 关键字创建这些副本。否则只需要用常规函数就够了。

方法链和类

如果你喜欢使用 JavaScript 类,也可以在JavaScript中使用方法链接。除了语法略又不同外,整个过程和对象是一样的。但是要注意所有可链的方法都必须返回 this。

 

  1. // 创建 Person 类 
  2. class Person { 
  3.   constructor(name, age) { 
  4.     this.name = name 
  5.     this.age = age 
  6.     this.state = null 
  7.   } 
  8.  
  9.   logState() { 
  10.     console.log(this.state) 
  11.   } 
  12.  
  13.   drink() { 
  14.     this.state = 'Drinking.' 
  15.  
  16.     this.logState() 
  17.  
  18.     return this 
  19.   } 
  20.  
  21.   eat() { 
  22.     this.state = 'Eating.' 
  23.  
  24.     this.logState() 
  25.  
  26.     return this 
  27.   } 
  28.  
  29.   sleep() { 
  30.     this.state = 'Sleeping.' 
  31.  
  32.     this.logState() 
  33.  
  34.     return this 
  35.   } 
  36.  
  37. // 创建 Person 类的实例 
  38. const joe = new Person('Joe', 55) 
  39.  
  40. // 使用方法链 
  41. joe 
  42.   .drink() // Output'Drinking.' 
  43.   .eat() // Output'Eating.' 
  44.   .sleep() // Output'Sleeping.' 

总结

方法链是非常有用的,它可以帮你编写更短、更易读的代码。

责任编辑:华轩 来源: 前端先锋
相关推荐

2009-07-27 09:29:38

ASP.NET中Jav

2010-09-30 15:19:33

2009-10-12 10:33:11

Javascript替

2009-09-16 16:32:20

JavaScript静

2009-07-17 16:41:48

actionPerfoSwing

2023-04-07 09:07:11

2023-03-09 12:30:55

2023-02-24 14:57:42

区块链元宇宙人工智能

2011-05-12 18:26:08

Javascript作用域

2021-07-27 22:56:00

JavaScript编程开发

2021-08-10 09:57:27

JavaScriptPromise 前端

2009-07-06 13:18:35

Servlet方法

2016-10-13 19:33:10

javascript数组indexOf

2021-04-26 07:51:00

JavaScript方法函数

2018-02-09 11:08:49

区块链算法主流

2009-05-21 09:24:42

表空间查询Oracle

2009-09-08 16:22:27

c# listBox

2016-10-19 14:35:20

JavaScript函数式编程

2016-09-06 21:37:41

2011-03-07 09:41:10

JavaScript
点赞
收藏

51CTO技术栈公众号