나는 여기서 내가 무엇을 묻고 있는지 정확히 알지 못한다. 나는 단지 그것이 내가 기대했던 것이 아니라는 것을 안다.DOM 요소는 console.log를 참조하여 전달됩니까?
필자는 ID를 기준으로 요소에 대한 참조를 가져온 페이지 스크립트 (아래 참조)를 작성한 다음 몇 가지 기능을 호출합니다. 각 함수는 요소 (또는 해당 textContent)를 콘솔에 기록하고 텍스트 내용을 수정 한 후 다음 함수를 호출합니다. 저를 혼란스럽게하는 것은 그러한 변화가 기록되는 방법입니다.
If I log element.textContent, I get the behavior I expected : 각 로그는 이전 기능에 의해 왼쪽으로 문자열을 인쇄합니다.
* : 각 로그는 로그가 호출되었을 때의 상태가 아닌 최종 상태로 요소를 출력합니다.
이것은 요소의 텍스트 내용이 값으로 기록되는 동안 스크립트가 계속 진행됨에 따라 참조가 전달되어 모든 참조가 함께 업데이트된다고 생각하게합니다.
이것이 사실이라면 어떤 행동을 기대할 수 있습니까? 모든 DOM 참조가 참조로 전달되는 반면 문자열 (프리미티브)은 값으로 전달됩니까? JavaScript는 값을 기준으로 객체를 참조 및 프리미티브로 전달합니다. 그게 여기서 일어나는거야?
* JS Bin의 출력은 Chrome에서 제공하는 내용보다 훨씬 상세하지만, 요소는 object 유형으로 설명되어 있습니다. 내가 사용하고있는 전체 코드는 아래에 element.textContent이 아니라 element이 아닙니다. 이것이 사실이라면
<html>
<body>
<p id="paragraph">First paragraph</p>
<script>
(function() {
'use strict'
var one = function() {
console.log(example.textContent)
example.textContent = example.textContent.replace('paragraph', 'call')
two()
}
var two = function() {
console.log(example.textContent)
example.textContent = example.textContent.replace('First', 'Second')
three()
}
var three = function() {
console.log(example.textContent)
example.textContent = example.textContent.replace('Second', 'Third')
console.log(example.textContent)
}
var example = document.getElementById('paragraph')
console.log(example.textContent)
one()
})()
</script>
</body>
</html>
모든 객체는 참조로 전달됩니다 (정확하게 말하면 값으로 전달됩니다). 모든 문자열은 값으로 전달됩니다. – zerkms
오른쪽 개체 값은 ** 항상 ** 참조입니다. – Pointy
이것은 값을 전달할 때 문제가되지 않습니다. 대신 console.log-console.log의 문제는 참조를 전달할 때 참조가 참조하는 객체의 스냅 샷을 가져 오지 않습니다. 따라서 사용자가 기록하는 값은 console.log를 호출 할 때가 아니라 콘솔에서 검사 할 때의 값입니다. – slebetman