Development Tip

클래스 이름을 정의하기 위해 변수 String을 사용하여 JavaScript 객체를 만들려면 어떻게해야합니까?

yourdevel 2020. 11. 16. 22:18
반응형

클래스 이름을 정의하기 위해 변수 String을 사용하여 JavaScript 객체를 만들려면 어떻게해야합니까?


여기 제가하려는 작업이 있습니다. 이것은 의사 코드이며 작동하지 않습니다. 누구든지 이것을 실제로 수행하는 방법을 알고 있습니까?

// Define the class
MyClass = Class.extend({});

// Store the class name in a string
var classNameString = 'MyClass';

// Instantiate the object using the class name string
var myObject = new classNameString();

다음과 같이하면 작동할까요?

var myObject = window[classNameString];

..?


다음은 네임 스페이스 함수와 함께 작동하는보다 강력한 솔루션입니다.

var stringToFunction = function(str) {
  var arr = str.split(".");

  var fn = (window || this);
  for (var i = 0, len = arr.length; i < len; i++) {
    fn = fn[arr[i]];
  }

  if (typeof fn !== "function") {
    throw new Error("function not found");
  }

  return  fn;
};

예:

my = {};
my.namespaced = {};
(my.namespaced.MyClass = function() {
  console.log("constructed");
}).prototype = {
  do: function() {
    console.log("doing");
  }
};

var MyClass = stringToFunction("my.namespaced.MyClass");
var instance = new MyClass();
instance.do();

BTW : 창은 브라우저 JavaScript의 전역 개체에 대한 참조입니다. 또한 this이며 Node.js, Chrome 확장 프로그램, 트랜스 파일 된 코드 등과 같은 브라우저가 아닌 환경에서도 작동합니다.

var obj = new this[classNameString]();

제한은 호출되는 클래스가 전역 컨텍스트에 있어야한다는 것입니다. 범위가 지정된 클래스에 동일하게 적용하려면 다음을 수행해야합니다.

var obj = (Function('return new ' + classNameString))()

그러나 실제로 문자열을 사용할 이유가 없습니다. JavaScript 함수는 객체이기도 한 문자열과 마찬가지로 객체입니다.

편집하다

엄격 모드 및 비 브라우저 JS 환경에서 작동하는 전역 범위를 얻는 더 좋은 방법은 다음과 같습니다.

var global;
try {
  global = Function('return this')() || (42, eval)('this');
} catch(e) {
  global = window;
}

// and then
var obj = new global[classNameString]

보낸 사람 : JavaScript에서 전역 개체를 가져 오는 방법은 무엇입니까?


MyClass가 전역이면 아래 첨자 표기법을 사용하여 창 개체의 속성으로 액세스 할 수 있습니다 (코드가 브라우저에서 실행된다고 가정).

var myObject = new window["MyClass"]();

classNameString안전한 출처에서 온 경우 사용할 수 있습니다.

var classNameString = 'MyClass';
var myObject = eval("new " + classNameString + "()");

이 솔루션은 네임 스페이스에서 작동하며 플랫폼 (브라우저 / 서버)에서 독립적입니다.


다음은 객체를 처리하는 Yuriy 메서드의 개선 된 버전입니다.

var stringToObject = function(str, type) {
    type = type || "object";  // can pass "function"
    var arr = str.split(".");

    var fn = (window || this);
    for (var i = 0, len = arr.length; i < len; i++) {
        fn = fn[arr[i]];
    }
    if (typeof fn !== type) {
        throw new Error(type +" not found: " + str);
    }

    return  fn;
};

참고 URL : https://stackoverflow.com/questions/1366127/how-do-i-make-javascript-object-using-a-variable-string-to-define-the-class-name

반응형