자바스크립트 함수의 5가지 응용기술 소개-JS 튜토리얼-php.cn

이 글은 JavaScript 함수의 5가지 응용 기술을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

함수는 모든 언어, 특히 JavaScript에서 핵심 개념입니다. 이 글에서는 함수의 5가지 고급 기술을 소개합니다

범위에 안전한 생성자

생성자는 실제로 new 연산자를 사용하여 호출되는 함수입니다

function Person(name,age,job){
    this.name=name;    
    this.age=age;    
    this.job=job;
}
var person=new Person('match',28,'Software Engineer');
console.log(person.name);//match

로그인 후 복사

new 연산자를 사용하지 않으면 세 함수는 원래 Person 개체를 대상으로 합니다. 창 개체에 속성이 추가됩니다

function Person(name,age,job){
    this.name=name;    
    this.age=age;    
    this.job=job;
}          
var person=Person('match',28,'Software Engineer');
console.log(person);//undefinedconsole.log(window.name);//match

로그인 후 복사

창의 이름 속성은 링크 대상과 프레임을 식별하는 데 사용됩니다. 여기서 이 속성을 실수로 덮어쓰면 페이지에 다른 오류가 발생할 수 있습니다. 이 문제에 대한 해결책은 범위 보안을 만드는 것입니다. 생성자

function Person(name,age,job){
    if(this instanceof Person){
            this.name=name;        
            this.age=age;        
            this.job=job;
    }else{
            return new Person(name,age,job);
    }
}var person=Person('match',28,'Software Engineer');
console.log(window.name); // ""console.log(person.name); //'match'var person= new Person('match',28,'Software Engineer');
console.log(window.name); // ""console.log(person.name); //'match'

로그인 후 복사

하지만 생성자 훔치기 패턴을 상속하면 부작용이 발생합니다. 그 이유는 다음 코드에서 이 객체는 Polygon 객체 인스턴스가 아니기 때문에 생성자 Polygon()이 새 인스턴스를 생성하고 반환하기 때문입니다

function Polygon(sides){
    if(this instanceof Polygon){
            this.sides=sides;        
            this.getArea=function(){
                        return 0;
        }
    }else{
            return new Polygon(sides);
    }
}
function  Rectangle(wifth,height){
    Polygon.call(this,2);    
    this.width=this.width;    
    this.height=height;    
    this.getArea=function(){        
    return this.width * this.height;
    };
}
var rect= new Rectangle(5,10);
console.log(rect.sides); //undefined

로그인 후 복사

범위 안전 생성자 도용 패턴을 사용하려면 다음을 수행해야 합니다. 프로토타입 체인 상속과 결합하여 Rectangle의 프로토타입 속성을 다시 작성하여 그 인스턴스도 Polygon의 인스턴스가 되도록

function Polygon(sides){
    if(this instanceof Polygon){
            this.sides=sides;        
            this.getArea=function(){
                        return 0;
        }
    }else{
            return new Polygon(sides);
    }
}
function  Rectangle(wifth,height){
    Polygon.call(this,2);    
    this.width=this.width;    
    this.height=height;    
    this.getArea=function(){
            return this.width * this.height;
    };
}
Rectangle.prototype= new Polygon();var rect= new Rectangle(5,10);
console.log(rect.sides); //2

로그인 후 복사

Lazy loading function

브라우저 간의 동작 차이로 인해 우리는 종종 많은 수의 함수를 포함합니다. if 문 함수에서 브라우저 특성을 확인하고 다양한 브라우저의 호환성 문제를 해결합니다. 예를 들어 DOM 노드에 이벤트를 추가하는 가장 일반적인 기능은 addEvent 함수가 호출될 때마다 먼저 addEventListener 메소드가 지원되는지 확인해야 합니다. attachmentEvent 메소드가 지원되는지 여부 아직 지원되지 않는 경우 dom0 레벨 메소드를 사용하여 이벤트를 추가하십시오. addEvent 함수가 호출될 때마다 이 프로세스를 반복해야 합니다. 실제로 브라우저가 메서드 중 하나를 지원하면 항상 이를 지원하므로 다른 분기를 감지할 필요가 없습니다. 즉, if 문을 매번 실행할 필요가 없고, 코드 실행 속도가 더 빨라진다.

　해결책은 지연 로딩입니다. 소위 지연 로딩은 함수 실행 분기가 한 번만 발생한다는 것을 의미합니다. 지연 로딩을 구현하는 방법에는 두 가지가 있습니다

