// 팩토리 함수
- 패턴을 기반으로 한 객체를 만드는 방법
- 비어있는 상태로 시작하지만 주어진 인수를 기반으로 속성을 추가한다.
function makeColor(r, g, b) {
const color = {};
color.r = r;
color.g = g;
color.b = b;
color.rgb = function () {
const { r, g, b } = this;
return `rgb(${r}, ${g}, ${b})`;
};
color.hex = function () {
const { r, g, b } = this;
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};
return color;
}
const firstColor = makeColor(35, 255, 150);// 생성자 함수
- 멤버 초기화
- 같은 구조(★)의 객체를 생성하는 것이 목표
- 대문자로 시작한다.(일반 함수와 구분하기 위해)
- new 연산자와 함께 호출해야 한다.
function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.prototype.rgb = function () {
const { r, g, b } = this;
return `rgb(${r}, ${g}, ${b})`;
};
Color.prototype.hex = function () {
const { r, g, b } = this;
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};
const color1 = new Color(255, 40, 100);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<button name="btn1" type="button">버튼</button>
<script>
//생성자 함수
function User(name, age) {
this.name = name;
this.age = age;;
this.hello = function() {
console.log('내 이름은 ' + this.name);
}
}
const m3 = new User('홍길동', 26);
console.log(m3);
// new > 빈 객체를 생성!
const m4 = {};
//User('홍길동', 20) > 왼쪽에서 new가 만든 빈객체를 초기화하는 역할
m4.name = '홍길동';
m4.age = 20;
const m5 = new User('이순신', 25);
console.log(m5);
</script>
</body>
</html>// call
- 독립된 함수를 특정 객체의 메서드로 호츨할 수 있다.
- call()의 첫 번째 인자값으로 객체를 넣어준다.
var hanee = {name:'hanee', first:10, second:20}
var han = {name:'han', first:10, second:10}
function sum(prefix) {
return prefix + (this.first + this.second);
}
console.log("sum.call(hanee) " + sum.call(hanee, '=> '));
console.log("sum.call(han) " + sum.call(han, ': '));
'클라이언트 > JavaScript' 카테고리의 다른 글
| CSS 조작 - Window Size (0) | 2023.12.04 |
|---|---|
| [자바스크립트(JavaScript)] 클래스 (2) | 2023.11.30 |
| [자바스크립트(JavaScript)] Prototype(프로토타입), __proto__ (0) | 2023.11.27 |
| [자바스크립트(JavaScript)] API, Ajax (4) | 2023.11.27 |
| [자바스크립트(JavaScript)] 비동기 함수(Async Functions) (0) | 2023.11.24 |
