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
- var str = "A";
- function passStringByValue(str) {
- console.log("**** passStringByValue ****");
- console.log(str); // Output A
- str = "X";
- console.log(str); // Output X
- }
- passStringByValue(str);
- console.log(str); // Output A
Array
- var arr = ["A", "B", "C"];
- function passArrayByValue(arr) {
- console.log("**** passArrayByValue ****");
- console.log(arr); // Output ["A", "B", "C"]
- // Create a new array.
- arr = ["X", "Y", "Z"];
- console.log(arr); // Output ["X", "Y", "Z"]
- }
- function passArrayByReference(arr) {
- console.log("**** passArrayByReference ****");
- console.log(arr); // Output ["A", "B", "C"]
- arr.push("D");
- arr[0] = "W";
- console.log(arr); // Output ["W", "B", "C", "D"]
- }
- // Pass by value.
- passArrayByValue(arr);
- console.log(arr); // Output ["A", "B", "C"]
- // Pass by reference.
- passArrayByReference(arr);
- console.log(arr); // Output ["W", "B", "C", "D"]
Object
- var obj = {
- attr: "A"
- };
- function passObjectByValue(obj) {
- console.log("**** passObjectByValue ****");
- console.log(obj); // Output {attr: "A"}
- // Create a new object.
- obj = {
- attr: "X"
- };
- console.log(obj); // Output {attr: "X"}
- }
- function passObjectByReference(obj) {
- console.log("**** passObjectByReference ****");
- console.log(obj); // Output {attr: "A"}
- obj.attr = "X";
- console.log(obj); // Output {attr: "X"}
- }
- // Pass by value.
- passObjectByValue(obj);
- console.log(obj); // Output {attr: "A"}
- // Pass by reference.
- passObjectByReference(obj);
- console.log(obj); // Output {attr: "X"}
Function
- function myFunction() {
- this.value = "A";
- }
- function passFunctionByReference(fn) {
- console.log("**** passFunctionByReference ****");
- console.log(fn.value); // Output A
- fn.value = "X";
- console.log(fn.value); // Output X
- }
- var myFn = new myFunction();
- // Pass by reference.
- passFunctionByReference(myFn);
- console.log(myFn.value); // Output X
- function myFunction() {
- this.value = "A";
- }
- myFunction.prototype.update = function () {
- console.log("**** myFunction.prototype.update ****");
- console.log(this);
- this.value = "W";
- };
- function passFunctionByValue(fn) {
- console.log("**** passFunctionByValue ****");
- // It will lose keyword "this" in function update. "this" will refer to Window object.
- fn();
- }
- var myFn = new myFunction();
- // Pass by value.
- passFunctionByValue(myFn.update);
- 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:
- function myFunction() {
- this.value = "A";
- }
- myFunction.prototype.update = function () {
- console.log("**** myFunction.prototype.update ****");
- console.log(this);
- this.value = "W";
- };
- function updateFunctionByReference(fn, obj) {
- // "this" will refer to myFunction in function update.
- fn.call(obj);
- }
- var myFn = new myFunction();
- updateFunctionByReference(myFn.update, myFn);
- console.log(myFn.value); // Output W
回應 (Leave a comment)