美文网首页
JS函数与作用域

JS函数与作用域

作者: LeeoZz | 来源:发表于2017-05-26 22:41 被阅读0次
  • 函数声明和函数表达式有什么区别?

函数声明和函数表达式是EMACScript规定的两种不同的声明函数的方法。
1.函数声明

//声明函数
function name() {      //function+函数名+(参数)+{函数体}
    console.log ('Jack')
}

 //函数调用
name()

函数声明会在JavaScript代码开始时提到最前面进行定义,因此函数声明不必在调用之前定义。
2.函数表达式

var name = function () {
    console.log ('Jack')
}

虽然变量声明会提到JavaScript代码开始前,但是赋值要运行到该行代码才执行,因此在调用用函数表达式声明的函数时,声明必须放到调用前。

总结区别:
1.函数声明会在代码开始前定义,函数表达式遇到时才会执行。
2.函数声明必须有函数名,函数表达式则可以省略。

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

变量声明前置:
JavaScript的工作方式是先解析代码,获取一个作用域下所有的变量声明,放到代码开头声明,再一行行的执行代码:

var a = 10;
var b = 20;
//等同于下面代码;
var a,b;  //将声明提前,声明ab。ab的值都是undefined。
a = 10;  //a赋值为10,此时a=10;
b = 20; //b赋值为20,此时b=20;

函数声明前置:
函数声明前置与变量声明前置类似,JavaScript工作是会获取一个作用域下的所有函数声明,放在代码开始前进行定义。如果使用的是函数表达式,则规则与变量声明前置类似:

var name = function () {
    console.log ('Jack')
}

 //等同于
var name;
name = function () {
    console.log ('Jack')
}
  • arguments是什么?

在ECMAScript中,函数的参数在内部是用一个数组来表示的。在函数体内,可以用arguments来访问这个参数数组。arguments是一个类数组对象(不是Array的实例),因为可以使用方括号语法访问它的每一个元素,使用length属性来确定传递进来多少参数,示例:

function test ()  {
    console.log (arguments.length);  //参数的长度
    console.log (arguments[0]);    //第一个参数  
    console.log (arguments[1]);   //第二个参数
}
test ('Jack',1,'888');

  //输出结果为 3,'Jack',1
  • JS函数的"重载"怎样实现?

重载,是函数或者方法有相同的名称,但是参数列表不相同的情形,这样的同名不同参数的函数或者方法之间,互相称之为重载函数或者方法。但是在JS,并没有重载这个概念,但我们可以用另外一种方法实现这个功能:

function test (num) {
    if (num>=90) {
        console.log ('优秀')
    }
    if (num>=60&&num<90)  {
        console.log ('及格')
    }
    if (num<60)  {
        console.log ('不及格')
    }
}
test(95)  //输出 '优秀'
test(77)  //输出 '及格'
test(18)  //输出 '不及格'

这样对于同一个函数,输入不同参数就会得到不同结果。

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

在JS中我们可以使用函数声明和函数表达式声明函数,再通过函数名进行调用:

function sayName (name) {    //函数声明声明函数
    console.log (name);
}
 sayName ('Jack');    //  调用函数

 var sayName = function ()  {    //函数表达式声明函数
    console.log (name);
}
sayName ('Jack')    //  调用函数

因为在JS中圆括号()内是不能有语句的,括号内容会被当做表达式,因此上面例子可以进行改写:

(function (name)  {
    console.log (name);
})('Jack')
//或者
(function (name)  {
    console.log (name);
}('Jack'))  // 输出都为Jack

当JS执行到该行代码时,函数会被定义且立即执行,叫做立即执行函数表达式。
使用立即执行函数表达式可以创建一个独立的作用域,形成隔离,避免污染全局。

  • 求n!,用递归来实现

 function test (n) {
    if (n===1) {
        return 1;
    }
    return n*test(n-1)
}
test (10);  //3628800
  • 以下代码输出什么?

function getInfo(name, age, sex){
        console.log('name:',name);
        console.log('age:', age);
        console.log('sex:', sex);
        console.log(arguments);  //输出整组参数;
        arguments[0] = 'valley';    //第一个参数赋值为‘valley’;
        console.log('name', name);
    }

 getInfo('饥人谷', 2, '男');  
//  name:饥人谷,age:2,sex:男,['饥人谷',2,'男'],name valley;
getInfo('小谷', 3);
//  name:小谷,age:3,sex:undefined,['小谷',3],name valley;
getInfo('男');
//  name:男,age:undefined,sex:undefined,['男'],name valley;
  • 写一个函数,返回参数的平方和

function test (n) {
    if (n===1)  {
        return 1
    }
    return n*n+test(n-1)*text(n-1)
}
test (2)    //5
  • 解释下列代码的输出及原因

