Các loại tham chiếu javascript

Javascript có 5 kiểu dữ liệu được thông qua giá trị.

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

4,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

5,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

6,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

7, và

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

8. Chúng ta sẽ gọi chung là kiểu nguyên thủy

Javascript có 5 kiểu dữ liệu được thông qua tham chiếu.

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

9,

1
2
3
4
5
6
7
8

0, và

1
2
3
4
5
6
7
8

1. Về mặt kỹ thuật đó là Object, vì vậy chúng ta sẽ đề cập đến chúng chung chung như Object

Primitives [Nguyên thủy]

Nếu một kiểu nguyên thủy được gán cho một biến, chúng ta có thể cho rằng biến đó chứa giá trị nguyên thủy

1
2
3

var x = 10;
var y = 'abc';
var z = null;

1
2
3
4
5
6
7
8

2 chứa đựng

1
2
3
4
5
6
7
8

3.

1
2
3
4
5
6
7
8

4 chứa đựng

1
2
3
4
5
6
7
8

5. Để củng cố ý tưởng này, chúng tôi sẽ cung cấp một hình ảnh về những gì các biến này và các giá trị tương ứng giống như trong bộ nhớ

Khi chúng ta gán các biến này cho các biến khác sử dụng dấu

1
2
3
4
5
6
7
8

6, chúng ta sao chép giá trị cho biến mới. We are sao chép theo giá trị

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

5

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

Cả

1
2
3
4
5
6
7
8

7 và

1
2
3
4
5
6
7
8

2 bây giờ đều chứa

1
2
3
4
5
6
7
8

3. Cả

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

00 và

1
2
3
4
5
6
7
8

4 bây giờ đều chứa

1
2
3
4
5
6
7
8

5. We are split, because of the values ​​are copy

Khi thay đổi một biến nó không thay đổi cái khác. Hãy suy nghĩ là các biến như không có mối quan hệ với nhau

1
2
3
4
5
6
7
8

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

0

Các đối tượng

Điều này sẽ cảm thấy khó hiểu, nhưng hãy chịu đựng tôi và đọc qua nó. Một khi bạn vượt qua nó, nó sẽ có vẻ dễ dàng

Các biến được gán một giá trị không nguyên thủy được cung cấp một tham chiếu đến giá trị đó. Tham chiếu đó trỏ đến vị trí của đối tượng trong bộ nhớ. Các biến không thực sự chứa giá trị

Các đối tượng được tạo tại một số vị trí trong bộ nhớ máy tính của bạn. Khi chúng tôi viết

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

03, chúng tôi đã tạo một mảng trong bộ nhớ. Cái mà biến

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

04 nhận được là địa chỉ, vị trí của mảng đó

Hãy giả sử rằng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

05 là một kiểu dữ liệu mới được truyền theo giá trị, giống như

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

06 hoặc

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

07. Một

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

05 trỏ đến vị trí, trong bộ nhớ, của một giá trị được truyền theo tham chiếu. Giống như một chuỗi được biểu thị bằng dấu ngoặc kép [

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

09 hoặc

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

20], một

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

05 sẽ được biểu thị bằng dấu ngoặc nhọn,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22

Khi chúng ta gán và sử dụng một biến kiểu tham chiếu, những gì chúng ta viết và nhìn thấy là

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2____36

Một đại diện của dòng 1 và 2 ở trên trong bộ nhớ là

1

2

Lưu ý rằng giá trị, địa chỉ, được chứa bởi biến

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

04 là tĩnh. Mảng trong bộ nhớ là thứ thay đổi. Khi chúng ta sử dụng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

04 để làm điều gì đó, chẳng hạn như đẩy một giá trị, công cụ Javascript sẽ chuyển đến vị trí của

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

04 trong bộ nhớ và làm việc với thông tin được lưu trữ ở đó

Chỉ định theo tham chiếu

Khi một giá trị kiểu tham chiếu, một đối tượng, được sao chép sang một biến khác bằng cách sử dụng

1
2
3
4
5
6
7
8

6, địa chỉ của giá trị đó là địa chỉ thực sự được sao chép như thể nó là một biến nguyên thủy. Các đối tượng được sao chép theo tham chiếu thay vì theo giá trị

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2____42

Đoạn mã trên trông như thế này trong bộ nhớ

Mỗi biến bây giờ chứa một tham chiếu đến cùng một mảng. Điều đó có nghĩa là nếu chúng ta thay đổi

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

27, thì

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

