Chuyển giá trị này cho hàm javascript

JavaScript luôn là giá trị truyền qua. Điều này có nghĩa là mọi thứ trong JavaScript là một loại giá trị và các đối số của hàm luôn được truyền theo giá trị. Điều đó đang được nói, các loại đối tượng khó hiểu hơn một chút

Sự nhầm lẫn nằm ở chỗ các loại đối tượng là các loại tham chiếu được truyền theo giá trị. Nghe có vẻ kỳ lạ, một tham chiếu đến một đối tượng được truyền cho một hàm theo giá trị. Sự khác biệt tinh tế ở đây nằm ở chỗ một tham chiếu đối tượng được truyền theo giá trị không giống như truyền một đối tượng theo tham chiếu

Nói một cách đơn giản, các thay đổi đối với đối tượng bên trong hàm sẽ ảnh hưởng đến đối tượng ban đầu, vì cả hai đều tham chiếu đến cùng một đối tượng. Tuy nhiên, việc gán lại giá trị của biến giữ đối tượng ban đầu sẽ không ảnh hưởng đến đối tượng được tham chiếu bởi hàm. Hãy để tôi chứng minh điều này với một ví dụ

Trong ví dụ này, myObj là một đối tượng JavaScript đơn giản, được truyền dưới dạng đối số cho myFunc. Đối số obj bên trong myFunc là một tham chiếu đến cùng một đối tượng, myObj. Bất kỳ thay đổi nào được thực hiện đối với ________ 45 _______ đều ảnh hưởng đến ________ 43 ______, vì chúng là cùng một đối tượng. Điều này có nghĩa là việc gán kết quả (obj) của lệnh gọi hàm cho một biến khác, otherObj, sẽ chuyển cùng một tham chiếu đến biến đó. Kết quả là cả myObj và otherObj đều tham chiếu cùng một giá trị đối tượng

Việc gán lại myObj cho một giá trị đối tượng mới hoàn toàn không ảnh hưởng đến otherObj. otherObj vẫn tham chiếu đến đối tượng ban đầu. Nếu JavaScript là tham chiếu chuyển tiếp, việc chỉ định lại myObj sẽ ảnh hưởng đến otherObj, đây rõ ràng không phải là trường hợp

Vì vậy, để nói về những gì đang xảy ra ở đây, tôi đang tạo một biến có tên là fruit và gán nó cho một chuỗi 'raspberry', sau đó tôi chuyển fruit cho một hàm tạo và trả về một hàm có tên là

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0, hàm này sẽ ghi lại giá trị fruit khi được gọi. Khi tôi gọi chức năng đó, tôi nhận được kết quả đầu ra

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

2 của 'raspberry' như mong đợi

Nhưng sau đó tôi chỉ định lại fruit cho

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

5 và gọi lại cho

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0. Nhưng thay vì nhận được một

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

2 giá trị mới của fruit, tôi nhận được giá trị cũ của fruit

Tôi có thể bỏ qua bước này bằng cách gọi lại cho

function getLogger(arg) {
  function logger() {
    console.log(arg)
  }
  return logger
}

// side-note, this could be written like this too
// and it wouldn't make any difference whatsoever:
// const getLogger = arg => () => console.log(arg)
// I just decided to go more verbose to keep it simple

0 để nhận một máy ghi nhật ký mới

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

Nhưng tại sao tôi không thể thay đổi giá trị của biến và lấy

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0 để ghi lại giá trị mới nhất?

Câu trả lời là trong JavaScript, khi bạn gọi một hàm với các đối số, các đối số mà bạn truyền vào sẽ được truyền theo giá trị chứ không phải theo tham chiếu. Hãy để tôi mô tả ngắn gọn những gì đang xảy ra ở đây

function getLogger(arg) {
  function logger() {
    console.log(arg)
  }
  return logger
}

// side-note, this could be written like this too
// and it wouldn't make any difference whatsoever:
// const getLogger = arg => () => console.log(arg)
// I just decided to go more verbose to keep it simple

Khi

function getLogger(arg) {
  function logger() {
    console.log(arg)
  }
  return logger
}

// side-note, this could be written like this too
// and it wouldn't make any difference whatsoever:
// const getLogger = arg => () => console.log(arg)
// I just decided to go more verbose to keep it simple

0 được gọi, hàm

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0 được tạo. Đó là một chức năng hoàn toàn mới. Khi một chức năng hoàn toàn mới được tạo, nó sẽ tìm kiếm tất cả các biến mà nó có quyền truy cập và "đóng" chúng lại để tạo thành cái được gọi là "đóng cửa". Điều này có nghĩa là miễn là hàm

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0 này tồn tại, nó sẽ có quyền truy cập vào các biến trong hàm cha của nó và các biến cấp độ mô-đun khác

