javascript函數如何定義？ js函數常見用法

 這篇文章帶給大家的內容是關於javascript函數如何定義？ js函數常見用法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我們知道，js函數有多種寫法，函數聲明，函數表達式，Function式建構函數，自執行函數，包括Es6的箭頭函數，Class類寫法,高階函數，函數節流/函數防手震，下面我就開始講關於上面幾種類型的最基本用法。

函數宣告式寫法

這個寫法是最基本的寫法，使用關鍵字 function 定義函數，函數宣告後不會立即執行，會在我們需要的時候呼叫到。這種函數是全域的，如果有兩個同名的宣告式函數存在，那麼第二個就會覆寫第一個。

   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

Function式建構子

透過 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元件中指向的是目前元件的class父級元件)，箭頭函數總是匿名的。寫法如下:

const   test=()=>{
}

例如下面的函數中的this指向的是window

const  test={
       array:[1,2],
       show:()=>{
            console.log(this. array)
      }
}
test.show()；//undefined

而下面react元件的onSearch中的this指向的是Test這個元件，透過this可以找到Test元件下面定義的函數或state,props。注意constructor中註解的程式碼是為了將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（類別）這個概念,作為物件的模板,透過class關鍵字,可以定義類別。基本上,ES6的class可以看作只是一個語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的語法.

基本寫法:

class   test {
//第一种
Show() {
alert('show');
}
//第二种
//Show=()=>{
//}
}
var test1 = new test();
var  test2= new test();

注意這個類別中的這兩種方法的寫法是有區別的

第一種宣告的方法會指向test的原型prototype上

test1. Show=== test2.Show//true

第二種宣告的方法會指向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. Show();

• #高階函數

高階函數英文叫Higher-order function。 JavaScript的函數其實都指向某個變數。既然變數可以指向函數，函數的參數能接收變量，那麼一個函數就可以接收另一個函數作為參數，而這個函數就稱之為高階函數。簡單的說法就是“高階函數就是可以把函數作為參數，或者是將函數作為返回值的函數。”，其實最典型的應用就是回調函數了。

高階函數大致上有下面幾個場景

1.函數回呼

$.get(‘’,{},function(data){

})

var   test=function(callback){
        callback.apply(this,arguments)

}

2函數柯里化

在一個函數中先填幾個參數(然後再回傳一個新函數)的技術稱為柯里化(Currying),這個定義可能有點難理解，先看下一個簡單的函數柯里化的實現：

      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中文網其他相關文章！