Làm cách nào để chuyển giá trị biến từ hàm này sang hàm khác trong JavaScript?

Question

Nội dung chính Show

Truyền theo giá trị hoặc tham chiếu theo tham chiếu của JavaScript
Pass-by-value của giá trị nguyên thủy
Giá trị truyền qua của giá trị tham chiếu

Tóm lược. hướng dẫn này giải thích cách hoạt động của tính năng truyền theo giá trị của JavaScript và cung cấp cho bạn một số ví dụ về việc truyền các giá trị nguyên thủy và tham chiếu cho một hàm

Trước khi tiếp tục với hướng dẫn này, bạn nên có kiến thức tốt về các giá trị nguyên thủy và tham chiếu cũng như sự khác biệt giữa chúng

Truyền theo giá trị hoặc tham chiếu theo tham chiếu của JavaScript

Trong JavaScript, tất cả các đối số của hàm luôn được truyền theo giá trị. Điều đó có nghĩa là JavaScript sao chép các giá trị của biến vào các đối số của hàm

Bất kỳ thay đổi nào bạn thực hiện đối với các đối số bên trong hàm không phản ánh các biến truyền bên ngoài hàm. Nói cách khác, những thay đổi được thực hiện đối với các đối số không được phản ánh bên ngoài hàm

Nếu đối số của hàm được truyền theo tham chiếu, thì những thay đổi của biến mà bạn truyền vào hàm sẽ được phản ánh ra bên ngoài hàm. Điều này là không thể trong JavaScript

Pass-by-value của giá trị nguyên thủy

Hãy cùng xem ví dụ sau

function square(x) {
    x = x * x;
    return x;
}

let y = 10;
let result = square(y);

console.log(result); // 100 
console.log(y); // 10 -- no change
Code language: JavaScript (javascript)

Cách thức hoạt động của kịch bản

Đầu tiên, xác định một hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 chấp nhận một đối số ______28 . Hàm gán bình phương của

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8 cho đối số

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8.

Tiếp theo, khai báo biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 và khởi tạo giá trị của nó thành

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

2.

Sau đó, chuyển biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 vào hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7. Khi chuyển biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 đến hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7, JavaScript sẽ sao chép giá trị

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 vào biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8

Sau đó, hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 thay đổi biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8 . Tuy nhiên, nó không ảnh hưởng đến giá trị của biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 vì

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8 và

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 là các biến riêng biệt.

Cuối cùng, giá trị của biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 không thay đổi sau khi hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 hoàn thành

Nếu JavaScript sử dụng tham chiếu chuyển qua, thì biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

1 sẽ thay đổi thành

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

4 sau khi gọi hàm

Giá trị truyền qua của giá trị tham chiếu

Không rõ ràng rằng các giá trị tham chiếu cũng được truyền bởi các giá trị. Ví dụ

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

Cách thức hoạt động của kịch bản

Đầu tiên, xác định biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

5 tham chiếu đến một đối tượng có hai thuộc tính

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

6 và

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7

Tiếp theo, xác định hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8 chấp nhận một đối tượng

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9 và tăng thuộc tính

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 của đối số

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9 lên một

Sau đó, chuyển đối tượng

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

5 cho hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8

Trong nội bộ, công cụ JavaScript tạo tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9 và biến tham chiếu biến này thành cùng một đối tượng mà biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

5 tham chiếu

Sau đó, tăng thuộc tính

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 lên một bên trong hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8 thông qua biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9

Cuối cùng, truy cập đối tượng thông qua tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

5

Có vẻ như JavaScript chuyển một đối tượng theo tham chiếu vì thay đổi đối với đối tượng được phản ánh bên ngoài hàm. Tuy nhiên, đây không phải là trường hợp

Trên thực tế, khi truyền một đối tượng cho một hàm, bạn đang truyền tham chiếu của đối tượng đó chứ không phải đối tượng thực. Do đó, hàm có thể sửa đổi các thuộc tính của đối tượng thông qua tham chiếu của nó

Tuy nhiên, bạn không thể thay đổi tham chiếu được truyền vào hàm. Ví dụ

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

đầu ra

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9

Trong ví dụ này, hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

70 thay đổi thuộc tính

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 thông qua đối số

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9

và biến tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

9 thành một đối tượng khác

Tuy nhiên, tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

5 vẫn đề cập đến đối tượng ban đầu có thuộc tính

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

7 thay đổi thành

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

76. Nói cách khác, hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)

8 không thay đổi tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge(obj) {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge(person);

console.log(person);
Code language: JavaScript (javascript)