Javascript Function

2020. 06. 13

Jaewoo KIM

๐Ÿ’โ€โ™‚๏ธ Function Instance

Function Instance ๊ธฐ์ค€

Function ๊ตฌ๋ถ„

  • Built In Function Object
  • Funtion Object : function ํ‚ค์›Œ๋“œ๋กœ ์ƒ์„ฑ
  • Funtion Instance: new ์—ฐ์‚ฐ์ž๋กœ ์ƒ์„ฑ
function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var person = new Persion('Jaewoo KIM')
person.getName();

Function Instance ์ƒ์„ฑ

1. function Person(name) {...}

2. Person.prototype.getName = function() {}

3. var person = new Person('Jaewoo KIM')

function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM')

log(obj.name);
log(obj.getName());

๐Ÿ’โ€โ™‚๏ธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜

์ƒ์„ฑ์ž ํ•จ์ˆ˜

  • new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜
    • new Person() ์—์„œ Person() ์ด ์ƒ์„ฑ์ž ํ•จ์ˆ˜
  • new ์—ฐ์‚ฐ์ž
    • ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ์„ ์ œ์–ด
    • ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ˜ธ์ถœ
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜
    • ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ, ๋ฐ˜ํ™˜
    • ์ธ์Šคํ„ด์Šค์— ์ดˆ๊นƒ๊ฐ’ ์„ค์ •

์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์‹คํ–‰ ๊ณผ์ •

  1. ์—”์ง„์ด new ์—ฐ์‚ฐ์ž๋ฅผ ๋งŒ๋‚˜๋ฉด
    function์˜ [[Construct]]๋ฅผ ํ˜ธ์ถœ
  2. fuction ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ
    Person() ํ•จ์ˆ˜ ์ „์ฒด๋ฅผ [[Constuct]]์— ์„ค์ •
  3. [[Construct]]์—์„œ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜
  4. ๋ฐ˜ํ™˜๋œ ์ธ์Šคํ„ด์Šค๋ฅผ new ์—ฐ์‚ฐ์ž๊ฐ€ ๋ฐ›์•„
    new ์—ฐ์‚ฐ์ž๋ฅผ ํ˜ธ์ถœํ•œ ๊ณณ์œผ๋กœ ๋ฐ˜ํ™˜
function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM')

new ์—ฐ์‚ฐ์ž๊ฐ€ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์‹ค์ œ๋กœ function์˜ [[Construct]]๊ฐ€ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑ

์ธ์Šคํ„ด์Šค ์ƒ์„ฑ ๊ณผ์ •

  1. new Person() ์‹คํ–‰
    • Person ์˜ค๋ธŒ์ ํŠธ์˜ [[Construct]] ํ˜ธ์ถœ
    • ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ [[Construct]]๋กœ ์ „๋‹ฌ
  2. ๋นˆ Object ์ƒ์„ฑ
    • ์—ฌ๊ธฐ์„œ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ํ•˜๋‚˜์”ฉ ์ฑ„์›Œ๋‚˜๊ฐ
  3. Object ๋‚ด๋ถ€ ์ฒ˜๋ฆฌ์šฉ ํ”„๋กœํผํ‹ฐ๋ฅผ ์„ค์ •
  4. Object์˜ [[Class]]์— "Object" ์„ค์ •
  5. Person.prototype์— ์—ฐ๊ฒฐ๋œ ๋ฉ”์„œ๋“œ๋ฅผ
    ์ƒ์„ฑํ•œ ์ธ์Šคํ„ด์Šค์˜ [[Prototype]]์— ์„ค์ •
function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM')
Person ์ธ์Šคํ„ด์Šค: {
  name: 'Jaewoo KIM'
  __proto__ = {
    constructor: Person,
    getName: fuction() {},
    __proto__: Object
  }
}

๐Ÿ’โ€โ™‚๏ธ constructor ํ”„๋กœํผํ‹ฐ

