>웹 프론트엔드 >JS 튜토리얼 >폴리필 작성 — 자바스크립트

폴리필 작성 — 자바스크립트

Patricia Arquette
Patricia Arquette원래의
2024-11-04 01:15:30823검색

Writing polyfills — Javascript

특정 브라우저나 환경에서 기본적으로 지원되지 않는 기능을 제공하는 코드입니다. 간단히 말해서 브라우저 폴백입니다.

call(), apply()bind() 메소드에 대한 폴리필을 작성하기 전에 호출, 적용 및 바인딩 기능을 확인하세요.

let details = {
  name: 'Manoj',
  location: 'Chennai'
}

let getDetails = function (...args) {
  return `${this.name} from ${this.location}${args.join(', ') ? `, ${args.join(', ')}` : ''}`;
}

1. 통화 방법:

call()에 대한 폴리필을 만들어 보겠습니다. 모든 기능에 액세스할 수 있도록 Function.prototype에 사용자 정의 call 메소드를 추가하겠습니다.

getDetails.call(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myCall = function (ref, ...args) {
  if (typeof Function.prototype.call === 'function') {  // Checks whether the browser supports call method
    return this.call(ref, ...args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is used to overwriting a function name
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](...args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myCall(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

2. 신청 방법:

apply()에 대한 폴리필을 만들어 보겠습니다. 모든 기능에 액세스할 수 있도록 Function.prototype에 사용자 정의 apply 메소드를 추가하겠습니다.

getDetails.apply(details, ['Tamil Nadu', 'India']);  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myApply = function (ref, args) {
  if (typeof Function.prototype.apply === 'function') {  // Checks whether the browser supports call method
    this.apply(ref, args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is to avoid duplication
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myApply(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

3. 바인딩 방법

bind()에 대한 폴리필을 만들어 보겠습니다. 모든 기능에 액세스할 수 있도록 Function.prototype에 사용자 정의 bind 메소드를 추가하겠습니다.

let getFullDetails = getDetails.bind(details, 'Tamil Nadu');
getFullDetails();  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myBind = function (ref, ...args) {
  if (typeof Function.prototype.bind === 'function') {
    return this.bind(ref, ...args);
  } else {
    let fn = this;
    return function (...args2) {
        return fn.apply(ref, [...args, ...args2]);  // Merge and apply arguments
    }
  }
}

let getFullDetails = getDetails.myBind(details, 'Tamil Nadu');  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

읽어주셔서 감사합니다! 이 블로그가 유익하고 흥미로웠기를 바랍니다. 부정확한 내용을 발견하거나 의견이 있으면 언제든지 알려주시기 바랍니다.

위 내용은 폴리필 작성 — 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.