'자바스크립트'에 해당되는 글 3건

call 함수는 결국 this를 조작하는 거 같다. 그러하다...

# 문서 call 함수 정의

- call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다

# 문서 call 함수 설명

- call()은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용됩니다. this는 현재 객체(호출하는 객체)를 참조합니다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 call()을 이용해 다른 객체에 상속할 수 있습니다.

솔직히 잘모르겠다. 그래서 예시를 만들어보았다.

# developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

구문

func.call(thisArg[, arg1[, arg2[, ...]]])

매개변수

thisArg func 호출에 제공되는 this의 값.

this는 메소드에 의해 보이는 실제값이 아닐 수 있음을 주의하세요: 메소드가 비엄격 모드 코드 내 함수인 경우, null 및 undefined는 전역 객체로 대체되고 원시값은 객체로 변환됩니다.

arg1, arg2, ...

객체를 위한 인수.

반환값(Return Value)

this 와 arguments 를 매개로 호출된 함수의 반환값

#예시

서버 3대 ServerA, ServerB, ServerC의 정보를 담은 객체와 출력하는 함수 만들기

var serverInfoPrint = {
  ip: "없음",
  address: "없음",
  name: "없음",
  print: function (conIp, conName) {
    return (
      "서버 정보 : " +
      this.ip +
      " , " +
      this.address +
      " , " +
      this.name +
      "/ 접속 정보 :" +
      conIp +
      " , " +
      conName
    );
  },
};

var serverA = {
  ip: "10.10.10.10",
  address: "서울 B구역",
  name: "개발 서버",
};

var serverB = {
  ip: "10.124.140.111",
  address: "부산 C구역",
  name: "백업 서버",
};

var serverC = {
  ip: "미할당",
  address: "대구 Q구역",
  name: "가상 서버",
};

// serverInfoPrint의 this를 사용하는 경우, 인자값을 안주는 경우
console.log(serverInfoPrint.print());
// serverInfoPrint의 this를 사용하는 경우, 인자값을 주는 경우
console.log(serverInfoPrint.print("0.0.0.0" , "테스트계정"));

// serverA의 this를 사용하는 경우, 인자값을 안주는 경우
console.log(serverInfoPrint.print.call(serverA));
// serverA의 this를 사용하는 경우, 인자값을 주는 경우
console.log(serverInfoPrint.print.call(serverA, "10.200.10.11", "테스트 계정"));
// serverA의 this를 사용하는 경우, 인자값을 주는 경우
console.log(serverInfoPrint.print.call(serverA, "0.0.0.0", "마스터 계정"));

// serverB의 this를 사용하는 경우, 인자값을 주는 경우
console.log(serverInfoPrint.print.call(serverB, "210.120.33.111", "유저 계정"));
// serverC의 this를 사용하는 경우, 인자값을 주는 경우
console.log(serverInfoPrint.print.call(serverC, "123.0.13.231", "테스트 계정"));

/**
서버 정보 : 없음 , 없음 , 없음/ 접속 정보 :undefined , undefined
서버 정보 : 없음 , 없음 , 없음/ 접속 정보 :0.0.0.0 , 테스트계정
서버 정보 : 10.10.10.10 , 서울 B구역 , 개발 서버/ 접속 정보 :undefined , undefined
서버 정보 : 10.10.10.10 , 서울 B구역 , 개발 서버/ 접속 정보 :10.200.10.11 , 테스트 계정
서버 정보 : 10.10.10.10 , 서울 B구역 , 개발 서버/ 접속 정보 :0.0.0.0 , 마스터 계정
서버 정보 : 10.124.140.111 , 부산 C구역 , 백업 서버/ 접속 정보 :210.120.33.111 , 유저 계정
서버 정보 : 미할당 , 대구 Q구역 , 가상 서버/ 접속 정보 :123.0.13.231 , 테스트 계정
 */

# 결과화면

// 일반적인 즉시 함수 
(function (a) {
    console.log(100);
    // 100
})(100);

// 1. 즉시 실행 
!function (a) {
    console.log(a);
    // 100
}(100);

//
true && function (a) {
    console.log(a);
    // 100
}(100);

1 ? function (a) {
    console.log(a);
    // 100
}(100) : 0;

0, function (a) {
    console.log(a);
    // 100
}(100);

var b = function (a) {
    console.log(a);
    // 100
}(100);

function f2() { }
f2(function (a) {
    console.log(a);
    // 100
}(100))

var f3 = function c(a) {
    console.log(a);
    // 100
}(100);

new function(){
    console.log(100);
    // 100
};

1-1. 테스트

for(let j = 0; j < 10; j++){
    var arr = [];
    console.time("1-1.calculatingTime")
    for (var i = 1; i <= 1000000; i++) {
        arr[i] = i;
    }

    console.timeEnd('1-1.calculatingTime');

    //  -------------------------------------
    var arr = [];
    console.time("2-1.calculatingTime")
    for (var i = 1; i <= 1000000; i++) {
        arr.push(i);
    }
    console.timeEnd('2-1.calculatingTime');
}

   1-2. 결과 :

        익스의 경우 arr[i] = i가 성능상 빠름,

        크롬의 경우 arr[i]가 빠르다고 생각하여 테스트를 진행하였으나,

        엎치락뒤치락 하는 기록이 있음 (평균값. arr[i] = i : 20.79489746ms , arr.push(i) : 24.61420898)

 2-1. 테스트 

var j = 0;
for (j = 0; j < 10; j++) {
    var sum = 0;
    var arr = [];
    console.time("1.calculatingTime")
    for (var i = 1; i <= 1000000; i++) {
        sum += i;
        arr[i] = sum;
    }

    console.timeEnd('1.calculatingTime');
}
//  -------------------------------------
var j = 0;
for (j = 0; j < 10; j++) {
    var sum = 0;
    var arr = [];
    console.time("2.calculatingTime")
    for (var i = 1; i <= 1000000; i++) {
        sum += i;
        arr.push(sum);
    }

    console.timeEnd('2.calculatingTime');
}

2-2 결과 

        익스의 경우 여전히 arr[i] = i가 성능상 빠름,

        크롬의 경우 엎치락뒤치락 하는 기록이 있음 (평균값. arr[i] = i : 75.38521ms , arr.push(i) : 78.85928)