Constructor ํ”„๋กœํผํ‹ฐ

  • ์ƒ์„ฑํ•˜๋Š” function ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ฐธ์กฐ
    • function ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์„ค์ •
    • prototype์— ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์Œ
  • ES5: constructor ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€
    • ์ƒ์„ฑ์ž ํ™œ์šฉ ๋ถˆ๊ฐ€
  • ES6: constructor ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ
    • ํ™œ์šฉ์„ฑ ๋†’์Œ
Person fuction ์˜ค๋ธŒ์ ํŠธ: {
  prototype: {
    constructor: Person
  }
}

Constructor ๋น„๊ต

  1. Person === Person.prototype.constructor
  2. Person === obj.constructor
  3. typeof Person
  4. typeof obj
  5. function ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ธ์Šคํ„ด์Šค๋กœ ์ƒ์„ฑํ–ˆ๋”๋‹ˆ
    ํƒ€์ž…์ด ๋ณ€๊ฒฝ๋˜์—ˆ์Œ
    • [[Construct]]๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์ƒ์„ฑ๋œ ์˜ค๋ธŒ์ ํŠธ์˜ [[Class]]์— 'Object'๋ฅผ ์„ค์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ
var Person = function(){};
var result = 
    Person === Person.prototype.constructor;
log(result); // true

var obj = new Person();
log(Person === obj.contructor) // true

log(typeof Person) // function
log(typeof obj) // object

๐Ÿ’โ€โ™‚๏ธ prototype, ์ƒ์†

prototype ์˜ค๋ธŒ์ ํŠธ ๋ชฉ์ 

  • prototype ํ™•์žฅ
    • prototype์— ํ”„๋กœํผํ‹ฐ๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ํ™•์žฅ
    • Person.prototype.getName = function() {}
  • ํ”„๋กœํผํ‹ฐ ๊ณต์œ 
    • ์ƒ์„ฑํ•œ ์ธ์Šคํ„ด์Šค์—์„œ ์›๋ณธ prototype์˜ ํ”„๋กœํผํ‹ฐ ๊ณต์œ 
  • ์ธ์Šคํ„ด์Šค ์ƒ์†
    • function ์ธ์Šคํ„ด์Šค๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ์ƒ์†
    • Person.prototype = new Point()

์ธ์Šคํ„ด์Šค ์ƒ์†

  • ์ธ์Šคํ„ด์Šค ์ƒ์† ๋ฐฉ๋ฒ•
    • prototype์— ์—ฐ๊ฒฐ๋œ ํ”„๋กœํผํ‹ฐ๋กœ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑํ•˜์—ฌ ์ƒ์†๋ฐ›์„ prototype์— ์—ฐ๊ฒฐ
function Person(name) {
	this.name = name;
}
Person.prototype.getName = function() {
	return this.name;
}

function Point(name) {
  Person.call(this, name);
}
Point.prototype =
  Object.create(Person.prototype, {});

var obj = new Point('Jaewoo KIM')
log(obj.getName())

์ธ์Šคํ„ด์Šค ์ƒ์†

  • ์ธ์Šคํ„ด์Šค ์ƒ์† ๋ฐฉ๋ฒ•
    • ES6์˜ Class ์ƒ์†
class Person {
    constructor(name) {
      this.name = name;
    }
    getName() {
      return this.name;
    }
}

class Point extends Person {
    constructor(name) {
      super(name)
    }
}

const obj = new Point('Jaewoo KIM')
log(obj.getName())

๐Ÿ’โ€โ™‚๏ธ prototype ํ™•์žฅ

prototype ํ™•์žฅ ๋ฐฉ๋ฒ•

  • prototype์— ํ”„๋กœํผํ‹ฐ๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ์ž‘์„ฑ
    • prototype.name = value ํ˜•ํƒœ
  • ์ผ๋ฐ˜์ ์œผ๋กœ function์„ ์‚ฌ์šฉ
  • prototype์— null์„ ์„ค์ •ํ•˜๋ฉด ํ™•์žฅ ๋ถˆ๊ฐ€

