0

0

关于常见的JS函数问题的讲解

jacklove

jacklove

发布时间:2018-05-21 10:54:34

|

1636人浏览过

|

来源于php中文网

原创

在学习中经常会遇到javascript的函数问题,本篇将会对其进行讲解。

函数声明和函数表达式有什么区别

函数表达式和函数声明语句包含相同的函数名,并且都创建了新的函数对象,他们的区别主要在于变量提升的对象不同

函数声明的函数名就是一个变量,变量指向函数对象。变量提升的是函数的变量和函数主体。

函数表达式的是通过var进行赋值,把整个函数赋值给一个新的变量,变量提升的是新的变量名,函数初始化代码将继续留在原来的位置不变。

什么是变量的声明前置?什么是函数的声明前置

变量的声明前置

console.log(a);var a = 1;
结果为underfined

变量的声明前置会默认此代码为:

var a;      //变量声明前置console.log(a);
a = 1;

函数的声明前置

a()function a(){console.log ("hello") }

函数的声明前置默认此代码为:

function a(){                   //将函数声明提升console.log ("hello") }a()
arguments 是什么

arguments是一个类数组的对象,它里面所存储的是函数执行的时候所传递进来的参数,在函数中可以使用arguments获取所有函数的参数。
如下代码:

function say(name,sex,age){  console.log(arguments);
}console.log('name:jiuyi',"sex:男",'age:54')
结果为:"name:jiuyi""sex:男""age:54"

函数的重载怎样实现

在JS中没有函数重载的概念,后面的新函数将会覆盖前面的同名函数,哪怕参数不同。

      function p(a,b,c) {  
           console.log(a+b+c);  
       }  
 
       function p(a,b) {  
           console.log(a+b);  
       }       console.log(p('hello','jiuyi','yes'));       console.log(p('hello'))
结果为:  "hellojiuyi"
 "helloundefined"

由上图可以看出,后面的P函数覆盖掉了上面的P函数。

立即执行函数表达式是什么?有什么作用

立即执行函数表达式就是将整个函数声明用()包括起来变为函数表达式,然后后面跟上参数就会立即执行函数。
function ( ){ }函数声明转为( function (){ }) ( )
作用:

生成自己的作用域以及独立的局部变量,不受变量提升的干扰,减少内部变量与外边变量冲突的可能,执行一次会销毁变量。

什么是函数的作用域链

在JS中分为全局变量和局部变量,函数内部可以访问全局变量,而函数外部不能访问函数内部的局部变量,在变量在一个函数内部的时候,会优先在此作用域里寻找变量是否定义,没有就向上一级寻找,知道找到所需要的变量。如果在全局变量中没有找到将会报错。尽量使用局部变量,以免造成与外部变量的干扰。

1.代码输出

证件照制作小程序免费版
证件照制作小程序免费版

在线证件照系统是一套完善的冲印行业解决方案,致力于解决用户线上拍摄证件照,拍摄最美最标准证件照的使命。证件照免费版功能:后台统计:当天制作、当天新增、支持规格、近7日统计规格列表:筛选查看、编辑用户列表:筛选查看常见问题:筛选查看、新增、编辑、删除小程序设置:应用设置、流量主设置小程序跳转:筛选查看、新增、编辑、删除关注公众号:引导设置系统要求:系统:Linux系统(centos x64)运行环境

下载
  function getInfo(name, age, sex){        console.log('name:',name);        console.log('age:', age);        console.log('sex:', sex);        console.log(arguments); //代表实际参数,所以输出实际参数内容
        arguments[0] = 'valley';//name赋值为valley
        console.log('name', name);//所以这里参数输出为valley
    }
    getInfo('hunger', 28, '男');
    getInfo('hunger', 28);
    getInfo('男');
结果为:
name: hunger
 age: 28
 sex: 男
["hunger", 28, "男"]
name valley
 name: hunger
 age: 28sex: undefined
 ["hunger", 28]
 name valley
name: 男
age: undefined
 sex: undefined["男"]
name valley

2.写一个函数,返回参数的平方和

  function sumOfSquares(){   var x = 0;   for(var i = 0;i

3.如下代码的输出?为什么

console.log(a); //输出为underfined,因为JS会全局变量提升,a只有声明没有赋值var a = 1;console.log(b);//报错,因为b未声明未赋值

4.如下代码的输出?为什么

sayName('world'); 
sayAge(10); function sayName(name){ console.log('hello ', name);
 } var sayAge = function(age){ 
console.log(age); 
};

结果为:
hello  world  //因为函数声明前置function sayName(name)被提升到最上面,sayName有声明有内容。报错  //因为变量声明前置 var sayAge 提升到最上面,而sayAge函数未声明,所以报错。

5.如下代码的输出?为什么

function fn(){} 
 var fn = 3; console.log(fn);
相当于:  var fn;  function fn(){} ;
  fn = 3;  console.log(fn);    //所以输出为3

6.如下代码的输出?为什么

function fn(fn2){   console.log(fn2);   //输出 function fn2(){ console.log('fnnn2');}
   var fn2 = 3;   console.log(fn2);   //输出3
   console.log(fn);    //输出 function fn(fn2){ console.log(fn2); var fn2 = 3; console.log(fn2); console.log(fn); function fn2(){ console.log('fnnn2'); } } fn(10);
   function fn2(){ 
     console.log('fnnn2');  //不输出,函数未调用
   } 
} 
fn(10);
相当于:var fn2;                            //声明前置function fn(fn2){  
   function fn2(){                   //函数声明前置
     console.log('fnnn2');          //此函数不输出,未调用
   } 
   console.log(fn2);               // 调用的其实是函数fn2
   fn2 = 3;             
   console.log(fn2);            // 此时fn2已被赋值为3
   console.log(fn);              //调用的其实是fn整个函数}
fn(10);

7.如下代码的输出?为什么

  var fn = 1;    function fn(fn){         console.log(fn);
    }    console.log(fn(fn));       //结果报错,变量提升,fn为1,直接调用1出错结果相当于:    var fn;    function fn(fn){         console.log(fn);
    }
    fn = 1;    console.log(fn(fn));

8.如下代码的输出?为什么

console.log(j);   //变量提升输出undefined
 console.log(i);    //变量提升输出undefinedfor(var i=0; i<10; i++){   //i循环后结果为10var j = 100; 
} console.log(i);    //输出10
 console.log(j);    //输出100

9.如下代码的输出?为什么

 fn();   var i = 10;   var fn = 20;   console.log(i);   function fn(){       console.log(i);       var i = 99;
       fn2();       console.log(i);       function fn2(){
           i = 100;
        }
    }
代码相当于:var i; 
var fn;function fn(){  
  var i ;  function fn2(){
  i = 100;
  } console.log(i);    //只有声明未赋值输出underfined
  i = 99;
  fn2();                  //经过运行I=100
  console.log(i);      //输出100}
fn();
i = 10;
fn = 20;console.log(i);             //输出10

10.如下代码的输出?为什么

 var say = 0;
    (function say(n){        console.log(n);        if(n<3) return;
        say(n-1);
    }( 10 ));    console.log(say);

代码相当于:    var say;

   (function say(n){        console.log(n);        if(n<3) return;    
        say(n-1);
    }( 10 ));
      say = 0;    console.log(say);           //输出为0结果为:10987654320

函数say为立即执行函数,执行结果为10、9、8、7、6、5、4、3、2,最后say赋值为0,所以输出为0

本篇对常见的js函数问题进行了讲解,更多相关内容请关注php中文网。

相关推荐:

JavaScript相关函数的讲解

关于jquery DOM&事件的讲解

一些相关的模块化基础

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号