jquery에서 val 함수 오버로드 구현 방법(코드 포함)-JS 튜토리얼-php.cn

jquery에서 val 함수 오버로드 구현 방법(코드 포함)

不言

풀어 주다： 2018-08-21 09:52:30

원래의

1503명이 탐색했습니다.

이 글의 내용은 jquery에서 (코드 포함) val 함수 오버로딩을 구현하는 방법에 관한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 분들에게 도움이 되기를 바랍니다.

소위 오버로딩은 매개변수 개수가 다른 동일한 함수 이름의 집합입니다. 이를 사용할 때 함수 이름을 호출하고 매개변수 개수에 따라 다른 함수를 사용하도록 결정할 수 있습니다. ! 하지만 나중에 정의된 함수가 같은 이름의 이전 함수를 덮어쓰게 되므로 js에는 오버로딩이 없다는 것을 알고 있습니다. 하지만 함수 오버로딩을 구현하려면 어떻게 해야 할까요?

첫 번째 방법:

이 방법은 비교적 간단합니다. 모두가 확실히 이해할 수 있는 아이디어를 드리겠습니다. 함수 내부에서 스위치 문을 사용하여 전달된 매개 변수 수에 따라 다른 Case 문을 호출하는 것입니다. 에, 그래서 기능적으로 과부하 효과를 달성합니다.

이 방법은 간단하고 투박합니다

두 번째 방법:

function method(obj,name,fnc){
            var old = obj[name];
            console.log(old instanceof Function);
            obj[name] = function(){
                console.log(arguments.length+" "+fnc.length);
                if(arguments.length === fnc.length){
                    return fnc.apply(this,arguments);
                }else if(typeof old === "function"){
                    return old.apply(this,arguments);
                }
            }
        }
        var people = {
            values:["Zhang san","Li si"]
        };
        method(people,"find",function(){
            console.log("无参数");
            return this.values;
        })
        method(people,"find",function(firstname){
            console.log("一个参数");
            var ret = [];
            for(var i = 0;i < this.values.length;i++){
                if(this.values[i].indexOf(firstname) === 0){
                    ret.push(this.values[i])
                }
            }
            return ret;
        })
        method(people,"find",function(firstname,lastname){
            console.log("两个参数");
            var ret = [];
            for(var i = 0;i < this.values.length;i++){
                if(this.values[i] == firstname + " " + lastname){
                    ret.push(this.values[i])
                }
            }
            return ret;
        })
        console.log(people.find());
        console.log(people.find("Zhang"));

로그인 후 복사

구현 과정: 위 코드를 살펴보겠습니다. 가장 중요한 것은 메서드 정의입니다. 이 메서드에서 가장 중요한 점은 다음과 같습니다. 이게 오래된 건가요? 이 오래된 것은 정말 영리해요. 해당 함수는 마지막으로 호출된 메서드 함수를 가리키는 포인터와 동일합니다. 코드에 따르면 js의 구문 분석 순서는 위에서 아래로 되어 있습니다.

　1. 메소드 구문 분석(먼저 내용 무시)

　　2.method(people,"find",function() 이 문장이 실행되면 다시 돌아가 위에서 정의한 메소드를 실행한 후, 이때 old는 비어 있습니다. 이 함수를 정의하지 않았으므로 지금은 정의되지 않은 상태이며 계속 실행됩니다. 이때 obj[name] = function()을 정의한 다음 js를 구문 분석할 때입니다. 더 중요한 것은 fnc 함수가 메소드의 변수를 호출한다는 것입니다. fnc 함수의 구현은 호출될 때만 구현되기 때문에 js는 다음과 같이 생각합니다. 실행한 후에는 삭제하지 마세요. 그렇지 않으면 외부에서 삭제됩니다. 무엇을 사용하든 그대로 유지하세요. (여기서 호출 함수는 fnc 함수 내부에서 this 포인터를 변경하는 데 사용됩니다.)

　　3. 좋아요, 첫 번째 method 사용이 끝나고 두 번째 문장이 시작됩니다. method (people, " find",function(firstname) 그러면 이번에 사용할 때는 old = obj[name]을 실행해야 합니다. 이때 old는 무엇인가요? 이전 문이 정의되어 있고 삭제되지 않았기 때문에 함수입니다. 그래서 이번에는 이전에 정의한 메서드를 가리키는 포인터처럼 작동하여 지난번에 정의한 obj[name]을 가리킵니다. 그런 다음 구문 분석을 계속하면 유지되어야 하는 클로저입니다.

4. 마찬가지로 세 번째 메서드 호출이 시작됩니다. 마찬가지로 old는 지난번에 정의된 obj[name]을 가리키며 이 역시 클로저이므로 유지해야 합니다. 5. 이 시점에서 [name] 메모리에는 실제로 세 개의 obj가 있습니다. 세 가지 메서드의 메모리가 삭제되지 않았기 때문에 세 가지 기능의 공존을 실현하고 이전을 사용하여 연결할 수도 있습니다. 참 영리하지 않나요

　　6. people.find()를 사용하면 마지막으로 메소드를 호출했을 때 정의한 함수가 먼저 호출됩니다. fnc.length가 실행되면 다른 함수를 찾을 필요가 없습니다. 동일하지 않으면 old return old.apply(this,arguments);를 사용해야 합니다. 지난번에 호출된 메소드이므로 마지막으로 가서 찾으면 계속해서args.length를 실행합니다. === fnc.length를 찾지 못하면 다시 old를 호출하여 위쪽으로 계속 검색합니다. 정의했다면 반드시 찾을 수 있을 겁니다!

　 요약: 클로저의 원리를 사용하여 세 개의 함수가 메모리에 공존하도록 하고, old는 마지막에 정의된 함수를 가리킵니다. 호출될 때 검색이 필요한지 여부가 결정됩니다.

후속 작업: 위 내용에 대해 이야기한 후 아래 이해 내용을 비교하면 프로토타입과 프로토타입 체인에 대한 더 깊은 이해를 갖게 됩니다

var array=[]
addMethod(array,&#39;sub0&#39;,function(){
  return 0;
})
addMethod(array,&#39;sub0&#39;,function(prefix){
  console.log("prefix===>",prefix);
  return prefix[0];
})
array.sub0([1,2,3,5])  //这里是array对象拥有了sub0这样的方法，而不是Array，addMethod是继承

// 区别于方法直接作用于原型上
//例子  String的 startsWith 实现
function addstartsWithToString(){
   if (typeof String.prototype.startsWith1 != &#39;function&#39; ) {
     String.prototype.startsWith1 = function(subString){
       return this.slice(0,subString.length)==subString
     }
   }
}

addstartsWithToString();
&#39;120000&#39;.startsWith1(&#39;1&#39;)

로그인 후 복사