JavaScript의 고급 기능을 사용하는 방법

JavaScript에서 함수는 매우 강력합니다. 함수에 관한 기본 지식 외에도 몇 가지 고급 함수를 익히고 적용하면 JS 코드가 더욱 간소화될 뿐만 아니라 성능도 향상됩니다. 일반적으로 사용되는 중요한 기능

JavaScript에서 기능은 매우 강력합니다. 이들은 다른 객체의 메소드로 사용될 수도 있고, 다른 함수에 매개변수로 전달될 수도 있고, 그뿐만 아니라 함수에 의해 반환될 수도 있는 일급 객체입니다! JS에서는 원숭이 왕과 비교할 수 없을 정도로 기능이 어디에나 있고 전능하다고 할 수 있습니다! 함수를 잘 사용하면 서양을 익히는 데 도움이 되고 코드를 우아하고 간결하게 만들 수 있습니다. 잘못 사용하면 문제가 생기고 문제가 발생합니다~

함수와 관련된 기본 지식 외에도 몇 가지를 마스터하세요. 고급 기능을 적용하면 JS 코드가 더욱 간결해 보일 뿐만 아니라 성능도 향상됩니다. 다음은 편집자가 요약한 일반적으로 사용되는 중요한 고급 기능과 여기에 기록된 개인적인 통찰력입니다. JS 초보자라면 "고급"이라는 단어에 겁먹지 마세요. 이 기사에는 프로토타입과 같은 몇 가지 기본 지식이 포함되어 있고 이해하기 어렵지 않다고 생각합니다. JS 전문가라면 이 문서를 사용하여 공백을 찾아 메울 수도 있습니다.

Text

범위 안전 생성자

function Person(name,age){
 this.name = name;
 this.age = age;
}
var p1 = new Person("Claiyre",80);

저는 여러분이 위의 생성자에 익숙할 것이라고 생각합니다. 그러나 부주의한 프로그래머가 이 생성자를 호출할 때 new를 추가하는 것을 잊어버리면 어떻게 될까요?

var p3 = Person("Tom",30);
console.log(p3);    //undefined
console.log(window.name);  //Tom

안전하지 않은 생성자의 사용으로 인해 위 코드는 실수로 창의 이름을 변경합니다. 왜냐하면 이 객체는 런타임에 바인딩되기 때문이며 new를 사용하여 생성자를 호출할 때 이는 새로 생성된 객체를 가리킵니다. 새로운, 이것은 창을 가리킨다.

창의 이름 속성은 링크 대상과 프레임을 식별하는 데 사용되므로 실수로 이 속성을 덮어쓰면 다른 오류가 발생할 수 있습니다.

범위 안전 생성자는 다음과 같이 변경하기 전에 먼저 this 개체가 올바른 유형의 인스턴스인지 확인합니다.

function Person(name,age){
 if(this instanceof Person){
 this.name = name;
 this.age = age;
 } else {
 return new Person(name,age);
 } 
}

이렇게 하면 실수로 전역 개체의 속성을 변경하거나 설정하는 것을 방지할 수 있습니다.

이 안전 모드를 구현하는 것은 생성자가 호출되는 환경을 잠그는 것과 동일하므로 생성자 상속 패턴을 차용할 때 문제가 발생할 수 있습니다. 해결 방법은 프로토타입 체인과 생성자 패턴을 조합하여 사용하는 것입니다. 계승.

JS 라이브러리 또는 프레임워크 개발자라면 범위 안전 생성자가 매우 유용할 것이라고 믿습니다. 여러 사람이 공동 작업하는 프로젝트에서는 실수로 전역 개체를 변경하는 것을 방지하기 위해 범위 안전 생성자도 사용해야 합니다.

지연 로딩 기능

브라우저 간의 동작 차이로 인해 코드에는 브라우저 동작을 감지하는 if 문이 많이 있을 수 있습니다. 그러나 사용자의 브라우저가 특정 기능을 지원하면 항상 이를 지원하므로 이러한 if 문은 한 번만 실행하면 됩니다. if 문이 하나만 있어도 코드가 없는 것보다 빠릅니다.

지연 로딩은 함수 실행 분기가 한 번만 실행된다는 의미입니다. 지연 로딩을 구현하는 방법에는 두 가지가 있습니다. 첫 번째는 함수가 처음 호출될 때 함수를 처리하고 감지된 내용으로 원래 함수를 다시 작성하는 것입니다. 결과. .

function detection(){
 if(//支持某特性){
 detection = function(){
 //直接用支持的特性
 }
 } else if(//支持第二种特性){
 detection = function(){
 //用第二种特性
 }
 } else {
 detection = function(){
 //用其他解决方案
 }
 }
}

지연 로딩을 구현하는 두 번째 방법은 함수 선언 시 적절한 함수를 지정하는 것입니다.

