Movatterモバイル変換


[0]ホーム

URL:


  1. 개발자를 위한 웹 기술
  2. JavaScript
  3. JavaScript 참고서
  4. 표준 내장 객체
  5. Function
  6. Function: displayName

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

Function: displayName

비표준: 이 기능은 표준화되어 있지 않습니다. 비표준 기능은 브라우저 지원이 제한적이며 변경되거나 제거될 수 있으므로 프로덕션 환경에서 사용하는 것은 권장되지 않습니다. 그러나 표준 옵션이 없는 특정 상황에서는 적절한 대안이 될 수 있습니다.

Function 인스턴스의 선택 속성인displayName 함수의 표시 이름을 설정합니다.

displayName 속성은 모든 함수에 대해 초기에 존재하는 것이 아니라 코드 작성자가 추가하는 것입니다. 표시의 일환으로, 이는 문자열 값을 가집니다.

설명

만일displayName 속성이 존재한다면 콘솔과 프로파일러는 이를name 속성보다 우선하여 사용하는 것을 선호합니다.

브라우저 사이에서는 오직 파이어폭스 콘솔에서만 이 속성을 활용합니다. 리액트 개발자 도구에서도displayName 속성을 컴포넌트 트리를 표시할 때 사용합니다.

파이어폭스에서는 아래 패턴들이 감지되면익명 JavaScript 함수 네이밍 컨벤션 알고리즘을 활용하여displayName 를 복호화하려는 기본적인 시도가 있습니다.

  • 만일displayName 이 영문자와 숫자와_ ,$ 로 끝나는 경우, 해당 접미사 중 가장 긴 부분이 표시됩니다.
  • 만일displayName[] 로 감싸진 문자들로 끝나는 경우, 대괄호를 제외한 해당 문자열이 표시됩니다.
  • 만일displayName 이 영숫자와_ 로 구성된 문자열 다음에/,., 또는< 가 붙어서 끝나는 경우, 끝에 있는/,., 또는< 문자들을 제외한 문자열이 표시됩니다.
  • 만일displayName 이 영문자와 숫자와_ 로 구성된 문자열 다음에(^) 로 끝나는 경우,(^) 없이 해당 문자열이 표시됩니다.

위 패턴과 일치하지 않는 경우에는 전체displayName 가 표시됩니다.

예제

표시 이름 설정하기

파이어폭스 콘솔을 확인하면,function MyFunction() 과 같은 형태로 이름이 표시됩니다.

js
const a = function () {};a.displayName = "MyFunction";a; // function MyFunction()

표시 이름을 동적으로 변경하기

함수의displayName 을 동적으로 변경할 수 있습니다.

js
const object = {  // 익명  someMethod: function someMethod(value) {    someMethod.displayName = `someMethod (${value})`;  },};console.log(object.someMethod.displayName); // undefinedobject.someMethod("123");console.log(object.someMethod.displayName); // "someMethod (123)"

표시 이름 정리하기

파이어폭스 개발자 도구에서는displayName 속성을 표시하기 전에 몇 가지 일반적인 패턴을 정리하여 보여줍니다.

js
function foo() {}function testName(name) {  foo.displayName = name;  console.log(foo);}testName("$foo$"); // function $foo$()testName("foo bar"); // function bar()testName("Foo.prototype.add"); // function add()testName("foo ."); // function foo .()testName("foo <"); // function foo <()testName("foo?"); // function foo?()testName("foo()"); // function foo()()testName("[...]"); // function ...()testName("foo<"); // function foo()testName("foo..."); // function foo()testName("foo(^)"); // function foo()

명세서

Not part of any standard.

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp