집 > 기사 > 웹 프론트엔드 > js에서 기능을 전송하는 방법

js에서 기능을 전송하는 방법

不言원래의: 2018-07-16 16:02:171802검색

최근 js를 배우면서 js 함수의 매개변수로 객체를 전달하는 문제에 직면했습니다. 또한 참조 전달 및 값 전달에 대한 문제도 공부했지만 시간이 좀 걸렸지만 마침내 이해했습니다.

데이터 유형

JavaScript의 데이터 유형은 두 가지 범주로 나눌 수 있습니다.

기본 유형 값은 정의되지 않음, Null, 부울, 숫자, 문자열과 같은 기본 유형입니다.

참조 유형 값, 즉 객체 유형 Object, Array, Function, Date 등과 같은 객체 유형입니다.

변수 복사

우리 모두 알고 있듯이 js에서 변수의 기본 유형과 참조 유형은 서로 다른 방식으로 저장되며, 이는 복사 시에도 다른 변수로 이어집니다. 기본 유형 값을 한 변수에서 다른 변수로 복사하면 전자 값이 복제되고 복제된 값이 후자에 할당됩니다. 따라서 두 값은 완전히 독립적이지만 해당 값은 다릅니다. 동일합니다.

var num1 = 10;var num2 = num1;
console.log(num2);//10

위 num1에 저장된 값은 10입니다. num1의 값을 num2에 대입하면 num2의 값도 10입니다. 하지만 이 두 10은 완전히 독립적입니다. num2의 10은 그냥 복제된 것입니다. 이는 제가 워드 문서를 작성하여 num1 폴더에 넣는 것과 같습니다. 그러면 워드 문서를 복사합니다. 그런 다음 이 복사본을 num2 폴더에 넣습니다. 두 단어 문서는 정확히 동일하므로 둘 중 하나를 수정해도 둘 다 영향을 받지 않습니다.

num2 += 1;
console.log(num1); //10
console.log(num2); //11

위에서 볼 수 있듯이 num2의 값은 변경되었지만 num1의 값은 변경되지 않았습니다. 참조 유형 복사를 살펴보겠습니다. 참조 유형의 값이 한 변수에서 다른 변수로 복사되면 변수 개체에 저장된 값의 복사본도 새 변수에 할당된 공간에 복사됩니다.

var obj1 = {
  name : "111"};var obj2 = obj1;
console.log(obj2.name); //111
obj2.name = "222";
console.log(obj1.name); //222

첫 번째 인쇄 결과는 "111"로 이해하기 쉽지만, 두 번째 인쇄 결과는 "222"로 조금 헷갈립니다. 이것이 참조 유형과 기본 유형의 차이점입니다. 객체를 복사할 때 동일한 객체는 힙 메모리에 생성되지 않습니다. 객체에 대한 포인터를 보유하는 추가 변수만 있을 뿐입니다. obj1의 값을 obj2에 복사하면 이 값의 복사본은 실제로 포인터입니다. 이 포인터는 힙에 저장된 개체를 가리킵니다. 즉, 새 메모리 주소가 생성되어 obj2, obj1 및 obj2에 전달됩니다. 변수는 동시에 동일한 개체를 가리킵니다. 개체가 변경되면 해당 값이 변경됩니다. 즉, 개체 중 하나의 변경 사항이 다른 개체에 반영됩니다. 아래의 단순화된 다이어그램이 더 명확할 수 있습니다.

함수 매개변수 전송

"JS 고급 프로그래밍"에서는 매개변수 전송을 다음과 같이 설명합니다. 모든 함수 매개변수는 값으로 전달됩니다. 즉, 함수 외부의 값이 함수 내부의 매개변수로 복사됩니다. 한 변수에서 다른 변수로 값을 복사하는 것과 같습니다. 따라서 변수 복사를 이해할 수 있다면 매개변수 전달이 매우 간단해질 것입니다. 기본 유형의 예부터 시작해 보겠습니다.

var count = 10;function num(num1){
   num1 = 1;
   return num1;
}var result = num(count);console.log(result);//1
console.log(count);//10，并未变成1

이 예제는 실제로 count의 복사본을 만든 다음 count의 값을 함수에 정의하므로 1이 10을 덮어쓰고 최종 결과가 반환됩니다. 1 , 개수는 변경되지 않았습니다. 객체 전달의 예를 살펴보겠습니다.

var person  = {
    name : "Tom"};function obj(peo){
    peo.name = "Jerry";
    return peo;
}var result = obj(person);
console.log(result.name);// Jerry
console.log(person.name);// Jerry

위의 예에서는 person이 복사되어 obj()에 전달됩니다. peo와 person은 동일한 개체를 가리키며, peo에서는 name 속성이 수정됩니다. 실제로 그들이 공동으로 가리키는 개체의 name 속성은 다음과 같습니다. 해당 외부인이 참조하는 이름 속성도 변경되어 인쇄되는 내용이 Jerry입니다. 사실 언뜻 보면 참조형 매개변수가 참조로 전달되는 것처럼 보입니다. 이것이 제가 처음에 저지른 실수였습니다. 또 다른 예를 살펴보겠습니다.

var person = {
    
name : "Tom"}; 
 function obj(peo){
    
peo = {
      
 name : "Jerry"
    };    
return peo; 
}
var result = obj(person);console.log(result.name);// Jerry

console.log(person.name);// Tom

위의 예에서 객체는 함수에서 재정의되었습니다. 즉, 이제 힙 메모리에 두 개의 객체가 있습니다. 외부 사람은 이전 객체를 가리키고 전달된 매개 변수는 새로 정의된 객체를 가리킵니다. .객체이므로 호출 후 반환되는 값은 새로 정의된 객체의 값입니다. 매개변수가 참조로 전달되면 person.name의 인쇄 결과는 Jerry입니다. 이 시점에서 매개변수는 값으로 전달된다는 결론을 내릴 수 있습니다(일부에서는 이를 공유로 전달한다고 함).

라오뤄가 추천하는 "인류의 간략한 역사"를 사용하여 시각화했지만 설명이 별로 좋지 않습니다. 간략한 역사의 첫 번째 장의 제목은 '사람'으로 이름을 바꾸었습니다. 뒤의 페이지 수에 따라 '인지 혁명'의 내용, 즉 대상을 직접 찾을 수 있습니다. 두 번째 장은 "농업 혁명"이고 우리는 이를 "결과"라고 부르며 하위 디렉토리에는 "메모리 과부하"("peo"로 이름 변경) 섹션이 있습니다. 이 섹션의 내용을 직접 찾을 수도 있습니다. 페이지 번호를 기준으로 합니다. 이제 "person"을 "peo"로 복사하면 2장의 "peo" 섹션이 "person"이 되고 1장의 "peoson"을 기반으로 찾은 내용은 여전히 1장 내용의 내용입니다. 서로 다른 콘텐츠 섹션으로 이동하고 서로 방해하지 마세요. 여기서 힙 메모리는 각 장의 내용이고 Chapter 1과 Chapter 2의 내용은 서로 다른 두 객체이고 둘은 서로 관련이 없으므로 외부 person.name을 인쇄할 때 결과는 여전히 이전 객체입니다. 속성 값.

결론

간단히 말하면, js의 매개변수는 값으로 전달됩니다. 제가 작성한 예제는 다소 거칠지만 "JavaScript 고급 프로그래밍"의 예제는 더 명확하고 이해하기 쉽습니다.

js에서 기능을 전송하는 방법

관련 기사