Trong bài viết này, chúng ta sẽ xem cách javascript chuyển qua tham chiếu hoặc giá trị hoạt động và sự khác biệt giữa hai phương thức
Mục lục
- Giới thiệu về chuyển javascript theo tham chiếu và chuyển theo giá trị
- Chuyển Javascript theo tham chiếu
- Javascript vượt qua giá trị
- lời chia tay
Giới thiệu về chuyển javascript theo tham chiếu và chuyển theo giá trị
Trước khi đi sâu vào truyền javascript theo tham chiếu hoặc truyền theo hàm giá trị, điều quan trọng là phải hiểu sự khác biệt giữa nguyên hàm và đối tượng
giá trị nguyên thủy
Đây là những giá trị cơ bản nhất mà người ta có thể nghĩ đến, bao gồm, không xác định, null, boolean, chuỗi và số. Các giá trị nguyên thủy được truyền theo giá trị trong javascript
Trong khi tất cả các đối tượng [bao gồm cả hàm] được truyền theo tham chiếu trong javascript
Hãy cho chúng tôi hiểu truyền theo tham chiếu và truyền theo giá trị là gì trước khi xem các ví dụ
Chuyển Javascript theo tham chiếu
Trong Pass by Reference, một hàm được gọi bằng cách chuyển trực tiếp tham chiếu/địa chỉ của biến làm đối số. Thay đổi đối số bên trong hàm ảnh hưởng đến biến được truyền từ bên ngoài hàm. Trong các đối tượng và mảng Javascript được truyền theo tham chiếu
//javascript pass by reference
function callByReference[varObj] {
console.log["Inside Call by Reference Method"];
varObj.a = 100;
console.log[varObj];
}
let varObj = {
a: 1
};
console.log["Before Call by Reference Method"];
console.log[varObj];
callByReference[varObj]
console.log["After Call by Reference Method"];
console.log[varObj];
}
đầu ra
Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
Javascript vượt qua giá trị
Trong javascript truyền theo giá trị, hàm được gọi bằng cách truyền trực tiếp giá trị của biến làm đối số. Do đó, ngay cả việc thay đổi đối số bên trong hàm cũng không ảnh hưởng đến biến được truyền từ bên ngoài hàm
Điều quan trọng cần lưu ý là trong javascript, tất cả các đối số của hàm luôn được truyền theo giá trị. Tức là JavaScript sao chép các giá trị của các biến truyền vào các đối số bên trong hàm
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
Giải thích mã
Như bạn có thể thấy ở đây, khi chúng ta đã chuyển biến y vào hàm square, giá trị của y được sao chép vào biến x bằng javascript [do đó chuyển theo giá trị]
Lưu ý rằng việc chuyển một đối số chức năng theo giá trị không ảnh hưởng đến chính biến ban đầu, như khi bạn tạo một biến mới [y trong trường hợp này] và gán nó cho giá trị của một biến khác [x], một vị trí khác trong bộ nhớ riêng biệt . Vì vậy, theo giá trị sao chép giá trị của biến ban đầu [a] vào hai vị trí riêng biệt trong bộ nhớ
Mặt khác, trong trường hợp này nếu chúng ta truyền biến y theo tham chiếu, thì giá trị của nó sẽ thay đổi thành 100, vì khi truyền theo tham chiếu, hàm sẽ tự lấy biến gốc và sử dụng nó trong hàm thay vì sử dụng bản sao của
lời chia tay
Khi so sánh cả hai hàm, cụ thể là truyền javascript theo tham chiếu, truyền theo giá trị, chúng ta có thể thấy rằng TẤT CẢ các đối tượng tương tác theo tham chiếu trong Javascript, vì vậy khi đặt bằng nhau hoặc truyền cho một hàm thì chúng đều trỏ đến cùng một vị trí nên khi bạn thay đổi . Đây là một sự khác biệt rõ rệt so với truyền theo giá trị, trong đó hàm truyền theo giá trị sao chép giá trị thành hai điểm riêng biệt trong bộ nhớ, khiến chúng trở thành các thực thể hoàn toàn riêng biệt mặc dù ban đầu một thực thể được đặt bằng nhau.
Vượt qua giá trị. Trong Truyền theo giá trị, hàm được gọi bằng cách truyền trực tiếp giá trị của biến làm đối số. Vì vậy, mọi thay đổi được thực hiện bên trong hàm không ảnh hưởng đến giá trị ban đầu
Trong Truyền theo giá trị, các tham số được truyền dưới dạng đối số tạo bản sao của chính nó. Vì vậy, bất kỳ thay đổi nào được thực hiện bên trong hàm đều được thực hiện đối với giá trị được sao chép chứ không phải giá trị ban đầu
Hãy để chúng tôi lấy một ví dụ để hiểu rõ hơn
Javascript
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
8 //javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
9Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 101
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 103
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 101
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 103
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 105
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 106
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
8 Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 108
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 109
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}0
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}1
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}2
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 106
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}4
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}5
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}6
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}7
Updating the object reference -> Before calling PassByReference Function -> obj {a: 10, b: 20} Inside PassbyReference Function -> obj {a: 10, b: 20, c: "GEEKSFORGEEKS"} After calling PassByReference Function -> obj {a: 10, b: 20}8
đầu ra
Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
8Vượt qua tham khảo. Trong Pass by Reference, Hàm được gọi bằng cách chuyển trực tiếp tham chiếu/địa chỉ của biến làm đối số. Vì vậy, thay đổi giá trị bên trong chức năng cũng thay đổi giá trị ban đầu. Trong mảng JavaScript và Đối tượng theo sau chuyển qua thuộc tính tham chiếu
Trong Truyền theo tham chiếu, các tham số được truyền dưới dạng đối số không tạo bản sao của chính nó, nó đề cập đến giá trị ban đầu nên những thay đổi được thực hiện bên trong hàm sẽ ảnh hưởng đến giá trị ban đầu.
chúng ta hãy lấy một ví dụ để hiểu rõ hơn
Javascript
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
8 Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
90Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
92Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
94Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
96
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
Before Call by Reference Method
{a: 1}
Inside Call by Reference Method
{a: 100}
After Call by Reference Method
{a: 100}
98Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 106
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
80Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 109
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
82Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
84Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
86
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 109
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
88Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
80
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
91
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
92Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 100
//javascript pass by value
function square[x] {
x = x * x;
return x;
}
var y = 10;
var result = square[y];
console.log[y]; // 10 -- no change
console.log[result]; // 100
80đầu ra
Before calling Pass By Reference Function -> a = 10 b = 20 Inside Pass By Reference Function -> a = 20 b = 10 After calling Pass By Reference Function -> a = 20 b = 10
Ghi chú. Trong Pass by Reference, chúng tôi đang thay đổi giá trị ban đầu. khi chúng ta chuyển một đối tượng làm đối số và cập nhật tham chiếu của đối tượng đó trong ngữ cảnh của hàm, điều đó sẽ không ảnh hưởng đến giá trị đối tượng. Nhưng nếu chúng ta thay đổi đối tượng bên trong, nó sẽ ảnh hưởng đến đối tượng