var detection = (function(){
 if(//支持某特性){
 return function(){
 //直接用支持的特性
 }
 } else if(//支持第二种特性){
 return function(){
 //用第二种特性
 }
 } else {
 return function(){
 //用其他解决方案
 }
 } 
})();

지연 로딩 기능의 장점은 첫 번째 실행 시 약간의 성능만 희생할 뿐 추가 소모가 없다는 것입니다. 그 후.

함수 바인딩 범위

JS에서는 함수가 호출될 때 함수의 범위가 동적으로 바인딩됩니다. 즉, 함수의 this 객체 지점이 불확실하지만 경우에 따라 다음이 필요합니다. 특정 함수의 실행 범위를 고정하고 항상 특정 개체를 가리키도록 합니다. 이때 무엇을 해야 할까요?

당당~~ 함수를 사용하여 범위 함수를 바인딩할 수 있습니다

function bind(fn,context){
 return function(){
 return fn.apply(context,arguments);
 }
}

사용법:

var person1 = {
 name: "claiyre",
 sayName: function(){
 alert(this.name);
 }
}
var sayPerson1Name = bind(person1.sayName,person1);
sayPerson1Name(); //claiyre

호출 함수와 적용 함수는 함수의 범위를 일시적으로 변경할 수 있습니다. 바인딩 함수를 사용하면 범위에 함수를 바인딩할 수 있습니다

curry 함수

curry의 개념은 간단합니다. 매개변수의 일부만 전달하여 함수를 호출한 다음, 함수가 나머지 매개변수를 처리하는 다른 함수를 반환하도록 합니다. 이는 함수에 "로드" 기능을 부여하는 것으로 이해될 수 있습니다.

많은 js 라이브러리가 카레 기능을 캡슐화하고 있으며 구체적인 용도는 다음과 같습니다.

var match = curry(function(what,str){
 return str.match(what)
}); 
var hasNumber = match(/[0-9]+/g);
var hasSpace = match(/\s+/g)
hasNumber("123asd");  //['123']
hasNumber("hello world!"); //null
hasSpace("hello world!"); //[' '];
hasSpace("hello");   //null
console.log(match(/\s+/g,'i am Claiyre')); //直接全部传参也可： [' ',' ']

함수가 커리되면 부분 인수를 사용하여 함수를 호출하고 보다 구체적인 함수를 얻을 수 있습니다. 이 보다 구체적인 함수는 클로저를 통해 처음으로 전달된 매개변수를 기억하는 데 도움이 됩니다. 마지막으로 이 보다 구체적인 함수를 사용하여 원하는 모든 작업을 수행할 수 있습니다~

curry를 구현하는 더 간단한 방법:

function curry(fn){
 var i = 0;
 var outer = Array.prototype.slice.call(arguments,1);
 var len = fn.length;
 return function(){
 var inner = outer.concat(Array.prototype.slice.call(arguments));
 return inner.length === len?fn.apply(null,inner):function (){
 var finalArgs = inner.concat(Array.prototype.slice.call(arguments));
 return fn.apply(null,finalArgs);
 }
 }
}

debounce 함수

디바운스 기능, "디바운스 기능"이라고도 합니다. 그 기능은 또한 매우 간단하고 직접적입니다. 이는 특정 기능이 지속적으로 호출되어 브라우저가 정지되거나 충돌하는 것을 방지하는 것입니다. 사용법은 다음과 같습니다:

var myFunc = debounce(function(){
 //繁重、耗性能的操作
}，250);
window.addEventListener('resize',myFunc);

像窗口的resize，这类可以以较高的速率触发的事件，非常适合用去抖函数，这时也可称作“函数节流”，避免给浏览器带来过大的性能负担。

具体的实现时，当函数被调用时，不立即执行相应的语句，而是等待固定的时间w,若在w时间内，即等待还未结束时，函数又被调用了一次，则再等待w时间，重复上述过程，直到最后一次被调用后的w时间内该函数都没有被再调用，则执行相应的代码。

实现代码如下：

function debounce(fn,wait){
 var td;
 return function(){
 clearTimeout(td);
 td= setTimeout(fn,wait);
 }
}

once函数

顾名思义，once函数是仅仅会被执行一次的函数。具体实现如下：

function once(fn){
 var result;
 return function(){
 if(fn){
 result = fn(arguments);
 fn = null;
 }
 return result;
 }
}
var init = once(function(){
 //初始化操作
})

在被执行过一次后,参数fn就被赋值null了，那么在接下来被调用时，便再也不会进入到if语句中了，也就是第一次被调用后，该函数永远不会被执行了。

还可以对上述once函数进行改进，不仅可以传入函数，同时还可以给传入的函数绑定作用域u，同时实现了bind和once。

function once(fn,context){
 var result;
 return function(){
 if(fn){
 result = fn.apply(context,arguments);
 fn = null;
 }
 return result;
 }
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何引用阿里字体图标的方法

有关Express中log4js实际用法

使用NodeJS如何实现WebSocket功能

위 내용은 JavaScript의 고급 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!