28 sẽ thấy những thay đổi đó

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2

var x = 10;
var y = 'abc';
var z = null;

1

Chúng tôi đã đẩy

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

29 vào mảng trong bộ nhớ. Khi chúng tôi sử dụng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

27 và

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

28, chúng tôi đang trỏ đến cùng một mảng đó

Chỉ định lại một tham chiếu

Gán lại biến tham chiếu thay thế tham chiếu cũ

var x = 10;
var y = 'abc';
var z = null;

2

var x = 10;
var y = 'abc';
var z = null;

3

Trong trí nhớ

Khi chúng ta có một dòng thứ hai

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2

var x = 10;
var y = 'abc';
var z = null;

5

Địa chỉ được lưu trữ trong

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

62 thay đổi. Đối tượng đầu tiên vẫn còn trong bộ nhớ và đối tượng tiếp theo cũng vậy

Khi không còn tham chiếu đến một đối tượng, như chúng ta thấy đối với địa chỉ

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

63 ở trên, công cụ Javascript có thể thực hiện thu gom rác. Điều này chỉ có nghĩa là lập trình viên đã mất tất cả các tham chiếu đến đối tượng và không thể sử dụng đối tượng nữa, vì vậy công cụ có thể tiếp tục và xóa nó khỏi bộ nhớ một cách an toàn. Trong trường hợp này, đối tượng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

64 không còn truy cập được nữa và có sẵn cho công cụ để thu gom rác

== và ===

Khi các toán tử đẳng thức,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

65 và

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

66, được sử dụng trên các biến kiểu tham chiếu, chúng sẽ kiểm tra tham chiếu. Nếu các biến chứa tham chiếu đến cùng một mục, thì phép so sánh sẽ dẫn đến kết quả là

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

67

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2

var x = 10;
var y = 'abc';
var z = null;

7

Nếu chúng là các đối tượng riêng biệt, ngay cả khi chúng chứa các thuộc tính giống hệt nhau, thì việc so sánh sẽ dẫn đến kết quả là

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

68

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2

var x = 10;
var y = 'abc';
var z = null;

9

Nếu chúng ta có hai đối tượng riêng biệt và muốn xem các thuộc tính của chúng có giống nhau hay không, cách dễ nhất để làm là biến cả hai thành chuỗi rồi so sánh các chuỗi. Khi các toán tử đẳng thức đang so sánh các nguyên hàm, chúng chỉ cần kiểm tra xem các giá trị có giống nhau không

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2____151

Một tùy chọn khác là lặp đệ quy qua các đối tượng và đảm bảo rằng mỗi thuộc tính đều giống nhau

Truyền tham số qua hàm

Khi chúng ta chuyển các giá trị nguyên thủy vào một hàm, hàm này sẽ sao chép các giá trị đó vào các tham số của nó. Nó thực sự giống như sử dụng

1
2
3
4
5
6
7
8

6

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

52

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

53

Trong ví dụ trên, chúng tôi cung cấp cho

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

20 giá trị

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

21. Khi chúng ta chuyển nó vào

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22, biến

1
2
3
4
5
6
7
8

2 nhận giá trị đó,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

21. Giá trị được sao chép như thể chúng tôi đã sử dụng phép gán

1
2
3
4
5
6
7
8

6. Một lần nữa, giá trị của

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

20 không bị ảnh hưởng. Đây là ảnh chụp nhanh bộ nhớ trông như thế nào ngay tại dòng nhận xét TẠM DỪNG trong

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22

Hàm thuần túy

Chúng tôi coi các chức năng không ảnh hưởng đến bất kỳ thứ gì trong phạm vi bên ngoài là các chức năng thuần túy. Miễn là một hàm chỉ lấy các giá trị nguyên thủy làm tham số và không sử dụng bất kỳ biến nào trong phạm vi xung quanh của nó, thì nó sẽ tự động thuần túy, vì nó không thể ảnh hưởng đến bất kỳ thứ gì trong phạm vi bên ngoài. Tất cả các biến được tạo bên trong đều được thu gom rác ngay khi hàm trả về

Tuy nhiên, một chức năng nhận một Đối tượng có thể thay đổi trạng thái của phạm vi xung quanh nó. Nếu một hàm nhận vào một tham chiếu mảng và thay đổi mảng mà nó trỏ tới, có lẽ bằng cách đẩy tới nó, các biến trong phạm vi xung quanh tham chiếu mảng đó sẽ thấy sự thay đổi đó. Sau khi hàm trả về, những thay đổi mà nó tạo ra vẫn tồn tại ở phạm vi bên ngoài. Điều này có thể gây ra các tác dụng phụ không mong muốn khó theo dõi

