JavaScript函数

1.1、JavaScript函数的定义

​ 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

​ 函数就是包裹在花括号中的代码块：

​ JavaScript 函数语法:

function 函数名(参数列表){
    这里是要执行的代码
}

<!-- 当我们点击这个按钮的时候,出来一个弹出框 -->
<!-- 
    click   鼠标单击事件

    注意: 
        在事件属性里面调用函数的话,必须加()
        
        什么叫事件属性?
            事件作为标签的一个属性存在的话
    -->
<button onclick="fn1()" type="button">点击我</button>

<script>
    /*
        js里面的函数: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

        JS函数语法:
            function 函数名(参数列表){
                语句...;
                returen 返回值;
            }

        function js里面的关键字,用来定义js函数
        函数名: 自定义,要符合标识符规范
        我们可以在函数名的()里面定义参数列表
        如果函数需要返回值,那么我们在语句块里面通过return关键字来定义返回值
        JS函数在定义的时候,不需要返回值类型;
    */

    //比如我们在页面中很多地方都需要弹出框效果,那么我们就可以把弹出框代码放到函数里面,那么它就可以被重复使用了

    //函数本身不会自己运行,它需要调用才可以运行;
    function fn1(){
        //alert(任意数据类型参数)   警告框
        alert("我是警告框");
    }

    //调用函数
    //fn1();

    //fn1();
</script>

1.2、JavaScript声明式函数的应用

​ 函数的应用分为两步，一是先声明一个函数，再调用该函数。

声明函数：
1、声明无参函数语法
2、声明有参函数的语法
3、声明带有返回值的函数

1.2.1、JavaScript声明无参函数语法

​ 无参函数就是在函数名的小括号中不定义任何参数。

<script>
function sayHello(){
    alert("Hello World!");
}
</script>

1.2.2、JavaScript声明有参函数的语法

function functionName(varName1,varName...)
{
    函数代码块；
}

​ 上面的var1,var2就是参数，它代表一个不确定的值，这个值要参与函数代码块的运算，在调用函数时，可以给这些参数赋值。也可以在函数中定义多个参数，每个参数之间逗号 (,) 分隔：

​ myFunction(argument1,argument2,argument3,argument4)

​ 当声明函数时，参数相当于作为变量来声明。

​ 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

1.2.3、JavaScript声明带有返回值的函数

​ 如果在执行完一块JavaScript代码后，也就是完成某一个业务逻辑后，需要返回一个具体的值，这就要函数返回值。
​ 语法如下：

function myFunction(参数){
    函数代码块;
    return语句;
}

​ 示范：利用函数计算两个数相乘后的值，并返回。

//1、声明一个带参数的方法
function myFunction(a,b) {
         return a*b;
}
//2、调用带参的方法
var mul=myFunction(5,6);

需要注意的是，仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b){
​ if (a>b){
​ return;
​ }
​ x=a+b
}
如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

1.2.4、JavaScript函数的调用

​ 在JavaScript中，调用函数时，如果没有返回值，就直接用函数方法名()调用。如果有参数，则必须给每个参数赋值，函数方法名(参数值)，如果还有返回值，可以用一个变量来存储这个值。

​ 示范：

调用无参的函数：
sayHello();
调用有参的函数：
myFunction(“张三”,13);
调用有返回值的函数：
var mul=myFunction(5,6);

1.3、JavaScript形式参数和实际参数

​ 在JavaScript中，如果在使用带参的函数，必须分为两步:

​ 先是声明一个函数，写在声明函数中的参数叫做形式参数，简称形参，它代表一个不具体的值，也可以理解为就是声明了一个变量；

​ 而实际参数，简称实参，调用函数时，要给形参赋值，这个具体的值就是一个实际参数，实参就是表示一个具体的值。

//1、声明一个带参数的方法
function myFunction(name,age){
    alert("姓名" + name + ", 年龄" + age);
}
//其中name和age就是形参。

//2、调用带参的方法
myFunction("张三",13)

//"张三","13"就是一个实参。

​ 需要注意的是，同一个函数，形参和实参是一一对应的。

​ 思考：如何区分实参和形参？
​ 1、出现的地方不一样，一个是在函数的声明中，一个出现在函数的调用中。
​ 2、代表的意义不一样，一个是声明一个变量，一个是该变量的值。

1.4、JavaScript局部变量和全局变量(函数作用域)

​ 变量从作用域的角度划分，分为两种：局部变量和全局变量。

1.4.1、JavaScript局部变量

​ 在JavaScript函数内部声明的变量是局部变量，所以只能在函数内部访问它，该变量的作用域是局部的。

​ 可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，局部变量就会被删除。

function sayHello(){
      //该变量声明在一个函数内部，name就是一个局部变量，
      //局部变量只可以在本函数内调用
      var  name="H5";
      alert("Hello "+name);
}

1.4.2、JavaScript全局变量

​ 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