ํ”„๋กœํผํ‹ฐ ์—ฐ๊ฒฐ ๊ณ ๋ ค์‚ฌํ•ญ

  • prototype์— ์—ฐ๊ฒฐํ•  ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋งŽ์„ ๋•Œ
    • Person.prototype.nam1 ... ~ N ํ˜•ํƒœ๋Š”
      ๋ฐ˜๋ณตํ•ด์•ผ ํ•ด์„œ ์ž‘์„ฑํ•ด์•ผ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฒˆ๊ฑฐ๋กœ์›€
    • Person.prototype = {name1: value, .... N}
  • constructor๊ฐ€ ์ง€์›Œ์ง€๋Š” ๋ฌธ์ œ์™€ ๋Œ€์ฑ…
    • {name1: value, ...} ํ˜•ํƒœ๋กœ ์„ค์ •ํ•œ ํ›„
      prototype์— constructor๋ฅผ ๋‹ค์‹œ ์—ฐ๊ฒฐ

constructor ์—ฐ๊ฒฐ

  1. ์˜ค๋ธŒ์ ํŠธ ๋ฆฌํ„ฐ๋Ÿด {} ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœํผํ‹ฐ๋ฅผ ์—ฐ๊ฒฐํ•  ๋•Œ
    constructor๊ฐ€ ์ง€์›Œ์ง€๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค.
  2. constructor๊ฐ€ ์—†์–ด๋„ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜์ง€๋งŒ
    • constructor๊ฐ€ ์—ฐ๊ฒฐ๋œ ๊ฒƒ์ด ์ •์ƒ์ด๋ฏ€๋กœ...
function Person() {};
Person.prototype = {
  constructor: Person,
  setName: function() {}
}

var obj = new Person();
log(obj.constructor);
// function Person() {}

prototype ํ™•์žฅ๊ณผ ์ธ์Šคํ„ด์Šค ํ˜•ํƒœ

  1. fuction Person() {};
    • Person ์˜ค๋ธŒ์ ํŠธ ์ƒ์„ฑ
  2. Person.prototype.getName
    ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย = function(){}
    • getName ๋ฉ”์„œ๋“œ ์—ฐ๊ฒฐ
  3. var obj = new Person();
    • ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ ๋ฐ ํ• ๋‹น
function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM');
obj.getName();

obj: {
  name: 'Jaewoo KIM'
  __proto__ = {
    constructor: Person,
    getName: fuction() {},
    __proto__: Object
  }
}

๐Ÿ’โ€โ™‚๏ธ this์™€ prototype

this๋กœ ์ธ์Šคํ„ด์Šค ์ฐธ์กฐ

  • this๋กœ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ์ธ์Šคํ„ด์Šค ์ฐธ์กฐ
    • var obj = new Person();
    • obj.get() ํ˜•ํƒœ์—์„œ this๋กœ obj ์ฐธ์กฐ
  • ์ธ์Šคํ„ด์Šค์—์„œ ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ ๋ฐฉ๋ฒ•
    • prototype์— ์—ฐ๊ฒฐ๋œ ํ”„๋กœํผํ‹ฐ๊ฐ€ __proto__์— ์„ค์ •๋˜๊ณ 
      ์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋œ๋‹ค

this์™€ prototype

  • log("1:",ย  this.name);
    • ์—ฌ๊ธฐ์„œ this๋Š” ์ƒ์„ฑ ์ธ์Šคํ„ด์Šค ์ฐธ์กฐ
    • name ํ”„๋กœํผํ‹ฐ๊ฐ€ ์—†๋”๋ผ๊ณ  ์—๋Ÿฌ๊ฐ€
      ๋ฐœ์ƒํ•˜์ง€ ์•Š๊ณ  undefined๋ฅผ ๋ฐ˜ํ™˜
  • obj.getName();
    • ์—ฌ๊ธฐ์„œ this๋Š” ํ˜ธ์ถœํ•œ ์ธ์Šคํ„ด์Šค
  • this.setPoint()
    • ์—ฌ๊ธฐ์„œ this๋Š” ์ƒ์„ฑ ์ธ์Šคํ„ด์Šค ์ฐธ์กฐ
