집 > 기사 > 웹 프론트엔드 > JavaScript의 함수 오버로딩에 대한 설명

JavaScript의 함수 오버로딩에 대한 설명

不言원래의: 2018-07-13 16:38:411540검색

이 글은 주로 JavaScript의 함수 오버로딩에 대한 설명을 소개합니다. 이제 특정 참조 값을 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

설명

JavaScript 로드에는 실제 함수 오버로딩이 없습니다.

함수 오버로딩

함수 이름은 동일하지만 함수의 매개변수 목록이 다르며(매개변수 수 및 매개변수 유형 포함) 매개변수에 따라 다른 작업이 수행됩니다.

예를 들어보겠습니다

function overload(a){
    console.log('一个参数')
}

function overload(a,b){
    console.log('两个参数')
}

// 在支持重载的编程语言中，比如 java
overload(1);         //一个参数
overload(1,2);    //两个参数


// 在 JavaScript 中
overload(1);         //两个参数
overload(1,2);    //两个参数

JavaScript에서 같은 이름을 가진 두 함수가 같은 범위에 나타나면 후자의 함수가 이전 함수를 덮어쓰게 되므로 JavaScript에서는 오버로딩의 실제 의미가 없습니다.

하지만 JavaScript에서 오버로딩 효과를 시뮬레이션하는 다양한 방법이 있습니다.

먼저 인수 객체를 통해 구현되는 첫 번째 메소드를 살펴보겠습니다.

arguments 객체는 함수 내부의 배열형 객체로, 함수 호출 시 함수에 전달되는 모든 매개변수를 저장합니다.

function overload () {
  if (arguments.length === 1) {
    console.log('一个参数')
  }
  if (arguments.length === 2) {
    console.log('两个参数')
  }
}

overload(1);      //一个参数
overload(1, 2);  //两个参数

이 예제는 아주 간단합니다. 인수 개체의 길이 속성을 판단하여 매개 변수가 몇 개 있는지 확인한 다음 어떤 작업을 수행합니다.

하지만 매개변수가 적을 때는 괜찮습니다. 매개변수가 많으면 if 판단을 많이 작성해야 하므로 번거롭습니다.

자, 다시 고전적인 예를 살펴보겠습니다
이 예를 보기 전에 먼저 요구 사항을 살펴보겠습니다. 사용자 개체가 있고 일부 이름은 사용자 개체의 값 속성에 저장되어 있습니다.
이름은 두 부분으로 구성되는데, 아래와 같이 공백의 왼쪽에 있는 것이 이름, 공백의 오른쪽에 있는 것이 성입니다.

var users = {
  values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
};

사용자 객체에 find 메소드를 추가해야 합니다.

매개변수가 전달되지 않으면 전체 users.values가 반환됩니다. users .values；
当传一个参数时，就把 first-name 跟这个参数匹配的元素返回；
当传两个参数时，则把 first-name 和 last-name 都匹配的返回。

这个需求中 find方法需要根据参数的个数不同而执行不同的操作，下来我们通过一个 addMethod 函数，来在 users 对象中添加这个 find 方法。

function addMethod (object, name, fn) {
  // 先把原来的object[name] 方法，保存在old中
  var old = object[name];

  // 重新定义 object[name] 方法
  object[name] = function () {
    // 如果函数需要的参数 和 实际传入的参数 的个数相同，就直接调用fn
    if (fn.length === arguments.length) {
      return fn.apply(this, arguments);

      // 如果不相同,判断old 是不是函数，
      // 如果是就调用old，也就是刚才保存的 object[name] 方法
    } else if (typeof old === "function") {
      return old.apply(this, arguments);
    }
  }
}

addMethod 函数，它接收3个参数
第一个：要绑定方法的对象，
第二个：绑定的方法名称，
第三个：需要绑定的方法

这个 addMethod 函数在判断参数个数的时候，除了用 arguments 对象，还用了函数的 length 属性。

函数的 length 属性，返回的是函数定义时形参的个数。

简单说函数的 length 是，函数需要几个参数，而 arguments.length 是调用函数时，真的给了函数几个参数

function fn (a, b) {
  console.log(arguments.length)
}
console.log(fn.length);  // 2
fn('a');    // 1

下来我们来使用这个 addMethod 函数

