Guest User

Untitled

a guest
Oct 23rd, 2017
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.89 KB | None | 0 0
  1. let a = {
  2. prop : 1,
  3. f : function() {
  4. console.log(this.prop);
  5. }
  6. },
  7. b = {
  8. prop : 2,
  9. f : function() {
  10. console.log(this.prop);
  11. }
  12. }
  13. /*
  14. Функция имеет контекст если:
  15. -Функция вызывается из объекта через точку или квадратные скобки
  16. -для вызова используется bind, call или apply
  17. -функция вызывается с ключевым словом new
  18. */
  19.  
  20.  
  21. // ----------------------------------------------------------------------------------------------------------
  22. // bind | Когда необходимо передать куда-либо функцию с измененным контекстом, либо отложить выполнение |
  23. // | функции с измененным контекстом |
  24. //------------------------------------------------------------------------------------------------------------
  25. // call | Когда нужно изменить контекст ф-ции с заранее известным кол-вом аргументов и сразу вызвать ее |
  26. //------------------------------------------------------------------------------------------------------------
  27. // apply | Когда нужно изменить контекст ф-ции с заранее НЕизвестным кол-вом аргументов и сразу вызвать ее |
  28. //------------------------------------------------------------------------------------------------------------
  29.  
  30.  
  31. //bind - берет функцию, меняет контекст и возвращает ее, но не вызывает
  32. /*a.f();
  33. b.f();*/
  34. //При данной операции...теряется контекст функции (она становиться уже вне контекста объекта и
  35. //возвращает undefined
  36. let newFunc = a.f;
  37. newFunc();
  38. //При данном способе мы привязываем контекст объекта "B". Т.е. теперь this указывает на объект "B"
  39. let newFunc = a.f.bind(b);
  40. newFunc();
  41.  
  42. //Назначаем функции а в контексте b. Т.е. мы запускаем функцию из а, но в контексте объекта b
  43. a.f = a.f.bind(b);
  44.  
  45. a.f();
  46. b.f();
  47.  
  48. //Изменить контекст можно только один раз
  49. let newFunc = a.f.bind(b);
  50. newFunc = newFunc.bind(a);
  51. newFunc();
  52.  
  53. //call - меняет контекст функции и вызывает ее
  54.  
  55. function summ(a, b) {
  56. return this.prop + a + b;
  57. }
  58.  
  59. let a = {
  60. prop : 1,
  61. f : summ
  62. },
  63. b = {
  64. prop : 2,
  65. f : summ
  66. };
  67.  
  68. a.f(1,1);
  69. b.f(2,2);
  70.  
  71. a.f = a.f.bind(b, 1, 1);
  72. b.f = b.f.bind(a, 2, 2);
  73. a.f();
  74. b.f();
  75.  
  76.  
  77. //Пример с bind
  78. for (let i = 0; i < 10; i++) {
  79. setTimeout((function(num){
  80. console.log(num);
  81. }).bind(this, i), 1000 * i);
  82. }
  83.  
  84. // А теперь мы можем сделать проще. Просто указать в каком контексте будет работать фукнция
  85. console.log(summ.call(a, 1, 1));
  86. console.log(summ.call(b, 2, 2));
  87.  
  88. //Apply - тоже самое что и call, только аргументы можно передавать в виде массива
  89.  
  90. console.log(summ.apply(a, [1, 1]));
  91. console.log(summ.apply(b, [2, 2]));
  92.  
  93. let a = {
  94. prop : 1,
  95. f : function() {
  96. let func = function() {
  97. console.log(this.prop);
  98. };
  99. // func();
  100. func.call(this);
  101. }
  102. },
  103. b = {
  104. prop : 2,
  105. f : summ
  106. };
  107.  
  108. a.f();
  109.  
  110. let a = {
  111. prop : 1,
  112. f : function() {
  113.  
  114. let that = this;
  115.  
  116. let func = function() {
  117. console.log(that.prop);
  118. };
  119. // func();
  120. func();
  121. }
  122. },
  123. b = {
  124. prop : 2,
  125. f : summ
  126. };
Add Comment
Please, Sign In to add comment