Renewal·서른의 생활코딩

[Following Life-Coding] JavaScript OOP_12. Objects and Functions

May 1, 2019·2 min read

cover image

JavaScript Object-Oriented Programming

Life-Coding class Link: https://opentutorials.org/module/4047/24628

Objects and Functions - JavaScript Object-Oriented Programming

Class intro: in JavaScript, a function alone is an individual; with "new" in front it's a god that creates objects; with "call" attached it's a mercenary; with "bind" attached it can perform duplication — a remarkable being. Feel the wonder of JavaScript functions. Lecture 1: orientation. Lecture 2: see how to change the value of "this" each time via call. Code: object_function.js (changes) var kim = {name:'kim', first:

opentutorials.org

12. Objects and Functions

1. A function in JavaScript is

Alone it's an individual; with "new" in front it's a god that creates objects; with "call" attached it's a mercenary; with "bind" attached it performs duplication — a remarkable being, they say.. so I sketched it out once, ;o

2. + Trying call

2-1. Basic behavior

object_function.js)

var kim = {name:'kim', first:10, second:20 }
var lee = {name:'lee', first:10, second:10 }

function sum(){
    return this.first+this.second;
}

// sum.call() = sum() ; 모든 함수는 call 메소드를 내재하게 된다.
console.log("sum.call(kim) : ", sum.call(kim));   // sum()의 this는 kim이 된다.  
console.log("sum.call(lee) : ", sum.call(lee));   // sum()의 this는 lee이 된다.

Output)

2-2. Using call function arguments

When the call function is used with a prefix, it can take additional arguments each time it's invoked.

Of course, in real coding, "this" as an argument is commonly used. (Related example: http://bitly.kr/0NnAuC — see example 2)

object_function.js)

var kim = {name:'kim', first:10, second:20 }
var lee = {name:'lee', first:10, second:10 }

function sum(prefix){   //**
    return prefix + (this.first+this.second);
}

console.log("sum.call(kim) ", sum.call(kim,'-> '));   
console.log("sum.call(lee) ", sum.call(lee,' : '));

Output)

3. + Trying bind

Unlike call, which can change "this" every time the target function is invoked, when you want to fix a single "this" to a target function,

you + bind to the function to inject a new this and create a new function, kimSum.

object_function.js)

var kim = {name:'kim', first:10, second:20 }
var lee = {name:'lee', first:10, second:10 }

function sum(prefix){   //**
    return prefix + (this.first+this.second);
}

console.log("sum.call(kim) ", sum.call(kim,'-> '));   
console.log("sum.call(lee) ", sum.call(lee,' : '));  

var kimSum = sum.bind(kim, '->');			// 함수 생성
console.log("bind로 생성한 kimSum 함수: ", kimSum());      // 함수 출력

Output)

4. Thinking about it once more

egoing's question 1. What do call and bind do? What meaning can we get out of this?

-> my answer : For instance, call feels like a role that shares a key with anyone(this), and bind feels like cutting a new dedicated key so that only a specified party(this) can use it. Is JavaScript "customization-type"?.. Between call (any object, case by case) and bind (designated object) , code reusability seems to get maximized through the granularity. Then again, when reusable code grows too much, it can feel Lego-like.. in a way that you can build anything but you can't build anything in particular either — so it feels like a double-edged sword too.