// 不传参数时，返回整个values数组
function find0 () {
  return this.values;
}
// 传一个参数时，返回firstName匹配的数组元素
function find1 (firstName) {
  var ret = [];
  for (var i = 0; i <p>addMethod 函数是利用了闭包的特性，通过变量 old 将每个函数连接了起来，让所有的函数都留在内存中。</p><p>每调用一次 addMethod 函数，就会产生一个 old，形成一个闭包。<br>我们可以通过 <code>console.dir(users.find)</code> ，把 find 方法打印到控制台看看。</p><p><img src="https://img.php.cn//upload/image/139/643/301/1531471079834608.jpg" title="1531471079834608.jpg" alt="JavaScript의 함수 오버로딩에 대한 설명"></p><p>上面这个例子是  jQuery 之父 John Resig  写的，他在他的博客和他写的书 《secrets of the JavaScript ninja》第一版中都有提到过，在书中的第4章中也有讲解 Function overloading，文中的 addMethod 函数 就是书中的例子 4.15，感兴趣的朋友可以去看看。</p><p>上面的例子，本质都是在判断参数的个数，根据不同的个数，执行不同的操作，而下来举的例子是通过判断参数的类型，来执行不同的操作。</p><h3>我们看看 jQuery 中的 css( ) 方法。</h3><blockquote>css( ) 方法返回或设置匹配的元素的一个或多个样式属性。</blockquote><p><code>css(name|pro|[,val|fn])</code>매개변수가 전달되면 이름이 이어집니다. by this 매개변수가 일치하는 요소가 반환됩니다. </p>두 개의 매개변수가 전달되면 이름과 성이 일치하는 요소가 반환됩니다. <p><img src="https://img.php.cn//upload/image/776/481/734/1531471070297469.png" title="1531471070297469.png" alt="JavaScript의 함수 오버로딩에 대한 설명">이 요구 사항에서 find 메소드는 매개변수 수에 따라 다른 작업을 수행해야 합니다. 다음으로 addMethod 함수를 사용하여 사용자 객체에 find 메소드를 추가합니다. </p> <pre class="brush:php;toolbar:false">// name 表示属性名
// value 表示属性值
css: function( name, value ) {
    return access( this, function( elem, name, value ) {
        var styles, len,
            map = {},
            i = 0;

        // 判断属性名是不是数组
        // 是数组就遍历，调用jQuery.css 方法传入每个属性名，获取样式
        if ( Array.isArray( name ) ) {
            styles = getStyles( elem );
            len = name.length;

            for ( ; i  1 );
}

EdADDMETHOD 함수는 3개의 매개변수를 받습니다.

첫 번째: 바인딩 메서드의 개체,
두 번째: 바인딩 메서드 이름, 세 번째: 바인딩해야 하는 메서드

이 addmetHod 함수는 이 adDMethod 함수에 있습니다. 매개변수의 개수, 인수 객체를 사용하는 것 외에도 함수의 길이 속성도 사용됩니다.

함수의 길이 속성은 함수가 정의되었을 때 형식 매개변수의 수를 반환합니다.

간단히 말하면 함수의 길이는 함수에 여러 매개변수가 필요하며 arguments.length는 함수를 호출할 때 실제로 함수에 여러 매개변수를 제공하는 것입니다

// 设置多个属性值
// 如果属性名（key）的类型是 object，就遍历这个对象
// 遍历一次就调用一次 access()方法，并传入这次的属性名和属性值
if ( jQuery.type( key ) === "object" ) {
    chainable = true;
    for ( i in key ) {
        jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
    }

// 设置一个值
} else if ( value !== undefined ) {
    ......
}

이 addMethod 함수를 사용해 보겠습니다.

rrreee

addMethod 함수는 클로저의 특성을 활용하고 old 변수를 통해 각 함수를 연결하여 모든 함수가 메모리에 유지되도록 합니다.

addMethod 함수가 호출될 때마다 old가 생성되어 클로저를 형성합니다.

console.dir(users.find)를 통해 find 메소드를 콘솔에 출력할 수 있습니다. C 46129198-5B455 c7D6945FB_ARTICLEX [1] .jpg

🎜🎜위의 예는 jQuery의 아버지인 John Resig가 작성한 것입니다. 그는 자신의 블로그와 The JavaScript Ninja의 4장에 있는 자신의 저서 "JavaScript Ninja의 비밀" 초판에서 이를 언급했습니다. 이 장에서는 기사의 addMethod 함수에 대해서도 설명합니다. 관심 있는 친구들은 이 책의 예제 4.15를 살펴보세요. 🎜🎜위의 예는 본질적으로 매개변수의 개수를 판단하고, 그 숫자에 따라 서로 다른 연산을 수행하는 것에 대한 것입니다. 아래의 예는 매개변수의 종류를 판단하여 서로 다른 연산을 수행하는 것에 대한 것입니다. 🎜🎜jQuery의 css() 메소드를 살펴보겠습니다. 🎜🎜css( ) 메서드는 일치하는 요소의 하나 이상의 스타일 속성을 반환하거나 설정합니다. 🎜🎜css(name|pro|[,val|fn]) 🎜🎜🎜🎜🎜css() 메소드에는 5개의 매개변수 상황이 있으며 그 중 3개는 하나의 매개변수이고 other 둘 다 두 개의 매개변수입니다. 🎜파라미터가 1개인 경우에는 매개변수 유형이 문자열이나 배열이면 속성값을 가져오고, 매개변수가 객체이면 속성값을 설정합니다. 🎜🎜jQuery의 css() 메소드는 매개변수의 유형을 판단하여 수행할 작업을 결정합니다. 🎜🎜jQuery 3.3.1의 소스 코드를 살펴보겠습니다.🎜rrreee🎜css( ) 메서드는 세 가지 메서드에 따라 다릅니다. 🎜🎜1. jQuery.access( ) 메서드는 하나 이상의 속성 값을 가져오거나 설정할 수 있습니다. 🎜🎜jQuery.access() 메소드에는 이러한 코드가 포함되어 있습니다🎜rrreee🎜이것은 css() 메소드가 첫 번째 매개변수가 문자열인지 객체인지 결정하는 데 도움이 되는 메소드입니다. 🎜

2. jQuery.style() 메소드: DOM 노드에서 스타일 속성을 읽거나 설정합니다.

css() 메소드에서 두 번째 매개변수가 전달되면, 즉 설정할 속성 값이 있는 경우 스타일을 설정하기 위해 jQuery.style() 메소드를 호출합니다

3. jQuery.css(): DOM 요소의 DOM 스타일 값을 읽습니다

여기 jQuery.css()는 jQuery.extend( ) 添加的方法，而我们最开始提到的 css( )方法，是通过 jQuery.fn.extend( )를 통해 추가된 메소드입니다. 같은 방법은 아닙니다.

jQuery.extend( )와 jQuery.fn.extend( )의 차이점

jQuery.extend( )는 jQuery 클래스에 클래스 메소드(정적 메소드)를 추가한다는 점인데, 이를 jQuery를 통해 호출해야 합니다. class (직접 $.xxx 호출 사용);
jQuery.fn.extend()는 jQuery 클래스에 멤버(인스턴스 메서드)를 추가하는 것이며 모든 jQuery 인스턴스를 직접 호출할 수 있습니다($().xxx를 사용하여 호출해야 함) ).

오버로딩의 이점

오버로딩은 실제로 유사한 기능을 가진 여러 함수를 하나의 함수로 병합하고 함수 이름을 재사용합니다.
jQuery의 css() 메서드가 오버로딩을 사용하지 않으면 함수를 완성하는 데 5개의 다른 함수가 있을 것입니다. 그런 다음 5개의 다른 함수 이름과 각 함수에 해당하는 매개 변수 수를 기억해야 합니다. 더 귀찮아.

요약

자바스크립트에는 진정한 의미의 오버로딩이 없지만, 자바스크립트에서는 오버로딩의 효과가 매우 흔합니다. 예를 들어 배열의 splice() 메서드에서는 매개변수 1개를 삭제할 수 있고, 매개변수 2개를 일부 삭제할 수 있습니다. 새 요소를 추가하기 전에 세 개의 매개변수를 삭제할 수 있습니다.
또 다른 예로는parseInt() 메서드가 있습니다. 매개변수가 전달되면 16진수 구문 분석을 사용할지, 10진수 구문 분석을 사용할지 판단됩니다. 두 번째 매개변수가 전달되면 두 번째 매개변수가 숫자의 기준으로 사용됩니다. 파싱.

글에서 오버로딩 효과를 얻기 위해 언급한 방법은 기본적으로 매개변수 판단을 기반으로 합니다. 매개변수 수를 판단하든 매개변수 유형을 판단하든 다양한 매개변수에 따라 작업이 결정됩니다.

오버로딩은 많은 편리함을 제공하지만, 관련 없는 기능을 하나의 기능으로 결합해서는 안 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

JavaScript의 함수 오버로딩에 대한 설명

설명

함수 오버로딩

먼저 인수 객체를 통해 구현되는 첫 번째 메소드를 살펴보겠습니다.

오버로딩의 이점

요약

관련 기사