2014
Mar
05




Definitions

Pass by Value

If the function is able to assign values to its parameters, only its local copy is assigned — that is, anything passed into a function call is unchanged in the caller’s scope when the function returns.

Pass by Reference

Pass-by-reference typically means that the function can modify (i.e. assign to) the variable used as argument — something that will be seen by its caller.

String

Pass String By Value
  1. var str = "A";
  2.  
  3. function passStringByValue(str) {
  4. console.log("**** passStringByValue ****");
  5. console.log(str); // Output A
  6. str = "X";
  7. console.log(str); // Output X
  8. }
  9.  
  10. passStringByValue(str);
  11. console.log(str); // Output A

Array

Pass Array By Value or By Reference
  1. var arr = ["A", "B", "C"];
  2. function passArrayByValue(arr) {
  3. console.log("**** passArrayByValue ****");
  4. console.log(arr); // Output ["A", "B", "C"]
  5. // Create a new array.
  6. arr = ["X", "Y", "Z"];
  7. console.log(arr); // Output ["X", "Y", "Z"]
  8. }
  9.  
  10. function passArrayByReference(arr) {
  11. console.log("**** passArrayByReference ****");
  12. console.log(arr); // Output ["A", "B", "C"]
  13. arr.push("D");
  14. arr[0] = "W";
  15. console.log(arr); // Output ["W", "B", "C", "D"]
  16. }
  17.  
  18. // Pass by value.
  19. passArrayByValue(arr);
  20. console.log(arr); // Output ["A", "B", "C"]
  21.  
  22. // Pass by reference.
  23. passArrayByReference(arr);
  24. console.log(arr); // Output ["W", "B", "C", "D"]

Object

Pass Object By Value or By Reference
  1. var obj = {
  2. attr: "A"
  3. };
  4.  
  5. function passObjectByValue(obj) {
  6. console.log("**** passObjectByValue ****");
  7. console.log(obj); // Output {attr: "A"}
  8. // Create a new object.
  9. obj = {
  10. attr: "X"
  11. };
  12. console.log(obj); // Output {attr: "X"}
  13. }
  14.  
  15. function passObjectByReference(obj) {
  16. console.log("**** passObjectByReference ****");
  17. console.log(obj); // Output {attr: "A"}
  18. obj.attr = "X";
  19. console.log(obj); // Output {attr: "X"}
  20. }
  21.  
  22. // Pass by value.
  23. passObjectByValue(obj);
  24. console.log(obj); // Output {attr: "A"}
  25.  
  26. // Pass by reference.
  27. passObjectByReference(obj);
  28. console.log(obj); // Output {attr: "X"}

Function

Pass Function By Reference
  1. function myFunction() {
  2. this.value = "A";
  3. }
  4.  
  5. function passFunctionByReference(fn) {
  6. console.log("**** passFunctionByReference ****");
  7. console.log(fn.value); // Output A
  8. fn.value = "X";
  9. console.log(fn.value); // Output X
  10. }
  11.  
  12. var myFn = new myFunction();
  13. // Pass by reference.
  14. passFunctionByReference(myFn);
  15. console.log(myFn.value); // Output X
Pass Function By Value With Keyword "this"
  1. function myFunction() {
  2. this.value = "A";
  3. }
  4.  
  5. myFunction.prototype.update = function () {
  6. console.log("**** myFunction.prototype.update ****");
  7. console.log(this);
  8. this.value = "W";
  9. };
  10.  
  11. function passFunctionByValue(fn) {
  12. console.log("**** passFunctionByValue ****");
  13. // It will lose keyword "this" in function update. "this" will refer to Window object.
  14. fn();
  15. }
  16.  
  17. var myFn = new myFunction();
  18. // Pass by value.
  19. passFunctionByValue(myFn.update);
  20. console.log(myFn.value); // Output A

The problem here is the use of the "this" keyword. It’s a handy short-hand for referring to the current object context. When passing a function as a parameter, though, the context is lost. More accurately, this now refers to the context of the object making the call instead of the object’s function we just passed in. For standalone functions, this would be the window object and for functions called from an event, this would be the event object.

To solve this problem, you can use the solution below:

Solution: Pass Function By Reference With Keyword "this"
  1. function myFunction() {
  2. this.value = "A";
  3. }
  4.  
  5. myFunction.prototype.update = function () {
  6. console.log("**** myFunction.prototype.update ****");
  7. console.log(this);
  8. this.value = "W";
  9. };
  10.  
  11. function updateFunctionByReference(fn, obj) {
  12. // "this" will refer to myFunction in function update.
  13. fn.call(obj);
  14. }
  15.  
  16. var myFn = new myFunction();
  17. updateFunctionByReference(myFn.update, myFn);
  18. console.log(myFn.value); // Output W

View Demo

Related Posts


回應 (Leave a comment)