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
0 xác định một biếnjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
a
được khởi tạo với số 2.javascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
Câu lệnh thứ hai
3 xác định một biến khácjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
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ố 2 được gán chojavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
b
.Sau đó,
8 tăng thêmjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
9 và trở thànhjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
0.javascript
let a = 1;
let b = a;
b = b + 2;
console.log[a]; // 1
console.log[b]; // 3
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
3 tạo ra một mảng, xác định một biếnjavascript
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.javascript
let a = 1;
let b = a;
b = b + 2;
console.log[a]; // 1
console.log[b]; // 3
Sau đó
5 xác định một biếnjavascript
let a = 1;
let b = a;
b = b + 2;
console.log[a]; // 1
console.log[b]; // 3
6 và khởi tạojavascript
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ếnjavascript
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ụcjavascript
let a = 1;
let b = a;
b = b + 2;
console.log[a]; // 1
console.log[b]; // 3
9. Vì các biếnjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
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.javascript
let a = 1;
let b = a;
b = b + 2;
console.log[a]; // 1
console.log[b]; // 3
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
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
let x = [1];
let y = x;
y.push[2];
console.log[x]; // [1, 2]
console.log[y]; // [1, 2]
javascript
const one = 1;
const oneCopy = 1;
console.log[one === oneCopy]; // true
console.log[one === 1]; // true
console.log[one === one]; // true
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
let x = [1];
let y = x;
y.push[2];
console.log[x]; // [1, 2]
console.log[y]; // [1, 2]
2. Nhà điều hànhjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
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
let x = [1];
let y = x;
y.push[2];
console.log[x]; // [1, 2]
console.log[y]; // [1, 2]
2, bất kể giá trị được lấy từ đâu: một nghĩa đenjavascript
// 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ứcjavascript
// Objects
const plainObject = {
prop: 'Value'
};
const array = [1, 5, 6];
const functionObject = [n1, n2] => {
return n1 + n2;
};
1.javascript
const one = 1;
const oneCopy = 1;
console.log[one === oneCopy]; // true
console.log[one === 1]; // true
console.log[one === one]; // true
Nhưng toán tử so sánh
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
let x = [1];
let y = x;
y.push[2];
console.log[x]; // [1, 2]
console.log[y]; // [1, 2]
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 one = 1;
const oneCopy = 1;
console.log[one === oneCopy]; // true
console.log[one === 1]; // true
console.log[one === one]; // true
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 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ênjavascript
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ànhjavascript
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.javascript
const one = 1;
const oneCopy = 1;
console.log[one === oneCopy]; // true
console.log[one === 1]; // true
console.log[one === one]; // true
Toán tử so sánh chỉ trả về
8 khi so sánh các tham chiếu chỉ vào cùng một đối tượng:javascript
let x = [1];
let y = x;
y.push[2];
console.log[x]; // [1, 2]
console.log[y]; // [1, 2]
2 hoặcjavascript
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.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
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.