Do đó, nhiều hàm mảng gốc, bao gồm

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

28 và

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

29, được viết dưới dạng hàm thuần túy. Họ lấy một tham chiếu mảng và nội bộ, họ sao chép mảng và làm việc với bản sao thay vì bản gốc. Điều này làm cho bản gốc không bị ảnh hưởng, phạm vi bên ngoài không bị ảnh hưởng và chúng tôi đã trả về một tham chiếu đến một mảng hoàn toàn mới

Hãy đi vào một ví dụ về một so với thuần túy. chức năng không tinh khiết

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

54

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

55

Hàm không tinh khiết này nhận vào một đối tượng và thay đổi thuộc tính

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

20 trên đối tượng đó thành 25. Bởi vì nó hoạt động trên tham chiếu nó đã được đưa ra, nó trực tiếp thay đổi đối tượng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

21. Lưu ý rằng khi nó trả về đối tượng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22, nó sẽ trả về chính đối tượng đã được truyền vào.

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

21 và

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

24 chứa cùng một tham chiếu. Việc trả về biến

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22 và lưu trữ tham chiếu trong một biến mới là không cần thiết

Hãy xem xét một hàm thuần túy

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

56____157

Trong chức năng này, chúng tôi sử dụng

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

26 để chuyển đổi đối tượng mà chúng tôi truyền vào thành một chuỗi, sau đó phân tích lại thành một đối tượng với

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

27. Bằng cách thực hiện chuyển đổi này và lưu trữ kết quả trong một biến mới, chúng tôi đã tạo một đối tượng mới. Có nhiều cách khác để làm điều tương tự như lặp qua đối tượng ban đầu và gán từng thuộc tính của nó cho một đối tượng mới, nhưng cách này là đơn giản nhất. Đối tượng mới có các thuộc tính giống như đối tượng ban đầu nhưng nó là một đối tượng riêng biệt rõ ràng trong bộ nhớ

Khi chúng tôi thay đổi thuộc tính

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

20 trên đối tượng mới này, bản gốc không bị ảnh hưởng. Chức năng này bây giờ là tinh khiết. Nó không thể ảnh hưởng đến bất kỳ đối tượng nào bên ngoài phạm vi của chính nó, kể cả đối tượng được truyền vào. Đối tượng mới cần được trả về và lưu trữ trong một biến mới, nếu không nó sẽ bị thu gom rác sau khi chức năng hoàn thành, vì đối tượng không còn trong phạm vi

Tự kiểm tra

Giá trị so với. tham chiếu là một khái niệm thường được thử nghiệm trong các cuộc phỏng vấn mã hóa. Cố gắng tự mình tìm ra những gì được ghi ở đây

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

58

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

59

Đầu tiên, hàm thay đổi thuộc tính

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

20 trên đối tượng ban đầu mà nó được truyền vào. Sau đó, nó gán lại biến cho một đối tượng hoàn toàn mới và trả về đối tượng đó. Đây là những gì hai đối tượng đã đăng xuất

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

1

Hãy nhớ rằng phép gán thông qua các tham số chức năng về cơ bản giống như phép gán với

1
2
3
4
5
6
7
8

6. Biến

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22 trong hàm chứa tham chiếu đến đối tượng

var x = 10;
var y = 'abc';
var z = null;

02 nên ban đầu nó tác động trực tiếp lên đối tượng đó. Khi chúng tôi gán lại

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22 cho một đối tượng mới, nó sẽ ngừng ảnh hưởng đến đối tượng ban đầu

Việc gán lại này không thay đổi đối tượng mà

var x = 10;
var y = 'abc';
var z = null;

02 trỏ tới trong phạm vi bên ngoài.

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22 có một tham chiếu mới vì nó đã được chỉ định lại nhưng việc chỉ định lại này không thay đổi

var x = 10;
var y = 'abc';
var z = null;

02

Một đoạn mã tương đương với khối trên sẽ là

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

2____03

Sự khác biệt duy nhất là khi chúng ta sử dụng chức năng,

var x = 10;
var y = 'abc';
var a = x;
var b = y;
console.log[x, y, a, b]; // -> 10, 'abc', 10, 'abc'

22 không còn trong phạm vi sau khi chức năng kết thúc