//声明一个全局变量，任何函数都可以使用它
var  name="H5";
function sayHello(){
    alert("Hello "+name);
}
//调用函数
sayHello();

​ 需要注意的是，如果没有使用var声明变量，该变量将被自动作为全局变量声明。

​ 如这条语句：carname=“Volvo”;将声明一个全局变量 carname，即使它在函数内部声明。

1.4.3、JavaScript变量的生命周期

​ JavaScript 变量的生命期从它们被声明的时间开始。

​ 局部变量会在函数运行以后被删除。

​ 全局变量会在页面关闭后被删除。

1.4.4、JavaScript局部变量和全局变量的区别

1、声明位置不同
​ 局部变量声明在函数内部。全局变量声明在函数外部
2、作用域不一样
​ 局部变量只在某一个局部范围有效，比如函数内部。全局变量在整个页面有效，网页上的所有脚本和函数都能访问它。
3、生命周期不一样
​ 局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除

1.5、匿名函数

​ 匿名函数，就是没有名字的函数。

​ 一般的有名函数:

function  myFun( a,b ){
    console.info( a+b );
}
myFun( 10 , 30 );  // 输出40

​ 匿名函数: 有关键词 function， 有小括号，有大括号，就是没有函数名。

function(a,b){
    console.info( a+b );
}

​ 想要执行它，怎么执行？没有名字，怎么调用？

​ 方式一：把它放进一个变量里，这个变量就相当于一个函数名了。没有名字的匿名函数，变成有“名”函数了，我们把这种方式称之为函数字面量。

var  myFun = function( a,b ){
    console.info( a+b);
};

myFun( 10,30 );

​ **方式二：**干脆不要名字，直接执行~！-- 这么做可以在内部形成局部变量和局部函数，防止全局污染。

​ 个人常用的直接执行匿名函数的方式！

​ (匿名函数)();

​ (匿名函数() );

//待议
(function(a,b){
    console.info( a+b );
})(10,30);

(function(a,b){
    console.info( a+b );
}(10,30));

​ 其他直接调用的方式显得比较怪异了。

// 在function前面加一元操作符号  
!function () { /* code */ } ();  
~function () { /* code */ } ();  
-function () { /* code */ } ();  
+function () { /* code */ } ();

// 在function前面添加 new 关键词
new function () { /* code */ }  
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

​ **方式三：**利用事件去调用。

var  btn = document.getElementById("btn");  // 找到页面某个标签

// 添加事件
btn.onclick = function(){
   console.info("你点了我！");
}

​ **方法四：**作为对象的方法调用

var  myObj = {
     name : "John",
     sayHello:function(){
         console.info("Hello,"+ this.name );
     }
};

myObj.sayHello();

​ **方法五：**作为另一个函数的参数。

​ **函数也可以作为另一个函数的参数的。**当然有名函数也可以做参数。

function myFun(fn){
    fn();
}

myFun( function(){
    console.info("这个匿名函数是个参数");
});

1.6、构造函数

​ 通过 new 函数名 来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写（规范）。

​ 对new理解：new 申请内存, 创建对象,当调用new时，后台会隐式执行new Object()创建对象。所以，通过new创建的字符串、数字是引用类型，而是非值类型。

​ 1、常用的构造函数：

1. var arr = [];     为      var arr = new Array();       的语法糖。
2. var obj = {}     为      var obj = new Object();     的语法糖
3. var date = new Date();
4. ...

​ 2、自定义构造函数:

<script>
    // 声明式函数: 通过function 函数名(){}  定义的函数,我们都称之为声明式函数
    // 匿名函数： 就是没有名字的函数,它同样通过function来定义;[它和声明式函数唯一的区别是没有函数名,其他都一致]
    // 函数字面量: 定义一个变量,然后给这个变量赋值匿名函数;
    // 通过  new 函数名    来实例化对象的函数叫构造函数。

    // 1. 构造函数名要大写
    // 2. 构造函数的作用就是用来创建对象的,
    // 3. 功能上: 普通函数是用来执行某个行为;构造函数是用来创建对象的
    // 4. 语法上: 基本没有差别
    // 5. 从函数体: 普通函数的函数体里面就是要执行的逻辑代码; 构造函数的函数体里面是用来初始化对象成员以及对象方法的;
    function Person(id,name,age) {
        //this关键字: 表示的当前对象
        this.id = id;   //对象的属性
        this.name = name;
        this.age = age;
        this.eat = function () {  //对象方法
            alert(this.name+"的吃饭行为");
        }
    }

    //直接通过函数名() 调用的是普通函数

    //使用构造函数,必须结合new来使用
    //Person()就算是构造函数,它也属于函数的一种
    var p1 = new Person(1001,"张三",12); //创建一个Person对象

    var p2 = new Person(1002,"李四",12);

    document.write("p1的name是:"+p1.name+"<br>");

    p1.eat();
</script>

1.7、回调函数

​ 我们先来看看回调的英文定义：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

