[javascript] 자바 스크립트에서 클래스와 정적 메소드

첫째, 자바 스크립트는 주로 있다는 사실을 프로토 타입 언어 라기보다는, 클래스 기반 언어 ¹ . Foo클래스가 아니라 함수 인 객체입니다. 키워드를 사용하여 해당 함수 에서 객체 를 인스턴스화하여 new표준 OOP 언어로 클래스와 비슷한 것을 만들 수 있습니다.

__proto__교차 브라우저 지원이 좋지 않기 때문에 대부분 무시하는 것이 좋습니다. 대신 방법에 대해 배우십시오.prototype 작동 방식 .

함수 ² 에서 생성 된 객체의 인스턴스가 있고 어떤 방식 으로든 멤버 중 하나 (메서드, 속성, 속성, 상수 등)에 액세스하는 경우 액세스는 프로토 타입 계층 구조 아래로 (a) 또는 (b) 다른 프로토 타입을 찾지 못했습니다.

계층 구조는 호출 된 객체에서 시작한 다음 프로토 타입 객체를 검색합니다. 프로토 타입 객체에 프로토 타입이 있으면 프로토 타입이 없으면 반복됩니다 undefined.

예를 들면 다음과 같습니다.

foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz"

foo = {};
console.log(foo.bar); // logs undefined

function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" set

이 “기본”부분을 이미 어느 정도 이해했다고 생각되지만 확실하게하기 위해 명시 적으로 만들어야합니다.

JavaScript에서 모든 것은 객체입니다 ³ .

모든 것이 대상입니다.

function Foo(){} 새로운 함수를 정의 할뿐만 아니라, 새로운 함수를 사용하여 액세스 할 수있는 새로운 함수를 정의 Foo .

그렇기 때문에으로 Foo프로토 타입에 액세스 할 수 있습니다 Foo.prototype.

당신이 할 수있는 일은 더 많은 기능 을 설정 하는 것 입니다 Foo.

Foo.talk = function () {
  alert('hello world!');
};

이 새로운 기능은 다음을 사용하여 액세스 할 수 있습니다.

Foo.talk();

지금까지 함수 객체의 함수와 정적 메서드의 유사성을 주목하기를 바랍니다.

생각 f = new Foo();, 클래스 인스턴스를 만드는 등의 Foo.prototype.bar = function(){...}클래스에 대해 공유 방법을 정의로, 그리고 Foo.baz = function(){...}클래스에 대한 공공 정적 방법을 정의한다.

ECMAScript 2015는 이러한 종류의 선언에 대해 다양한 구문 설탕을 도입하여 쉽게 읽을 수 있고 구현하기가 더 간단 해졌습니다. 따라서 이전 예제는 다음과 같이 작성할 수 있습니다.

class Foo {
  bar() {...}

  static baz() {...}
}

다음 bar과 같이 호출 할 수 있습니다.

const f = new Foo()
f.bar()

다음과 baz같이 부릅니다.

Foo.baz()

_{1 : classECMAScript 5 사양에서 “Future Reserved Word” 였지만 ES6에서는 class키워드를 사용하여 클래스를 정의하는 기능이 도입되었습니다 .}

_{2 : 본질적으로 생성자에 의해 생성 된 클래스 인스턴스이지만, 당신을 오도하고 싶지 않은 많은 미묘한 차이점이 있습니다.}

_{3 : 원시 값 포함 – 어떤은 undefined, null, 부울, 숫자 및 문자열 됐소 기술적 때문에 그들이있는 거 낮은 수준의 언어 구현 객체. 부울, 숫자 및 문자열은 여전히 ​​프로토 타입 체인과 객체처럼 상호 작용하므로이 답변의 목적 상 비록 그렇지 않더라도 “객체”로 간주하는 것이 더 쉽습니다.}

답변

function Foo() {};

Foo.talk = function() { alert('I am talking.'); };

Foo.talk();

function Clazz() {};
Clazz.staticMethod = function() {
    alert('STATIC!!!');
};

Clazz.prototype.func = function() {
    this.constructor.staticMethod();
}

var obj = new Clazz();
obj.func(); // <- Alert's "STATIC!!!"

function Animal(name) {
    Animal.count = Animal.count+1||1;// static variables, use function name "Animal"
    this.name = name; //instance variable, using "this"
}

Animal.showCount = function () {//static method
    alert(Animal.count)
}

Animal.prototype.showName=function(){//instance method
    alert(this.name);
}

var mouse = new Animal("Mickey");
var elephant = new Animal("Haddoop");

Animal.showCount();  // static method, count=2
mouse.showName();//instance method, alert "Mickey"
mouse.showCount();//Error!! mouse.showCount is not a function, which is different from  Java

'use strict'

class Foo {
 static talk() {
     console.log('talk')
 };

 speak() {
     console.log('speak')
 };

};

var a = new Foo();
Foo.talk();  // 'talk'
a.talk();    // err 'is not a function'
a.speak();   // 'speak'
Foo.speak(); // err 'is not a function'

var Foo = {
     element: document.getElementById("id-here"),

     Talk: function(message) {
            alert("talking..." + message);
     },

     ChangeElement: function() {
            this.element.style.color = "red";
     }
};

Foo.Talk("Testing");

Foo.ChangeElement();

class Foo {
    constructor() {}

    talk() {
        console.log("i am not static");
    }

    static saying() {
        console.log(this.speech);
    }

    static get speech() {
        return "i am static method";
    }

}