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, chúng đều trỏ đến cùng một vị trí nên khi bạn thay đổi . Đây là một điểm 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ị vào hai vị trí 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 với thực thể kia.
Trong Javascript, chúng ta thường lưu trữ dữ liệu dưới dạng mảng và các hàm chúng ta muốn gọi. Đôi khi, dữ liệu trong mảng của chúng ta chính xác là dữ liệu chúng ta muốn chuyển đến một hàm. May mắn thay, có nhiều cách trong Javascript để sử dụng mảng làm giá trị đầu vào cho các hàm. Hãy xem cách sử dụng mảng làm tham số hàm
Cách sử dụng mảng làm tham số hàm
Khi chúng ta có một hàm mà chúng ta muốn truyền một mảng vào, cách cơ bản nhất để làm điều đó sẽ như thế này
let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[numbers[0], numbers[1], numbers[2]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tất nhiên, điều này có thể khá khó chịu, đặc biệt khi làm việc với các hàm có danh sách thuộc tính rất dài. Như vậy Javascript đã cung cấp cho chúng ta 2 cách sử dụng mảng làm tham số hàm trong Javascript - apply[]
và toán tử trải rộng
Truyền mảng cho hàm bằng toán tử trải rộng
Cách hiện đại và dễ dàng nhất để truyền một mảng cho một hàm là sử dụng toán tử trải rộng. Toán tử trải rộng [...
] đơn giản được thêm vào trước mảng. Sử dụng ví dụ trước của chúng tôi, có vẻ như thế này
let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng ta cũng có thể thêm trực tiếp mảng vào hàm mà không cần biến. Ví dụ
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...[ 1, 2, 3 ]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn muốn tìm hiểu mọi thứ mà toán tử trải rộng có thể làm, hãy xem hướng dẫn của tôi về điều đó tại đây
Truyền mảng cho hàm bằng apply[]
Một cách khác để làm điều này, là sử dụng apply[]
. Nếu bạn không quen với trường hợp sử dụng chính của apply[]
, hãy xem hướng dẫn đầy đủ của tôi về đối tượng this của Javascript tại đây
Cuối cùng, apply[]
cho phép chúng ta lấy một hàm và truyền một mảng vào đó. Thuộc tính đầu tiên của apply[]
thực sự đề cập đến đối tượng
let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
0 mà chúng ta muốn sử dụng trên hàm. Đối số thứ hai là một mảng gồm tất cả các tham số cho hàm đó. Điều đó có nghĩa là bạn có thể xác định cấu trúc của let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
0 cũng như chuyển một mảng vào chính hàm đóĐiều này rõ ràng có một số lợi ích cụ thể khi so sánh với toán tử chênh lệch [...
], vì vậy nó có thể phù hợp hơn tùy thuộc vào những gì bạn muốn đạt được. Sử dụng ví dụ trước, chúng ta có thể truyền một mảng vào hàm của mình như vậy
________số 8_______
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ở đây, tôi để trống đối tượng
let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
0, vì vậy nếu chúng ta sử dụng let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
0 trong let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
5, thì nó sẽ là một đối tượng trống - đó là điều mà đối số đầu tiên của apply[]
thực hiện. Thứ hai là mảng của chúng tôi let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
7, lần lượt đề cập đến let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
8, let numbers = [ 1, 2, 3 ]
let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...numbers];
9 và let myFunction = [x, y, z] => {
return x + y + z;
}
// Returns 6
let getCalculation = myFunction[...[ 1, 2, 3 ]];
0