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 を使用してコンストラクターを呼び出すと、新しく作成されたオブジェクトを指すためです。 、これはウィンドウを指します。

window の name 属性はリンク先とフレームを識別するために使用されるため、ここで誤ってこの属性を上書きすると、他のエラーが発生する可能性があります。

スコープセーフなコンストラクターは、次のように、変更を加える前に、このオブジェクトが正しい型のインスタンスであることをまず確認します:

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

これにより、グローバル オブジェクトのプロパティを誤って変更または設定することが回避されます。

このセーフ モードの実装は、コンストラクターが呼び出される環境をロックすることと同じであるため、コンストラクターの継承パターンを借用するときに問題が発生する可能性があります。解決策は、プロトタイプ チェーンとコンストラクター パターンを組み合わせて使用​​することです。継承。

あなたが JS ライブラリまたはフレームワークの開発者であれば、スコープセーフなコンストラクターは非常に役立つと思います。複数の人々が共同作業するプロジェクトでは、グローバル オブジェクトを誤って変更することを防ぐために、スコープ セーフなコンストラクターも使用する必要があります。

遅延読み込み機能

ブラウザ間の動作の違いにより、コード内にブラウザの動作を検出する if ステートメントが多数存在する場合があります。ただし、ユーザーのブラウザが特定の機能をサポートしている場合は、常にその機能をサポートするため、これらの if ステートメントは 1 回だけ実行するだけで済み、if ステートメント コードが 1 つしかない場合でも、ないより高速です。

遅延ロードとは、関数実行の分岐が 1 回だけ実行されることを意味します。遅延ロードを実装するには 2 つの方法があります。1 つは、関数が初めて呼び出されたときに関数を処理し、検出された関数で元の関数を書き換えることです。結果。 。

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

遅延読み込みを実装する 2 番目の方法は、関数の宣言時に適切な関数を指定することです。

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

遅延読み込み関数の利点は、最初の実行時にパフォーマンスが少し犠牲になるだけで、余分な消費がないことです。その後のパフォーマンス。

関数バインディングスコープ

JSでは、関数のスコープは、関数が呼び出されるときに動的にバインドされます。これは、関数の this オブジェクトのポイントが不確かであることを意味しますが、場合によっては、特定の関数の実行スコープを固定し、常に特定のオブジェクトを指すようにする。この時どうすればいいでしょうか？

Dangdang~~ 関数を使用してスコープ関数をバインドできます

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

call関数とapply関数は、関数のスコープを一時的に変更できます。bind関数を使用して、スコープにバインドされた関数を取得します

。

関数カレー

カレーの概念はシンプルです。パラメータの一部だけを渡して関数を呼び出し、その関数が残りのパラメータを処理する別の関数を返すようにします。これは、関数に「ロード」機能を与えるものとして理解できます。

多くのjsライブラリはcurry関数をカプセル化しており、具体的な使用法は次のようになります。

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')); //直接全部传参也可： [' ',' ']

関数がカリー化されると、部分引数を指定して呼び出して、より具体的な関数を取得できます。このより具体的な関数は、クロージャを通じて初めて渡されたパラメータを記憶するのに役立ちます。最後に、このより具体的な関数を使用して、必要なことを何でも行うことができます~

カリーを実装する簡単な方法:

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 中国語 Web サイトの他の関連記事を参照してください。