​ 字面上的理解，回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。

​ 其实也很好理解对吧，回调，回调，就是回头调用的意思。主函数的事先干完，回头再调用传进来的那个函数。

​ 举一个别人举过的例子：约会结束后你送你女朋友回家，离别时，你肯定会说：“到家了给我发条信息，我很担心你。” 对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。其实这就是一个回调的过程。你留了个参数函数（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是主函数。她必须先回到家以后，主函数执行完了，再执行传进去的函数，然后你就收到一条信息了。

//定义主函数，回调函数作为参数
function A(callback) {
    callback();  
    console.log('我是主函数');
}

//定义回调函数
function B(){
    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作  
}

//调用主函数，将函数B传进去
A(B);

//输出结果
我是主函数
我是回调函数

​ 上面的代码中，我们先定义了主函数和回调函数，然后再去调用主函数，将回调函数传进去。

​ 定义主函数的时候，我们让代码先去执行callback()回调函数，但输出结果却是后输出回调函数的内容。这就说明了主函数不用等待回调函数执行完，可以接着执行自己的代码。所以一般回调函数都用在耗时操作上面。比如ajax请求，比如处理文件等。

1.8、变量提升

1.8.1、执行环境

​ 执行环境定义了变量和函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有与之对应的变量对象（variable object），此对象保存着环境中定义的所有变量和函数。我们无法通过代码来访问变量对象，但是解析器在处理数据时会在后台使用到它。

​ 全局执行环境:

​ 全局执行环境是最外围的一个执行环境，根据ECMAScript实现所在的宿主环境不同，表示执行环境的对象也不同。在web浏览器中，我们可以认为它是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。代码载入浏览器时，全局环境被创建，应用程序退出，如关闭网页或者浏览器时，全局执行环境被销毁。

​ 函数执行环境:

​ 每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境就被推入一个环境栈中，当函数执行完毕后，栈将其环境弹出，把控制权返回给之前的执行环境。

1.8.2、作用域

​ 在ES5中，JS只有两种形式的作用域：全局作用域和函数作用域。

​ 全局作用域: 全局对象的作用域，任意地方都可以访问到（如果没有被函数作用域覆盖）。在ES6中，新增了一个块级作用域（最近的大括号涵盖的范围），但是仅限于let方式申明的变量。

​ 函数作用域: 整个函数范围

1.8.3、变量提升（hoisting）

​ ES5 提升有变量提升和函数提升。

​ 原则：

​ 1、所有声明都会被提升到作用域的最顶上；

​ 2、同一个变量声明只进行一次，并且因此其他声明都会被忽略；

​ 3、函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升。

变量提升：

​ 把变量声明提升到函数的顶部，但是变量赋值不会提升。

console.log(a);
var a = 10;
//输出为undefined

//与上例等价
var a;
console.log(a);
a = 10;

​ 注意：变量未声明，直接使用，输出‘变量 is not defined’。

函数提升:

​ 函数提升会将函数声明连带定义一起提升。

​ 在JavaScript中函数的创建方式有三种：函数声明、函数表达式（函数字面量）、函数构造法（动态的，匿名的）。只有函数声明创建的函数会执行函数提升，字面量定义的函数（实质为变量+匿名函数）会执行变量提升。

test1();
function test1(){
    console.log("可以被提升");
}

test2();
var test2 = function(){
    console.log("不可以被提升");
}

console.log(test2);
var test2 = function(){
   console.log("不可以被提升");
}

函数和变量同时提升:

console.log(test3);
function test3(){console.log('func');}
var test3 = 'Mary';

1.9、防止全局污染

1.9.1、全局污染问题:

​ javaScript 可以随意定义保存所有应用资源的全局变量。但全局变量可以削弱程序灵活性，增大了模块之间的耦合性。在多人协作时，如果定义过多的全局变量 有可能造成全局变量冲突，也就是全局变量污染问题。

1.9.2、解决全局污染

// 方式1: 定义全局变量命名空间,只创建一个全局变量，并定义该变量为当前应用容器，把其他全局变量追加在该命名空间下。

//app就是一个全局变量,我们可以把app这个全局变量当成一个命名空间,然后把其他的所有全局变量都放在它下面;
var my={};  //唯一的全局变量
my.name={
    big_name:"zhangsan",
    small_name:"lisi"
};
my.work={
    school_work:"study",
    family_work:"we are"
};

// alert(my.name.small_name);

// 方式2: 利用匿名函数将脚本包裹起来

(function(){
    var temp = {};
    //把两个变量赋值给temp
    //temp.school_work = "study";
    //temp.small_name = "李四";
    small_name = "李四";
    temp.getName = function(){
        return small_name;
    }

    //把tmep赋值给全局变量test
    window.test = temp;
}())
// alert(test.getName());

最后

以上就是体贴花卷为你收集整理的JavaScript函数JavaScript函数的全部内容，希望文章能够帮你解决JavaScript函数JavaScript函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。