eunsol
293
2021-05-14 17:55:05
2
117

자바스크립트 문제




function HelloFunc(func) {
	this.greeting = "hello";
}

HelloFunc.prototype.call = function(func) {
	func ? func(this.greeting) : this.func(this.greeting);
}

var userFunc = function(greeting) {
	console.log(greeting);
}

var objHello = new HelloFunc();
objHello.func = userFunc;
objHello.call(); //hello

function saySomething(obj, methodName, name) {

	return (function(greeting) {

		return obj[methodName](greeting, name);
	});
}

function newObj(obj, name) {
	obj.func = saySomething(this, "who", (name || "everyone"));

	return obj;
}

newObj.prototype.who = function(greeting, name) {
	console.log(greeting + " "  +  (name || "everyone") );

}

var obj1 = new newObj(objHello, "zzoon");

obj1.call(); //hello zzoon



마지막에 obj1.call() 호출 하는데 newObj.prototype.who 가 실행되는지 정말 모르겟슴다. ㅠㅠ

0
  • 답변 2

  • 1005hoon
    771
    2021-05-17 16:49:57


    우선 HelloFunc 라는 친구를 명세해주었고, 아직 instantiate 시켜주지 않았습니다
    HelloFunc = {
    greeting: 'hello'
    }

    다음 코드를 보면, HelloFunc의 프로토타임에 call이라는 메소드를 연결시켜줬네요
    HelloFunc = {
    greeting: 'hello',
    call: function(func) {
    func ? func(this.greeting === 'hello') : this.func(this.greeting === 'hello')
    }
    }

    call 함수를 설명해보자면, call 함수를 실행시킬 때, 인자값으로 함수를 전달하면 전달받은 함수에 "hello" 문자열을 입력해 실행시키고
    인자값으로 아무것도 전달받지 못했다면 HelloFunc객체가 갖고있는 func라는 함수에 "hello" 문자열을 입력해 실행시킵니다.

    다음 코드를 보면

    var userFunc = function (greeting) {
    console.log(greeting);
    };

    userFunc라는 변수에 greeting 값을 받아와 log시키는 함수를 지정해주었습니다


    var objHello = new HelloFunc();
    그리고 objHello라는 변수에 HelloFunc 객체를 instantiate 시켜줍니다
    그럼 objHello = {
    greeting: 'hello',
    call: function(func) {
    func ? func(this.greeting === 'hello') : this.func(this.greeting === 'hello')
    }
    }
    이런 모양의 친구가 만들어지겠죠


    그런 다음에 보면
    objHello.func = userFunc; 라고 하네요

    그럼 objHello = {
    greeting: 'hello',
    call: function(func) {
    func ? func(this.greeting === 'hello') : this.func(this.greeting === 'hello')
    },
    func: userFunc
    }

    될테고, userFunc를 풀어서 입력해보면
    그럼 objHello = {
    greeting: 'hello',
    call: function(func) {
    func ? func(this.greeting === 'hello') : this.func(this.greeting === 'hello')
    },
    func: function (greeting) {
    console.log(greeting);
    };
    }
    이게 되겠네요.

    다음 코드블록을 보면 objHello.call(); objHello call 메소드를 아무 인자값도 전달하지 않고 실행시켰죠
    그럼 실행될 함수를 보면
    그럼 objHello = {
    greeting: 'hello',
    call: function() {
    this.func('hello')
    },
    func: function (greeting) {
    console.log(greeting);
    };
    }
    이렇게 되겠네요. 인자로 아무 함수도 전달받지 않았으니, objHello가 자체적으로 갖고있는 func 라는 함수에 'Hello'라는 문자열을 전달해 실행시킵니다

    그럼
    func: function ('hello') {
    console.log('hello');
    };

    친구가 실행이 될테니,
    'hello' 라는 결과값이 로그에 출력되겠죠





    function saySomething(obj, methodName, name) {
    return function (greeting) {
    return obj[methodName](greeting, name);
    };
    }
    보면
    saySomething이라는 함수는 (객체와, 메소드 이름, 그리고 이름) 세가지를 받아오고,
    값들의 메모리 주소를 기억하는 클로져 함수를 리턴해줍니다.

    리턴된 함수를 보면
    saySomething에 전달했던 객체의[메소드이름을] (greeting 변수와, 이름)을 입력해 실행하도록 하네요




    function newObj(obj, name) {
    obj.func = saySomething(this, "who", (name || "everyone"));
    return obj;
    }
    보면, newObj라는 객체를 생성시킬 때, 전달받은 obj 안에 func라는 메소드를 만들어주고, saySomething이라는 함수를 전달해주네요.

    newObj = {
    ...obj,
    func: saySomething(this, 'who', (name || 'everyone'))
    }




    newObj.prototype.who = function (greeting, name) {
    console.log(greeting + " " + (name || "everyone"));
    };
    그리고, newObj안에 who라는 메소드도 심어줬네요


    newObj = {
    ...obj,
    func: saySomething(this, 'who', (name || 'everyone')),
    who: function (greeting, name) {
    console.log(greeting + " " + (name || "everyone"));
    };
    }



    마지막으로,
    var obj1 = new newObj(objHello, "zzoon");
    obj1라는 친구에게 해당 객체를 instantiate 해주었죠
    그럼 풀어서 보면
    obj1 = {
    ...objHello,
    func: saySomething(this, 'who', ('zzoon' || 'everyone')),
    who: function (greeting, 'zzoon') {
    console.log(greeting + " " + ('zzoon' || "everyone"));
    };
    }
    되겠네요


    풀어서 보면
    obj1 = {
    greeting: 'hello',
    call: function(func) {
    func ? func(this.greeting === 'hello') : this.func(this.greeting === 'hello')
    },
    // func: userFunc 얘는 중복되기때문에, 가장 마지막에 연결해준 saySomething을 실행하게 됩니다.
    func: saySomething(this, 'who', ('zzoon' || 'everyone')),
    who: function (greeting, 'zzoon') {
    console.log(greeting + " " + ('zzoon' || "everyone"));
    };
    }


    이렇게 상태에서, obj1.call() 실행하면 call 메소드에 인자값을 전달하지 않았기 때문에
    obj1안에 있는 func라는 함수를 실행시키겠죠

    보면 obj1.func 함수는 saySomething이네요
    해당 객체와, 'who', 그리고 'zzoon' 인자값으로 전달받아 실행시키면


    function saySomething(obj1, 'who', 'zzoon') {
    return function (greeting) {
    return obj1['who'](greeting, 'zzoon');
    };
    }

    그렇게 obj1안에 있는 who라는 메소드를 (greeting값과 'zzoon') 입력시켜 실행을 하게 됩니다.
    그럼 obj1안에 greeting값을 사용해 실행하게 되면
    'hello zzoon' 실행되겠죠
  • eunsol
    293
    2021-05-18 10:18:58

    @hoonnote 


    너무 자세하게 알려주셔서 감사합니다. :)


    클로저 개념이 이해가 잘안됫는데 감사합니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.