　1. 첫 번째는 함수가 호출될 때 함수를 처리하는 것입니다. 함수가 처음 호출되면 적절한 방식으로 실행되는 다른 함수가 해당 함수를 덮어쓰게 되므로 원래 함수에 대한 모든 호출은 실행 분기를 거칠 필요가 없습니다

지연 로딩을 사용할 수 있습니다 다음과 같은 방법으로 addEvent()

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }    
    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }    else{
        element['on' + type] = fun;
    }
}

로그인 후 복사

를 다시 작성하세요. 지연 로드된 addEvent()에서 if 문의 각 분기는 addEvent 변수에 값을 할당하여 원래 함수를 효과적으로 덮습니다. 마지막 단계는 새로운 할당 함수를 호출하는 것입니다. 다음에 addEvent()를 호출하면 새로 할당된 함수가 직접 호출되므로 if 문을 실행할 필요가 없습니다. 그러나 이 메서드는 함수 이름이 변경되면 수정이 더 번거롭다는 단점이 있습니다. 2 , 두 번째는 함수를 선언할 때 적절한 함수를 지정하는 것입니다. 이렇게 하면 함수가 처음 호출될 때 성능이 떨어지지 않지만, 코드가 로드될 때 약간의 성능이 떨어지게 됩니다. 다음은 이 아이디어에 따라 addEvent()를 다시 작성하는 것입니다. 다음 코드는 어떤 함수를 사용해야 하는지 결정하기 위해 다양한 방법을 통해 분기되는 익명의 자체 실행 함수를 생성합니다. 이 함수는 특정 DOM 요소 또는 컬렉션의 이벤트 트리거에 바인딩됩니다. 바인딩 함수는 종종 콜백 함수와 함께 사용됩니다. 코드 실행 환경을 유지하면서 함수를 변수로 전달하는 이벤트 핸들러

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }    
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }    
    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }    
    return addEvent(type, element, fun);
}

로그인 후 복사

위의 코드 생성 핸들러라는 객체가 생성됩니다. handler.handlerFun() 메서드는 DOM 버튼에 대한 이벤트 핸들러로 할당됩니다. 버튼을 누르면 이 함수가 호출되고 경고 상자가 표시됩니다. 경고 상자에는 이벤트 처리됨이 표시되어야 하는 것처럼 보이지만 실제로는 undefiend가 표시됩니다. 문제는 handler.handleClick()의 환경이 저장되지 않아서 이 객체가 결국 핸들러 대신 DOM 버튼을 가리키게 된다는 것입니다

클로저를 사용하여 이 문제를 해결할 수 있습니다

