1.call/apply/bind의 코드 구현

call

Function.prototype.call2 = function(context) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }

  //  window
  context = context || window;
  //  fn
  const { fn } = context;

  //  context ， this
  context.fn = this;
  const args = [...arguments].slice(1);
  const result = context.fn(...args);

  //  fn
  context.fn = fn;
  return result;
};

apply

Function.prototype.apply2 = function(context) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }

  context = context || window;
  const { fn } = context;

  context.fn = this;
  let result;
  if (Array.isArray(arguments[1])) {
    //  ... 
    result = context.fn(...arguments[1]);
  } else {
    result = context.fn();
  }

  context.fn = fn;
  return result;
};

bind

Function.prototype.bind2 = function(context) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }

  const that = this;
  //  ， 
  const args = [...arguments].slice(1);

  return function F() {
    //  new ， ！
    if (this instanceof F) {
      return new that(...args, ...arguments);
    }

    // args.concat(...arguments):  
    //  ：arguments Array Object,  ...,  
    return that.apply(context, args.concat(...arguments));
  };
};

2. instanceof 코드 구현

function instanceof2(left, right) {
  let prototype = right.prototype;

  //  left ,  prototype 
  left = left.__proto__;
  while (1) {
    if (left === null || left === undefined) {
      return false;
    }
    if (left === prototype) {
      return true;
    }
    left = left.__proto__;
  }
}

3. 딥 카피

function cloneArr(src, target) {
  for (let item of src) {
    if (Array.isArray(item)) {
      target.push(cloneArr(item, []));
    } else if (typeof item === "object") {
      target.push(deepClone(item, {}));
    } else {
      target.push(item);
    }
  }
  return target;
}
function deepClone(src, target) {
  const keys = Reflect.ownKeys(src);
  let value = null;

  for (let key of keys) {
    value = src[key];

    if (Array.isArray(value)) {
      target[key] = cloneArr(value, []);
    } else if (typeof value === "object") {
      //  ,  
      target[key] = deepClone(value, {});
    } else {
      target[key] = value;
    }
  }

  return target;
}

4. ES5/ES6 기반 "양방향 바인딩"

ES5의 Object.defineProperty()


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Documenttitle>
    <script>
      const obj = {
        value: ""
      };

      function onKeyUp(event) {
        obj.value = event.target.value;
      }

      //   obj.value  
      Object.defineProperty(obj, "value", {
        get: function() {
          return value;
        },
        set: function(newValue) {
          value = newValue;
          document.querySelector("#value").innerHTML = newValue; //  
          document.querySelector("input").value = newValue; //  
        }
      });
    script>
  head>
  <body>
    <p> ：<span id="value">span>p>
    <input type="text" onkeyup="onKeyUp(event)" />
  body>
html>

ES6의 proxy


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script>
    const obj = {}

    const newObj = new Proxy(obj, {
      get: function(target, key, receiver) {
        return Reflect.get(target, key, receiver)
      },
      set: function(target, key, value, receiver) {
        if(key === 'value') {
          document.querySelector('#value').innerHTML = value
          document.querySelector('input').value = value
        }
        return Reflect.set(target, key, value, receiver)
      }
    })

    function onKeyUp(event) {
      newObj.value = event.target.value
    }

  script>
head>
<body>
  <p>
     ：<span id="value">span>
  p>
  <input type="text" onkeyup="onKeyUp(event)">
body>
html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

면접 예상 질문: CSS, Javascript 고급

position 속성이란? display 속성이란? flex: 1차원 (가로 or 세로) 적으로 배치할 수 있는 방식 grid: 2차원 (가로, 세로 동시에) 적으로 배치할 수 있는 방식 reset.css vs. s...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

면접에서 자주 보는 원본 실현