浅析JavaScript中的方法链

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

JavaScript 中方法链

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

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

方法链的例子

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

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

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

在数组上也能用方法链：

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

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

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

方法链是怎样工作的

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

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

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

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

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

在 JavaScript 中实现方法链

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法链和类

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

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

总结

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

当前名称：浅析JavaScript中的方法链
网站路径：http://www.csdahua.cn/qtweb/news7/414657.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

静态网站知识

同城分类信息

免备案虚拟主机　　 　成都茶叶销售　　 　成都小程序定制开发公司　　 　成都移动服务器托管　　 　成都西信机房托管　　 　成都展柜设计公司　　 　雅安服务器托管　　 　成都品牌网站设计　　 　界面设计　　 　软文发布平台　　 　兴久牧业　　 　青羊总部基地　　 　成都商城网站建设　　 　成都做网站　　 　成都柴油发电机组　　 　重庆主机托管　　 　电信成都枢纽中心　　 　香港云空间　　 　专业网站建设　　 　精灵网