var addEvent = (function () {
    if (document.addEventListener) {
            return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }    
    else if (document.attachEvent) {
            return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }    
    else { 
           return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

로그인 후 복사

물론 이것은 특정 솔루션입니다. 이 시나리오에서는 다중 클로저를 생성하면 코드를 이해하고 디버그하기가 어려워질 수 있습니다. 더 나은 접근 방식은 함수 바인딩을 사용하는 것입니다

간단한 바인딩 함수인 바인딩()은 함수와 환경을 받아들이고 주어진 환경에서 주어진 함수를 호출하는 함수를 반환하며 모든 인수를 변경하지 않고 전달합니다. 과거에는

<button id="btn">按钮</button><script>            
    var handler={
        message:"Event handled.",
        handlerFun:function(){
            alert(this.message);
        }
    };
btn.onclick = handler.handlerFun;
</script>

로그인 후 복사

이 함수가 보였습니다. 간단하지만 그 기능은 매우 강력합니다. 클로저는 바인드()에서 생성됩니다. 클로저는 apply()를 사용하여 들어오는 함수를 호출하고 컨텍스트 객체와 매개변수를 apply()에 전달합니다. 반환된 함수가 호출되면 주어진 환경에서 전달된 함수를 실행하고 모든 매개변수를 제공합니다

<button id="btn">按钮</button>
<script>            
var handler={
    message:"Event handled.",
    handlerFun:function(){
        alert(this.message);
    }
};
btn.onclick = function(){
    handler.handlerFun();    
}
</script>

로그인 후 복사

ECMAScript5는 모든 함수에 대한 기본 바인딩() 메서드를 정의하여 작업을 더욱 단순화합니다

　　只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及setTimeout()和setInterval()。然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用

函数柯里化

与函数绑定紧密相关的主题是函数柯里化(function currying)，它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数

function add(num1,num2){
    return num1+num2;
}function curriedAdd(num2){
    return add(5,num2);
}
console.log(add(2,3));//5console.log(curriedAdd(3));//8

로그인 후 복사

这段代码定义了两个函数：add()和curriedAdd()。后者本质上是在任何情况下第一个参数为5的add()版本。尽管从技术来说curriedAdd()并非柯里化的函数，但它很好地展示了其概念

　　柯里化函数通常由以下步骤动态创建：调用另一个函数并为它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式

function curry(fn){
    var args = Array.prototype.slice.call(arguments, 1);    
    return function(){        
    var innerArgs = Array.prototype.slice.call(arguments),
        finalArgs = args.concat(innerArgs);        
        return fn.apply(null, finalArgs);
    };
}

로그인 후 복사

curry()函数的主要工作就是将被返回函数的参数进行排序。curry()的第一个参数是要进行柯里化的函数，其他参数是要传入的值。为了获取第一个参数之后的所有参数，在arguments对象上调用了slice()方法，并传入参数1表示被返回的数组包含从第二个参数开始的所有参数。然后args数组包含了来自外部函数的参数。在内部函数中，创建了innerArgs数组用来存放所有传入的参数(又一次用到了slice())。有了存放来自外部函数和内部函数的参数数组后，就可以使用concat()方法将它们组合为finalArgs，然后使用apply()将结果传递给函数。注意这个函数并没有考虑到执行环境，所以调用apply()时第一个参数是null。curry()函数可以按以下方式应用

function add(num1, num2){    
return num1 + num2;
}var curriedAdd = curry(add, 5);
alert(curriedAdd(3)); //8

로그인 후 복사

在这个例子中，创建了第一个参数绑定为5的add()的柯里化版本。当调用cuurriedAdd()并传入3时，3会成为add()的第二个参数，同时第一个参数依然是5，最后结果便是和8。也可以像下例这样给出所有的函数参数：

function add(num1, num2){
    return num1 + num2;
}
var curriedAdd2 = curry(add, 5, 12);
alert(curriedAdd2()); //17

로그인 후 복사

在这里，柯里化的add()函数两个参数都提供了，所以以后就无需再传递给它们了

函数柯里化还常常作为函数绑定的一部分包含在其中，构造出更为复杂的bind()函数

function bind(fn, context){
    var args = Array.prototype.slice.call(arguments, 2);    
    return function(){        
    var innerArgs = Array.prototype.slice.call(arguments),
        finalArgs = args.concat(innerArgs);        
        return fn.apply(context, finalArgs);
    };
}

로그인 후 복사

对curry()函数的主要更改在于传入的参数个数，以及它如何影响代码的结果。curry()仅仅接受一个要包裹的函数作为参数，而bind()同时接受函数和一个object对象。这表示给被绑定的函数的参数是从第三个开始而不是第二个，这就要更改slice()的第一处调用。另一处更改是在倒数第3行将object对象传给apply()。当使用bind()时，它会返回绑定到给定环境的函数，并且可能它其中某些函数参数已经被设好。要想除了event对象再额外给事件处理程序传递参数时，这非常有用

var handler = {
    message: "Event handled",
    handleClick: function(name, event){
        alert(this.message + ":" + name + ":" + event.type);
    }
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn"));

로그인 후 복사

handler.handleClick()方法接受了两个参数：要处理的元素的名字和event对象。作为第三个参数传递给bind()函数的名字，又被传递给了handler.handleClick()，而handler.handleClick()也会同时接收到event对象

ECMAScript5的bind()方法也实现函数柯里化，只要在this的值之后再传入另一个参数即可

var handler = {
    message: "Event handled",
    handleClick: function(name, event){
        alert(this.message + ":" + name + ":" + event.type);
    }
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler, "my-btn"));

로그인 후 복사

javaScript中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用bind()还是curry()要根据是否需要object对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销

函数重写

由于一个函数可以返回另一个函数，因此可以用新的函数来覆盖旧的函数

function a(){
    console.log('a');
    a = function(){
        console.log('b');
    }
}

로그인 후 복사

这样一来，当我们第一次调用该函数时会console.log('a')会被执行；全局变量a被重定义，并被赋予新的函数

当该函数再次被调用时， console.log('b')会被执行

再复杂一点的情况如下所示

var a = (function(){
    function someSetup(){
            var setup = 'done';
    }
    function actualWork(){
        console.log('work');
    }
    someSetup();    
    return actualWork;
})()

로그인 후 복사

我们使用了私有函数someSetup()和actualWork()，当函数a()第一次被调用时，它会调用someSetup()，并返回函数actualWork()的引用.

위 내용은 자바스크립트 함수의 5가지 응용기술 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!