Cách chuyển giá trị mô hình trong hàm javascript

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 

//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 

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

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

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

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

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

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

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

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

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

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

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

//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 

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

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

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}

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}

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}

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

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}

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}

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}

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}

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}

đầu ra

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 100}

Vượ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 

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 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 = 10

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 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 = 10

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 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 = 10

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 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 = 10

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 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 = 10

//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 

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

//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 

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

//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 

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

//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 

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

//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 

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

//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 

//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 

//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 

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

//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 

đầ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

Làm cách nào để chuyển giá trị từ mô hình sang JavaScript?

Làm cách nào để chuyển mảng theo tham chiếu trong JavaScript?

Làm cách nào để truyền tham số chuỗi trong hàm JavaScript?

Làm cách nào để chuyển dữ liệu sang mô hình trong HTML?