javascript函数定义以及常见用法

              我们知道,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 divs=tr.getElementsByTagName("div");
for(var  i=0;i<divs.length;i++){
     (function(div){
      div.onclick=function(){
      alert(this.innerHTML);
      }
})(divs[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 ( < div >
						<Button onClick={this.onSearch}>测试</Button>
						< /div>
					)
				}
			}

  

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毫秒之后执行一次

上面讲的是函数最常见基本的用法,个人表述有不恰当的地方请指正

原文地址:https://www.cnblogs.com/a546558309/p/9614436.html

时间: 2024-11-08 20:46:02

javascript函数定义以及常见用法的相关文章

JavaScript 函数定义方法

JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 JavaScript 函数可以通过一个表达式定义. 函数表达式可

JavaScript——函数定义和调用

1.定义函数 定义方式一 绝对值函数 function abs(x){ if(x>=0){ return x; }else{ return -x; } } 上述abs()函数的定义如下: function指出这是一个函数定义: abs是函数的名称: (x)括号内列出函数的参数,多个参数以,分隔: { ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句. 注意: 函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回.因此,函数内部通过条件判断和循环可以

[转]javascript函数定义表达式和函数声明的区别

在javascript中,函数有两种定义写法,函数定义表达式和函数声明,其例子分别如下所示: var test = function(x){ return x; } function test(x){ return x; } 尽管函数定义表达式和函数声明语句包含相同的函数名,并且都创建了新的函数对象,但是这二者却有区别. 函数声明语句中的函数名是一个变量名,变量指向函数对象. 函数定义表达式和通过var声明变量一样,其函数被提前到了脚本或函数的顶部,因此它在整个脚本和或函数内都是可见的.这样的话

JavaScript 函数定义和调用

普通的函数定义方法: function abs(x):{ if (x >= 0){ return x; }else { return -x ; } } 两种方法是等价的 var abs = function (x):{ if (x >= 0){ return x; }else { return -x ; }; arguments JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数.arguments类似Array但它

javascript函数定义表达式

函数定义表达式定义一个JavaScript函数.表达式的值是这个新定义的函数.从某种意义上讲,函数定义表达式可称为"函数直接量",毕竟对象初始化表达式也称为"对象直接量".一个典型的函数定义表达式包含关键字function,跟随其后的是一对圆括号,括号内是一个以逗号分割的列表,列表含有0个或多个标识符(参数名),然后再跟随一个由花括号包裹的JavaScript代码段(函数体),例如: //这个函数返回传入参数值的平方 var square = function(x)

JavaScript函数定义和调用 变量作用域

本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 JavaScript中函数定义可以是这样的格式 function 函数名(参数) { 函数体 } 也可以是这样的格式 var 函数名 = function (参数) { 函数体 }; 关键字一:arguments 获取全部参数 只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数.arguments类似Array但它不是一个Array.第一个参数是arguments[0]....[n] 关键字二:rest 获取 获取除了已定

javascript函数定义方式及作用域

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

js基础之javascript函数定义及种类-普通涵数-自执行函数-匿名函数

普通函数 1.不带参数 function fucname(){ alert("hello"); } funcname() 2.带参数 function funcname(arg){ alert("hello"); } funcname("Brin") 普通函数,自执行函数 1.不带参数 (function(){ alert(123); })() 2.带参数 (function(arg){ alert(123); })("Brin&quo

javaScript函数与闭包

js中函数也是对象,具有一切对象的特征,可以作为表达式给变量赋值,可以作为函数的形参,或者函数的返回值,函数内可以嵌套函数等等.函数内部使用var定义的局部变量只能在函数内部进行访问,在函数调用完成后被释放,从这点,可以模拟私有变量,块状作用域等. 1.javaScript函数定义 js中函数定义有两种方法:函数声明和函数表达式,函数声明可以进行函数声明提升,函数表达式则不会. 2.闭包 闭包是指有权访问另一个函数作用域中的变量的函数,和匿名函数是不同的概念.只不过其常见的创建方式,就是在一个函