25.修改this指向.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. function fn1(x, y) {
  11. var sum = x + y;
  12. console.log(sum, "sum");
  13. console.log(this, "this");
  14. console.log(this.name, "name");
  15. }
  16. var obj = {
  17. name: "Lucy",
  18. };
  19. fn1(2, 3);
  20. fn1.call(obj, 2, 3);
  21. //单行注释
  22. /**
  23. * 多行注释
  24. */
  25. /** 修改this指向
  26. * 1.call(修改this指向,参数1,参数2...)
  27. * 2.apply(修改this指向,[参数1,参数2,...])
  28. * 3.bind(修改this指向,参数1,参数2)()
  29. */
  30. /**
  31. * call、apply和bind区别
  32. * 1.bind无法进行函数调用,call和apply可以直接进行函数调用;
  33. * 2.call从第二项开始,要传的参数逐个传入;
  34. * 3.apply从第二项开始,要传的参数在数组中逐个传入
  35. */
  36. function fn2(a, b) {
  37. var sum = a * b;
  38. console.log(sum, "sum1");
  39. console.log(this, "this1");
  40. console.log(this.sex, "sex");
  41. }
  42. var obj1 = {
  43. sex: "女",
  44. address: "11111",
  45. };
  46. fn2(4, 5);
  47. fn2.apply(obj1, [4, 5]);
  48. function fn3(i,j) {
  49. var sum = i - j;
  50. console.log(sum,'sum');
  51. console.log(this,'this');
  52. console.log(this.age,'age');
  53. }
  54. var obj2 = {
  55. age: 18,
  56. day: '星期四'
  57. }
  58. fn3(79,8);
  59. fn3.bind(obj2,79,8)();
  60. </script>
  61. </body>
  62. </html>