console.log(a);  //  由于声明提前,此时a未赋值,输出undefined;
var a = 1;    // a=1;
console.log(b);    //报错,b未被声明;
sayName('world');
sayAge(10);
function sayName(name){
        console.log('hello ', name);
}
var sayAge = function(age){
        console.log(age);
};

 //解释
 function sayName(name){                    //函数声明和变量声明提前;
        console.log('hello ', name);
}
var sayAge;
sayName('world');    //调用函数,输出'hello,world';
sayAge(10);    //undefined,因为sayAge未定义;
sayAge = function(age){
        console.log(age);
};
//函数表达式需放到调用前!!
  • 如下代码输出什么? 写出作用域链查找过程伪代码

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}        // 输出 10;

 /*
作用域查找过程
 goblecontext = {
    AO: {
        X=10
        foo: function
        bar: function 
    }
    foo.[[scope]]: goblecontext.AO
    bar.[[scope]]: goblecontext.AO
}
foocontext = {
    AO: {}
    scope: goblecontext.AO
}
barcontext = {
    AO: {
        x = 30
    }
    scope: goblecontext.AO
}
*/
var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}            //输出30

 /*
作用域查找过程
goblecontext = {
    AO: {
        x=10
        bar:function
    }
    bar.[[scopr]]=goblecontext.AO
}
barcontext = {
    AO: {
        x=30
        foo:function
    }
    foo.[[scope]]=barcontext.AO
    scope=goblecontext.AO
}
foocontext = {
    AO: {}
    scope=barcontext.AO
}
*/
var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}       //输出30

 /*
作用域查找
goblecontext = {
    AO: {
        x=10
        bar:function
    }
    bar.[[scope]]=goblecontext.AO
    scope=null
}
barcontext = {
    AO: {
        x=30
        f:function
    }
    f.[[scope]]=barcontext.AO
    scope=goblecontext.AO
}
fcontext = {
    AO: {}
    scope=barcontext.AO
}
*/
var a = 1;

 function fn(){
  console.log(a)
  var a = 5
  console.log(a)
  a++
  var a
  fn3()
  fn2()
  console.log(a)

  function fn2(){
    console.log(a)
    a = 20
  }
}

 function fn3(){
  console.log(a)
  a = 200
}
 fn()              //输出:undefined,5,1,6,20,200;
 console.log(a)

 /*
goblecontext = {
    AO: {
        a: undefined
        fn: function
        fn3: function
    }
    scope = null
    fn.[[scope]] = goblecontext.AO
    fn3.[[scope]] = goblecontext.AO
}
fncontext = {
    AO: {
        a: undefinef
        fn2: function
    }
    scope = goblecontext.AO
    fn2.[[scope]] = fncontext.AO
}
fn2context = {
    AO: {
        a: 20
    }
    scope = fncontext.AO
}
fn3context = {
    AO: {
        a: 200
    }
    scope = goblecontext.AO
}
*/

 遇到fn(),开始执行:
console.log(a),,此时fncontextAO中a未被赋值,输出undefined;
a = 5;
console.log(a),此时fncontextAO中a被赋值为5,输出5;
a++,fncontextAO中a变为6;
var a,因为a已经存在,故无意义;
fn3(),执行fn3(),进入fn3context;
console.log(a),goblecontextAO中,a=1,故输出1;
a=200,goblecontextAO中a变为200;
fn2,执行fn2(),进入fn2context;
console.log(a),fncontextAO中,a=6,故输出6;
a=20,fncontextAO中,a变为20;
console.log(a),fncontextAO中,a为20,故输出20;
fn执行完毕;
console.log(a),goblecontextAO中,a为200,故输出200;

相关文章

  • JavaScript作用域学习笔记

    @(JS技巧)[JavaScript, 作用域] JavaScript作用域学习笔记 概念: 作用域就是变量与函数...

  • 变量作用域

    变量作用域:静态作用域、动态作用域JS变量作用域:JS使用静态作用域JS没有块级作用域(全局作用域、函数作用域等)...

  • 2.Dart面向对象

    函数 命名可选参数{} 位置可选参数[] 作用域定义:与js的作用域一致,层层向上找。 Dart函数闭包 js函数...

  • JS的作用域

    JS的作用域: 全局作用域、函数作用域、eval 作用域、块级作用域 全局作用域: 函数作用域: 结果截屏: 说...

  • 作用域与变量提升

    作用域与变量提升 作用域 JS中变量的作用域有全局作用域和局部作用域两种,作用域简单来讲就是变量与函数的可访问范围...

  • 你不知道的JS-上卷

    作用域整体理解:JS作用域分为函数作用域,全局作用域,with和try catch形成的块级作用域。 JS引擎在编...

  • js作用域

    词法作用域 -js采用的是词法作用域,函数的作用域基于函数创建的位置。

  • PHP变量作用域

    变量作用域:1,全局作用域global,2,局部作用域,3,静态作用域 1,与js相似,变量写在函数以外叫做全局变...

  • 闭包

    js的作用域分为全局作用域,和函数作用域, 内部作用域可以访问外部作用域的函数参数,外部不能访问内部函数的变量和参...

  • 作用域链&闭包&函数相关

    作用域链 在JS中函数可以创建作用域; 函数中又可以创建函数(可以开辟新的作用域); 函数内部的作用域可以访问外部...

网友评论

      本文标题:JS函数与作用域

      本文链接:https://www.haomeiwen.com/subject/vrftfxtx.html