ホームページ > 記事 > ウェブフロントエンド > JavaScript関数を定義するにはどうすればよいですか? js関数の一般的な使い方
JavaScript関数を定義するにはどうすればよいですか? js関数の一般的な使い方
- 不言転載
- 2018-10-13 15:02:252396ブラウズ
この記事では、JavaScript 関数を定義する方法について説明します。 js 関数の一般的な使用方法は、参考にしていただければ幸いです。
JS 関数、関数宣言、関数式、関数スタイルのコンストラクター、自己実行関数 (Es6 アロー関数など)、クラス クラスの記述メソッド、 を記述する方法は数多くあることはわかっています。高レベル関数、関数スロットル/関数アンチシェイク、以下では、上記のタイプの最も基本的な使用法について説明します。
関数宣言の記述方法
この記述方法は、キーワード function を使用して関数を定義します。関数が宣言された後、すぐには実行されず、必要なときに呼び出されます。この関数はグローバルです。同じ名前の宣言関数が 2 つある場合、2 番目の関数が最初の関数を上書きします。
function Test(){
} 次のような出力を求める面接の質問があります:
function test1(){
alert('test1')
} ;
test1() ;
function test1(){
alert('test2')
} ;答えは次のとおりです: 'test2'
関数式の書き方
関数を指す変数を定義します。関数は実際には匿名関数とみなすことができます。この種の関数は、宣言された後にのみ呼び出すことができます。宣言される前に呼び出された場合は、エラーが報告されます。
var test=function(){
}次のような出力を求めるインタビューの質問があります:
var test=function(){ alert('test1') } ;
test() ;
var test=function(){ alert('test2') } ;答えは次のとおりです: test1
関数スタイルのコンストラクター
JavaScript 関数経由コンストラクター (Function ()) を使用して関数を定義し、最初にさまざまな変数を定義し、最後に関数の戻り値または出力を定義するこの種の関数は一般的には使用されません。
var test= new Function("a", "b", "return a * b");
test();自己実行関数
この種の関数には名前がなく、宣言本体のみがあり、実際には匿名の自己呼び出し関数です。この種の関数の利点は、変数を独立した状態に保ち、外部変数によって汚染されず、閉じた関数実行環境を形成できることです。
書き方は次のとおりです。
(function(){
})();
这种写法比较常见，比如Jquery框架里面就用到这种写法:
‘use strict’;
；(function(context,win){
})(Jquery||undefined,window) また、面接の質問では、次のような書き方もよく見かけます。
var ps=tr.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
(function(p){
p.onclick=function(){
alert(this.innerHTML);
}
})(ps[i])
}アロー関数
この宣言メソッドは Es6 で導入されました。アロー関数は短縮関数式であり、その内部の this はそれ自体を指しませんが、現在の実行環境の最上位オブジェクトを指します ( window、react など、コンポーネントは現在のコンポーネントのクラス親コンポーネントを指します)、アロー関数は常に匿名です。書き方は以下の通りです。
const test=()=>{
}たとえば、以下の関数のthisはwindow
const test={
array:[1,2],
show:()=>{
console.log(this. array)
}
}
test.show()；//undefinedを指しており、以下のreactコンポーネントのonSearchのthisはTestコンポーネントを指しており、テスト コンポーネントは、以下で定義されている関数または状態とプロパティを通じて見つけることができます。コンストラクターでコメントされたコードは、onSearch の this を Test コンポーネントにポイントするためのものであることに注意してください。これはアロー関数とは異なる方法で記述されていますが、効果は同じです。
import {Button} from 'antd'
class Test extends Component {
constructor(props) {
super(props);
//this.onSearch = this.onSearch.bind(this)
}
//onSearch(){
console.log(this);
//}
onSearch=()=>{
console.log(this);
}
render() {
return ( < p >
<Button onClick={this.onSearch}>测试</Button>
< /p>
)
}
}Classクラス記述メソッド
Jsには、以前はクラスという概念がありませんでした。または、プロトタイプを通じて関数ベースのクラスの概念を実装します。たとえば、次の記述メソッド
function Test (){
this.name=’’;
//this.show=function(){
//}
}
Test.prototype.show=function(){
Console.log(this.name)
}
new Test().show();ES6 では、オブジェクトのテンプレートとしてクラスの概念が導入されており、クラスは class キーワードを通じて定義できます。基本的に、ES6 クラスは、その機能のほとんどが ES5 で実現できるものであり、オブジェクト プロトタイプの記述方法がより明確になり、オブジェクト指向プログラミングの構文に近くなっただけです。
基本的な書き方:
class test {
//第一种
Show() {
alert('show');
}
//第二种
//Show=()=>{
//}
}
var test1 = new test();
var test2= new test();このクラスの 2 つのメソッドは書き方が異なることに注意してください
最初に宣言されたメソッドは test のプロトタイプを指します
test1.Show=== test2.Show//true
2 番目に宣言されたメソッドは test のインスタンスを指し、インスタンス化ごとに Show メソッドが生成されます。
test1.Show=== test2.Show//false
継承は次のように記述されているため、newTest は test の Show を継承します
class newTest extends test{
Show() {
super. Show();
alert('newshow');
}
}
var test=new newTest ();
test. Show()newTest メソッドで Show を宣言すると、親クラス test の Show メソッドが呼び出されます。宣言すると、newTest の Show メソッドが呼び出されます。子は、
#super などの super キーワードを使用して親のメソッドを呼び出します。- #高階関数
#。
##高階関数を英語では Higher-order function と言います。 JavaScript 関数は実際には変数を指します。変数は関数を指し、関数のパラメータは変数を受け取ることができるため、関数は別の関数をパラメータとして受け取ることができます。この関数は高階関数と呼ばれます。簡単に言うと、「高階関数とは関数をパラメータとして、または関数を戻り値として受け取ることができる関数」です。実際、最も典型的なアプリケーションはコールバック関数です。
$.get(‘’,{},function(data){
})
var test=function(callback){
callback.apply(this,arguments)
}2 関数のカリー化最初に、関数内にいくつかの関数を入力します。パラメータ化 (そして新しい関数を返す) 技術はカリー化と呼ばれます。この定義は少し理解しにくいかもしれません。まず、単純な関数カリー化の実装を見てみましょう: var currency=function(fn){
var self=this;
var arr=[];
return function(){
if(arguments.length==0){
return fn.apply(this,arr );
}else{
[].push.apply(arr,arguments);
return arguments.callee;
}
}
} それから見てみましょう。電話時: var sum=function(){
var total=0;
var argArr=arguments;
for (var i = 0; i < argArr.length; i++) {
total+=argArr[i];
}
return total;
}
var test= currency(sum);
test(100,200);
test(300)
alert(test());
其实简单的解释就是currency函数里面定义一个局部变量arr数组,然后返回一个函数，返回的函数体里对变量arr进行了赋值，每次当函数传入参数的时候都会将参数push到arr里面，然后返回函数体，形成了一个闭包。当没有参数传入的时候就直接执行传入的sum函数，然后执行函数sum传入的的参数就是arr.
3.函数扩展
函数扩展一般是通过原型来扩展，传入一个回调函数，比如给Array扩展一个函数Filter代码如下:
Array.prototype.Filter=function(callback){
…..
}做过react 开发的都知道有高阶组件的概念，其实高阶组件是通过高阶函数演变的，只不过传入的参数是组件，然后返回值是一个组件，来看下面的一段代码
export default simpleHoc(Usual);
import React, { Component } from 'react';
const simpleHoc = WrappedComponent => {
console.log('simpleHoc');
return class extends Component {
render() {
return <WrappedComponent {...this.props}/>
}
}
}
export default simpleHoc;函数节流/函数防抖
一般做前端时间比较长的人对这个概念比较熟了，但是刚接触的人估计会有点懵逼。
这两个概念都是优化高频率执行js代码的一种手段，来看下他们的基本概念
函数节流：函数在设定的时间间隔内最多执行一次
应用场景：高频率点击事件
var isEnable=true;
document.getElementById("testSubmit").onclick=function(){
if(!isEnable){
return;
}
isEnable=false;
setTimeout(function(){
console.log("函数节流测试");
isEnable = true;
}, 500);
}函数防抖：函数在一段时间内不再被调用的时候执行
应用场景：onresize onscroll事件，oninput事件
Var timer=null;
Window. onscroll=function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("函数防抖测试");
}, 500);
}从上面两个事件可以看出来区别：
函数节流在第一次操作之后的500毫秒内再次点击就只执行一次，不会重置定时器，不会重新计时
函数防抖是在持续触发onscroll事件的时候会重置重置定时器，重新计时,直到不触发事件的500毫秒之后执行一次
以上がJavaScript関数を定義するにはどうすればよいですか? js関数の一般的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。