Vậy những biến nào mà

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0 có quyền truy cập khi nó được tạo? . Đọc lại danh sách đó, vì điều quan trọng là tại sao mã hoạt động theo cách của nó. Bạn có nhận thấy một cái gì đó?

Chỉ vì hai biến được gán cùng một giá trị không có nghĩa là chúng giống nhau. Đây là một ví dụ đơn giản về khái niệm đó

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

Lưu ý rằng mặc dù chúng ta làm cho

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

2 trỏ đến giá trị của biến

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3, nhưng chúng ta vẫn có thể thay đổi biến

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3 và giá trị mà

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

2 trỏ đến là không thay đổi. Điều này là do chúng tôi đã không trỏ

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

2 đến

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3 mỗi lần. Chúng tôi đã chỉ

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

2 vào giá trị mà

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3 đã chỉ vào thời điểm đó

Tôi thích nghĩ về các biến số như những mũi tên nhỏ trỏ đến các vị trí trong bộ nhớ của máy tính. Vì vậy, khi chúng tôi nói

let arg = fruit

0, chúng tôi đang nói. "Này công cụ JavaScript, tôi muốn bạn tạo một vị trí trong bộ nhớ có giá trị là

let arg = fruit

1 và sau đó tạo một mũi tên (biến) có tên là

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3 trỏ đến vị trí đó trong bộ nhớ. "

Sau đó, khi chúng ta nói.

let arg = fruit

3, chúng tôi đang nói "Này công cụ JavaScript, tôi muốn bạn tạo một mũi tên (biến) có tên là

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

2 trỏ đến cùng một địa điểm mà

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3 trỏ đến vào lúc này. "

Theo cách tương tự, khi bạn gọi một hàm, công cụ JavaScript sẽ tạo một biến mới cho các đối số của hàm. Trong trường hợp của chúng tôi, chúng tôi đã gọi

let arg = fruit

6 và công cụ JavaScript về cơ bản đã làm điều này

let arg = fruit

Vì vậy, sau này khi chúng ta thực hiện

let arg = fruit

7, nó không ảnh hưởng đến

function getLogger(arg) {
  function logger() {
    console.log(arg)
  }
  return logger
}

// side-note, this could be written like this too
// and it wouldn't make any difference whatsoever:
// const getLogger = arg => () => console.log(arg)
// I just decided to go more verbose to keep it simple

8 vì chúng là các biến hoàn toàn khác nhau

Cho dù bạn coi đây là một hạn chế hay một tính năng, thực tế là đây là cách nó hoạt động. Nếu bạn muốn giữ hai biến cập nhật với nhau, có một cách để làm điều đó. tốt, sắp xếp. Ý tưởng là thế này. thay vì thay đổi vị trí mũi tên (biến), bạn có thể thay đổi vị trí mũi tên trỏ tới. Ví dụ

let a = {current: 1}
let b = a

console.log(a.current, b.current) // 1, 1

a.current = 2
console.log(a.current, b.current) // 2, 2 🎉

Trong trường hợp này, chúng tôi không chỉ định lại a mà thay vào đó thay đổi giá trị mà

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

3 đang trỏ tới. Và bởi vì

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

2 tình cờ được chỉ vào cùng một thứ nên cả hai đều nhận được bản cập nhật

Vì vậy, hãy áp dụng giải pháp này cho vấn đề

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...

0 của chúng ta

function getLatestLogger(argRef) {
  function logger() {
    console.log(argRef.current)
  }
  return logger
}

const fruitRef = {current: 'raspberry'}

const latestLogger = getLatestLogger(fruitRef)

latestLogger() // "raspberry"
fruitRef.current = 'peach'
latestLogger() // "peach" 🎉

Hậu tố

let a = {current: 1}
let b = a

console.log(a.current, b.current) // 1, 1

a.current = 2
console.log(a.current, b.current) // 2, 2 🎉

2 là viết tắt của "tham chiếu", nghĩa là giá trị mà biến trỏ tới chỉ được sử dụng để tham chiếu một giá trị khác (trong trường hợp của chúng ta là thuộc tính

let a = {current: 1}
let b = a

console.log(a.current, b.current) // 1, 1

a.current = 2
console.log(a.current, b.current) // 2, 2 🎉

3 của một đối tượng)

Đương nhiên có sự đánh đổi với điều này, nhưng tôi rất vui vì đặc tả JavaScript yêu cầu các đối số hàm được truyền theo giá trị thay vì tham chiếu. Và cách giải quyết không quá rắc rối khi bạn có nhu cầu (điều này khá hiếm vì khả năng thay đổi khiến chương trình khó hiểu hơn bình thường). Hy vọng rằng sẽ giúp. Chúc may mắn

Làm cách nào để chuyển giá trị này trong JavaScript?

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

Bạn có thể chuyển một biến vào một hàm không?

Làm cách nào để chuyển đối tượng trong hàm JavaScript?