Hướng dẫn is javascript is reference based or value based? - javascript là dựa trên tham chiếu hay dựa trên giá trị?

Trong JavaScript, bạn có thể chuyển qua giá trị và bằng cách tham khảo.

Sự khác biệt chính giữa hai là chuyển qua giá trị xảy ra khi gán nguyên thủy trong khi truyền bằng cách tham chiếu khi gán các đối tượng.

Hãy thảo luận về các giá trị và tài liệu tham khảo chi tiết hơn trong bài viết này.

1. Hiểu nguyên thủy và đối tượng

JavaScript cung cấp 2 loại loại dữ liệu: nguyên thủy và đối tượng.

Các nguyên thủy là số, booleans, chuỗi, biểu tượng và giá trị đặc biệt null và undefined.

javascript
// Primitives
const number = 10;
const bool = false;
const str = 'Hello!';
const missingObject = null;
const nothing = undefined;

Danh mục thứ hai là các đối tượng. Đặc biệt là đối tượng, mảng, chức năng, và nhiều hơn nữa - là tất cả các đối tượng.

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

Nói điều đó khác nhau, bất cứ điều gì không phải là một giá trị nguyên thủy là một đối tượng.

2. Giá trị

Quy tắc đơn giản của việc truyền theo giá trị là tất cả các giá trị nguyên thủy trong JavaScript được truyền theo giá trị. Đơn giản như thế.

Chuyển bằng giá trị có nghĩa là mỗi khi bạn gán một giá trị cho một biến, một bản sao của giá trị đó được tạo. Mỗi lần.

Hãy để tôi chỉ cho bạn cách vượt qua giá trị thể hiện chính nó.

Giả sử bạn có 2 biến a và b:

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

Câu lệnh đầu tiên

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

0 xác định một biến a được khởi tạo với số

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

2.

Câu lệnh thứ hai

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

3 xác định một biến khác b và khởi tạo nó với giá trị của biến a - được truyền theo giá trị. Đơn giản hơn, một bản sao của số

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

2 được gán cho b.

Sau đó,

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

8 tăng thêm

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

9 và trở thành

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

0. b Thay đổi biến và thay đổi này không ảnh hưởng đến giá trị của a.

3. Tài liệu tham khảo

Tuy nhiên, việc vượt qua tham chiếu, biểu hiện khác nhau.

Khi tạo một đối tượng bạn được cung cấp một tham chiếu đến đối tượng đó. Nếu 2 biến giữ cùng một tham chiếu, thì việc thay đổi đối tượng phản ánh trong cả hai biến.

Hãy kiểm tra mẫu mã sau:

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

Câu lệnh đầu tiên

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

3 tạo ra một mảng, xác định một biến

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

4 và khởi tạo biến có tham chiếu đến mảng được tạo.

Sau đó

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

5 xác định một biến

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

6 và khởi tạo

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

6 với tham chiếu được lưu trữ trong biến

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

4. Đây là một đường chuyền bằng tài liệu tham khảo.

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

9 làm biến đổi mảng bằng cách đẩy một mục

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

9. Vì các biến

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

4 và

javascript
let a = 1;
let b = a;
b = b + 2;
console.log(a); // 1
console.log(b); // 3

6 tham chiếu cùng một mảng, thay đổi này được phản ánh trong cả hai biến.

Lưu ý: Để đơn giản, tôi nói rằng các biến chứa các tham chiếu đến các đối tượng. Nhưng nói đúng các biến trong các giá trị giữ JavaScript là các tham chiếu đến các đối tượng.

4. So sánh các giá trị và so sánh các tài liệu tham khảo

Hiểu được sự khác biệt giữa các giá trị và tài liệu tham khảo là rất quan trọng khi bạn muốn so sánh các đối tượng.

Khi sử dụng toán tử so sánh nghiêm ngặt

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

3, 2 biến có giá trị bằng nhau nếu chúng có cùng giá trị. Tất cả các so sánh dưới đây là bằng nhau:

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

4 và

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

5 có cùng giá trị

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

2. Nhà điều hành

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

3 đánh giá là

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

8 dài như cả hai toán hạng là

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

2, bất kể giá trị được lấy từ đâu: một nghĩa đen

javascript
// Objects
const plainObject = {
  prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = (n1, n2) => {
  return n1 + n2;
};

2, giá trị của biến, biểu thức

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

1.

Nhưng toán tử so sánh

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

3 hoạt động khác nhau khi so sánh các tài liệu tham khảo. 2 Tài liệu tham khảo chỉ bằng nhau nếu chúng tham chiếu chính xác cùng một đối tượng.

javascript
const one = 1;
const oneCopy = 1;



console.log(one === oneCopy); // true
console.log(one === 1); // true
console.log(one === one); // true

3 và

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

4 Giữ các tài liệu tham khảo cho phiên bản mảng khác nhau:

javascript
const ar1 = [1];
const ar2 = [1];
console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false
const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

3 và

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

4 Các mảng tham chiếu của cùng một cấu trúc, tuy nhiên

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

7 đánh giá thành

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

8 vì

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

3 và

javascript
const one = 1;
const oneCopy = 1;
console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

4 tham chiếu các đối tượng mảng khác nhau.

Toán tử so sánh chỉ trả về

javascript
let x = [1];
let y = x;
y.push(2);
console.log(x); // [1, 2]
console.log(y); // [1, 2]

8 khi so sánh các tham chiếu chỉ vào cùng một đối tượng:

javascript
const ar1 = [1];
const ar2 = [1];
console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false
const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

2 hoặc

javascript
const ar1 = [1];
const ar2 = [1];
console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false
const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

3.

5. Tóm tắt

Trong các loại nguyên thủy JavaScript được truyền xung quanh làm giá trị: có nghĩa là mỗi lần một giá trị được gán, một bản sao của giá trị đó được tạo.

Mặt khác các đối tượng (bao gồm các đối tượng đơn giản, mảng, chức năng, phiên bản lớp) là các tài liệu tham khảo. Nếu bạn sửa đổi đối tượng, thì tất cả các biến tham chiếu đối tượng đó sẽ thấy sự thay đổi.

Toán tử so sánh phân biệt so sánh các giá trị và tài liệu tham khảo. 2 Biến giữ các tham chiếu chỉ bằng nhau nếu chúng tham chiếu chính xác cùng một đối tượng, nhưng 2 biến giữ giá trị bằng nhau nếu chúng chỉ đơn giản là có 2 giá trị giống nhau cho dù giá trị bắt nguồn từ đâu: từ một biến, nghĩa đen, v.v.

Tuy nhiên, thông thường, bạn có thể muốn so sánh các đối tượng bằng cấu trúc của chúng thay vì tham chiếu. Kiểm tra bài viết Cách so sánh các đối tượng trong JavaScript.

JavaScript là tham chiếu hay giá trị?

JavaScript có đi qua tham chiếu hay sao chép không?

Có phải là các biến JS tham chiếu?