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中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：javascript函数如何定义？js函数经常见用法