자바스크립트 변수,함수,객체의 표현

( function(x,y){ alert(x+','+y); } )(1,2);

// ()호출연산자는 두번째 피연산자와 함께, 첫번째 피연산자인 함수리터럴을 호출한다.
//물론 함수명이 오면 해당 레퍼런스를 호출한다.. 앞에 ()는 호출연산자가 아니라 그룹화시킨것 뿐이다.

function test( x ){
      var an=1; //함수내 지역변수.
      alert( typeof test +','+ typeof test.prototype +','+ typeof this); // function , object , object
      alert( this instanceof Window ); // true , 함수리터럴이 자동으로 전역객체에 추가되기때문..
}
test();
alert(typeof test); //function

test.bn = 2; //정적멤버변수 설정
alert(test.an +","+ test.bn );  // undefined, 2
alert(test.length +','+ test.toString() );  // 1, function test( x ){ ...}
alert( (new test()).an +","+ (new test()).bn);  // undefined, undefined

// 정적변수나 정적함수는 함수명(클래스명)으로 외부에서 추가하고 참조할수 있다.
// 만약 객체를 생성하더라도 정적변수와 함수는 객체와는 무관하며, 모든 객체에 참조가능한 멤버변수 및 함수를 만들려면 prototype을 사용한다.
// prototype은 함수선언시 자동생성되는 객체로, 함수명(클래스)으로 선언, 모든 객체에서 참조가능하다. 일종의 상속

++++

var y = new Function("x","return Math.sin(x)")
y.yy = function(){alert('yy');}
y.yy();
alert( Math.ceil(y(360)) );
alert(y);

++++

var o = {_an:1,_bn:2} //무명객체이기땜시 프로퍼티에 this를 쓰면 참조불가능
alert(o._an +","+ o._bn);  // 1, 2

function o(){
      var aa= 1;
      this._an = 1; //사용자 정의 객체 프로퍼티에서 aa는 지역변수임
      this._bn = ofunc;
}
function ofunc(){ return 2}
alert( (new o())._an +','+ (new o())._bn() );

++++

var y = "global";
function testFunction() {
    var y = "local";
    return new Function("return y");  // Function객체는 top-level에서 컴파일되므로 지역변수를 참조할수 없다.
}
alert( testFunction()() ); //global 출력

++++

function f(x,y){ return x+y }
alert( f.apply( {},[1,2] ) );  // f 함수를 무명객체의 메소드처럼 호출한다. 즉 {}.f(1,2)와 같다
alert( f.call( {},1,2 ) ); // 바로 위 문장과 동일하다.

++++

function f(x,y){
    alert(arguments.callee); // callee 함수 자신참조
    return x+y
}
f(1,2);

//정적 클래스
var staticClass = (function(){
    var cnt = 0; //지역변수 한번만 실행됨. 초기화용
    return {
        staticMethod:function(){ return cnt++; }
      }
})();
document.write(staticClass.staticMethod()); // 0 출력
document.write(staticClass.staticMethod()); // 1 출력

//일반 클래스 + 정적 클래스
var staticClass = (function(){
    var name = "테스트"; //지역변수
    function init(name){
        this.name = name; //멤버변수설정
    }
    init.staticMethod = function(){
        return "staticMethod "+name;
    }
    init.prototype = { //init함수의 prototype설정
        noStaic1:function(){
            return "noStaic1 " + this.name;
        },
        noStaic2:function(){
            return "noStaic2 " + this.name;
        }
    }   
    return init;
 })();

//정적메소드에 접근
alert(staticClass.staticMethod());

//클래스 인스턴스 생성 후 메소드에 접근
var obj = new staticClass("test");
alert( obj.noStaic1() );

++++
다른 예..
function car(m) {
    this.model = m
    this.staticFunc = function(str){ //객체함수(클래스함수참조용)
        return car.myMethod(str); //클래스함수참조
    }
    //this.staticFunc = staticFunc;
}
function myMethod(str){ //클래스함수
    alert('myMethod : '+str);
}
function myMethod2(){
    alert('myMethod2');
}
//function staticFunc(str){return myMethod(str);}
car.myMethod = myMethod; //클래스함수추가
car.myMethod('test'); //클래스함수호출
car.prototype.maker = true;

var carObj1 = new car("Acura")
var carObj2 = new car("BMW")
carObj1.staticFunc('aaa');
carObj2.myMethod2 = myMethod2;
alert(carObj1.model +','+ carObj1.maker);
carObj1.myMethod2();
carObj2.myMethod2(); //error;

var test = function(){alert('test');}
var scope = 20;

for(var p in window){
    document.write(window[p]+'<br>');
}
//출력 : 아래와 같이 추가된 것을 알수 있다.
// 20
// function () { alert("a");}
// .......

//Keyboard Events
function showKey(e) {
  var key;
  if (window.event) {
    key = window.event.keyCode;
  } else {
    key = e.keyCode;
  }
  key = String.fromCharCode(key);
  document.getElementById("para").innerHTML += key;
}
window.onload = function() {
  document.onkeydown = showKey;
}
<p id="para">Click and type here: </p>

//Mouse Events
function showPosition(e) {
  var x, y;
  if (window.event) { //IE
    x = window.event.clientX;
    y = window.event.clientY;
  } else { //FF
    x = e.pageX;
    y = e.pageY;
  } 
  //indow.status = "x: " + x + ", y: " + y;
  var key = "x: " + x + ", y: " + y;
  document.getElementById("para").innerHTML = key;
}
window.onload = function() {
  document.onmousemove = showPosition;
}
<div id="mstatus"></div>

//Extending Built-In Objects
function isLeapYear() {
  var y = this.getFullYear();
  return (y % 4 == 0 && (y % 100 != 0 || y % 400 == 0));
}
Date.prototype.isLeapYear = isLeapYear;
var d = new Date();
alert(d.isLeapYear());

//Form with the Enter Key
function checkKey(e) {
  var key;
  if (window.event) {
    key = window.event.keyCode;
  } else {
    key = e.keyCode;
  }
  if (key == 13) { // 엔터
    document.forms[0].submit();
  }
}
window.onload = function() {
  document.forms[0].elements["field"].onkeydown = checkKey;
}
<form><input name="field" type="text" /></form>

function UniversalTranslator() {
  this.copyright = " copyright...";
}
function UniversalCounter() {
  this.Count = count;
  var numbers = {
    "en": "one, two, three",
    "fr": "un, deux, trois",
    "de": "eins, zwei, drei"
  };
  function count(language) {
    if (numbers[language]) {
      alert(numbers[language]+" [ " + this.copyright + " ]");
    } else {
      window.alert("Unknown language");
    }
  }
}
UniversalCounter.prototype = new UniversalTranslator();
var uc = new UniversalCounter();
uc.Count("de");