function Person() {
	log("1:". this.name)
};

Person.prototype.getName = function() {
	this.setName();
  	log('2:'. this.name)
}
Person.prototype.setName = function() {
	this.name = "Jaewoo KIM"
}

var obj = new Person('Jaewoo KIM');
obj.getName();

prototype ๋ฉ”์„œ๋„ ์ง์ ‘ ํ˜ธ์ถœ

  • Person.prototype.getName();
    • ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ณ  ์ง์ ‘ ํ˜ธ์ถœ
  • Person.prototype์„ this๋กœ ์ฐธ์กฐ
  • obj ์ธ์Šคํ„ด์Šค์—๋Š” name์ด ์žˆ์ง€๋งŒ
    Person.prototype์—๋Š” ์—†์Œ
function Person(name) {
	this.name = name;
};

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM');
log(obj.getName()); // Jaewoo KIM

log(Person.prototype.getName()) // undefined

๐Ÿ’โ€โ™‚๏ธ prototype ํ”„๋กœํผํ‹ฐ ๊ณต์œ  ์‹œ์ 

ํ”„๋กœํผํ‹ฐ ๊ณต์œ  ์‹œ์ 

  • ์‚ฌ์šฉํ•˜๋Š” ์‹œ์ ์— prototype์˜ ํ”„๋กœํผํ‹ฐ ๊ณต์œ 
  • prototype์˜ ํ”„๋กœํผํ‹ฐ๋กœ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜์ง€๋งŒ
    • ์ธ์Šคํ„ด์Šค์˜ ํ”„๋กœํผํ‹ฐ๋Š” ์›๋ณธ prototype์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐ
    • ๋ณต์‚ฌ๊ฐœ๋…์ด ์•„๋‹˜
  • ์ธ์Šคํ„ฐ์Šค์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์›๋ณธ prototype์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœ
  • ์›๋ณธ prototype์— ๋ฉ”์†Œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ชจ๋“  ์ธ์Šคํ„ด์Šค์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅ

ํ”„๋กœํผํ‹ฐ ๊ณต์œ  ์‹œ์ 

function Person() {
	this.name = 'Jaewoo KIM';
};

var obj = new Person();
log(obj.getName); // undefined

Person.prototype.getName = function() {
  return this.name
}

var result = obj.getName()
log(result) // Jaewoo KIM

๐Ÿ’โ€โ™‚๏ธ ์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ

์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ

  • prototype์— ์—ฐ๊ฒฐ๋œ ํ”„๋กœํผํ‹ฐ๋„ ์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ
    • ์ง์ ‘ ์ธ์Šคํ„ด์Šค์— ์—ฐ๊ฒฐ๋œ ํ”„๋กœํผํ‹ฐ์™€ ์ฐจ์ด ์žˆ์Œ
  • ์ธ์Šคํ„ด์Šค์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ prototype์œผ๋กœ ๋งŒ๋“ 
    ์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ ๋ณด๋‹ค ๋จผ์ € ์‚ฌ์šฉ
  • ์ธ์Šคํ„ด์Šค๋งˆ๋‹ค ๊ฐ’์„ ๋‹ค๋ฅด๊ฒŒ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ
    • ์ธ์Šคํ„ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ค‘์š”ํ•œ ๋ชฉ์ 
obj ์ธ์Šคํ„ด์Šค = {
  name: 'Jaewoo KIM',
  getName: function() {},
  __proto__: {
    getName: fuction() {}
  }
}

์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ ์šฐ์„  ์‚ฌ์šฉ

function Person(name) {
	this.name = name;
};

Person.prototype.getName = function() {
  return 'Jaewoo KIM'
}

var obj = new Person('sat10am');
obj.getName = function () {
  return this.name
}

log(obj.getName());


obj ์ธ์Šคํ„ด์Šค = {
  name: 'sat10am',
  getName: function() {},
  __proto__: {
    getName: fuction() {}
  }
}

๋

sat10am-200613

By Jaewoo KIM

Made with Slides.com

sat10am-200613

  • 315

More from Jaewoo KIM