让前端飞饥人谷技术博客

函数与作用域

2017-08-16  本文已影响0人  _Dot912

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

函数声明语法：function functionName(arg0,arg1,arg2){ //函数体 }
函数表达式语法：var function = function(arg0,arg1,arg2){ //函数体 }

区别：
使用function关键字可以声明一个函数，它的特征是函数声明提升，执行代码前会先读取函数声明，即函数声明不必放在调用的前面，它可以放在当前作用域任何位置；函数表达式在使用前必须先赋值，所以声明必须放在调用前面，不然浏览器解析代码时会认为函数还不存在而抛出错误，理解函数提升的关键就是理解函数声明与函数表达式之间的区别。

//函数声明
function sayHi(){
  console.log('hi');
}
//函数调用
sayHi();

或者

//函数调用
sayHi();
//函数声明
function sayHi(){
  console.log('hi');
}

//函数声明
var sayHi = function(){
  console.log('Hi!');
};
//函数调用
sayHi();

以下是错误做法

//函数调用
sayHi();
//函数声明
var sayHi = function(){
  console.log('Hi!');
};
会抛出错误：函数还不存在

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

变量声明前置与函数声明前置

arguments 是什么？

arguments是一个类数组对象，除了length属性外没有任何数组属性，是所有函数中可用的局部变量，仅在函数内部有效。

使用场景：调用一个函数时，当这个函数的参数数量比它显式声明的参数数量更多时，就可以使用 arguments 对象。

函数的"重载"怎样实现

js是弱类型语言，参数不是固定的某个类型，所以在js中没有重载，同名函数后面的会覆盖前面的。但我们也可以实现重载所需要的功能。
实现：
写一个函数，在函数体内针对不同的参数调用执行不同的逻辑。

function printPeopleInfo(name,age,sex){
    if(name){
        console.log(name);
    }
    if(age){
        console.log(age);
    }
    if(sex){
        console.log(sex);
    }
}
printPeopleInfo("dot",23);  //dot 23
printPeopleInfo("dot","female",23);  //dot female 23

function add(){
    var num=0;
    for(var i=0;i<arguments.length;i++){
        num+=arguments[i];
    }
    console.log(num);
}
add(1);  //1
add(1,2,3);  //6

注意：始终记住函数名只是一个指向函数对象的指针，并不会与某个函数绑定。

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

// 以下都能实现立即执行
(function(){ /* code */ }());
(function(){ /* code */ })();

// function前加一元运算符也可实现，advance-task2我有提到过
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

求n!，用递归来实现

var factorial = (function f(n){
    if (n <= 0){
        return 1;
    } else {
        return n * f(n-1);
    }
});
factorial(5);  //120

function factorial(n){
  if(n === 1) {
    return 1;
  }
  return n * factorial(n-1);
}
factorial(5);

以下代码输出什么？

function getInfo(name, age, sex) {
    console.log('name:', name);
    console.log('age:', age);
    console.log('sex:', sex);
    console.log(arguments);
    arguments[0] = 'valley';
    console.log('name', name);
}

getInfo('饥人谷', 2, '男');
getInfo('小谷', 3);
getInfo('男');

输出分别为：

name: 饥人谷
age: 2
sex: 男
["饥人谷",2,"男"]
name valley

name: 饥人谷
age: 3
sex: undefined
["小谷",3]
name valley

name: 男
age: undefined
sex: undefined
["男"]
name valley

写一个函数，返回参数的平方和

function sumOfSquares() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += Math.pow(arguments[i], 2);
    }
    return sum;
}
var result = sumOfSquares(2, 3, 4);
var result2 = sumOfSquares(1, 3);
console.log(result);  //29
console.log(result2);   //10

如下代码的输出是？为什么

    console.log(a);  //undefined，因为变量a声明提升并赋值为undefined，先读取变量声明
    var a = 1;
    console.log(b);  //抛出ReferenceError:b is not defined，因为b没有声明

如下代码的输出是？为什么

    sayName('world');
    sayAge(10);
    function sayName(name){
        console.log('hello ', name);  //hello world，因为sayName函数声明提升
    }
    var sayAge = function(age){
        console.log(age);  //抛出TypeError: sayAge is not a function，因为sayAge是函数表达式，使用前必须赋值，而声明放在了调用的后面，此时函数还不存在，所以会报错
    };

扩充——执行环境与作用域

理解了这两个知识点才能做以下四题

执行环境与环境对象：

为了保证指令的顺序，在运行时需要一个容器，把一系列函数、表达式、语句（统称为脚本）包起来。而脚本之间也具有相关性，实现一个功能所需要的脚本，又往往再构成一个集合。
比如一个汽车工厂，有一个子工厂专门生产螺钉。整个汽车工厂就是一个大容器，螺钉工厂就是一个小容器，其中生产螺帽的车间构成一个脚本集合，生产螺栓的车间构成一个脚本集合。
这样的一个集合就是脚本的执行环境，而一个脚本执行环境的直接容器就是其环境对象。
上例中，车间就是执行环境，螺钉工厂就是车间的环境对象。
可见执行环境、环境对象的概念是相对、有精度和角度的。
换个角度，螺丝工厂也是一个执行环境，汽车工厂也是螺丝工厂的环境对象。
在JS中，通常以对象作为环境对象，具体运行脚本的函数为执行环境。
如上所言，注意以下两点：

function a(){};
a.color = "red";
a.getColor = function(){
    console.log(this.color);    //red
    console.log(this);   //function a(){};
};
a.getColor();

function a(){console.log(this.name)};
var object = {
    name: 'Amily'
}
var name = 'Shaw';
a();    //Shaw
a.apply(object);    //Amily

执行环境通过栈来保存，所以也叫环境栈，每当调用一个函数就向栈中推入该函数的执行环境，函数执行之后栈将其环境弹出，把控制权返回给之前的执行环境，栈底是全局执行环境。

作用域链：

脚本执行时，肯定需要使用变量，但有些变量不是在该执行环境内定义的。此时需要一个机制，使得一个执行环境中的脚本能拿到另一个执行环境中的变量。这个机制必须有规矩，明确哪些变量能跨环境拿，哪些不能。这个机制就是作用域链。
作用域链由一连串的变量构成，这些变量不是杂乱无章的，而是根据自身所在的执行环境，由内层环境到外层环境，按顺序链下去的。考虑到有同级的执行环境，数据结构上更像一棵树。
内部环境可通过作用域链访问所有外部环境，但外部环境不能访问内部环境中的任何变量与函数，同级执行环境间没法直接访问对方的变量，除非 return 到下一链中，例如：

var a = function(){
    var name = 'Amily';
}
var b = function(){
    alert(name);    //undefined
}

通过try-catch语句和with语句可在作用域链前端临时添加变量对象，此时，同名变量以给定的变量对象中的变量优先。

注意：简单理解栈和作用域链，栈就像一个桶，window是最先推到栈底的，接着推入次外层变量对象，一直到最内层变量对象，即最内层在上，从作用域的角度来看，查找作用域就是在栈里从上往下查找的过程，全局执行环境的变量对象始终都是作用域链中的最后一个对象。

var color = "blue";
function changeColor(){
        var anotherColor = "red";
        function swapColors(){
                var tempColor = anotherColor;
                anotherColor = color;
                color = tempColor;
                // 这里可以访问color、anotherColor、tempColor
        }
        // 这里可以访问color、anotherColor
}
changeColor();
// 这里只能访问color
变量作用域

变量作用域相对于某个具体变量而言，指能够通过作用域链拿到该变量的所有执行环境。

垃圾收集

JS有自动垃圾收集机制，分别是标记清除和引用计数。
前者通过执行环境来标记，后者通过地址的引用次数来标记，两者都是在无法访问后，被作为垃圾清除。
在大型应用中，通常通过将无用的变量设置为 null 来进行手动垃圾清除。

明确了以上概念，再来看以下四题会容易很多～

如下代码输出什么? 写出作用域链查找过程伪代码

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

如下代码输出什么? 写出作用域链查找过程伪代码

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

以下代码输出什么? 写出作用域链的查找过程伪代码

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}

以下代码输出什么？ 写出作用域链查找过程伪代码

var a = 1;

function fn(){
  console.log(a) //(1)
  var a = 5
  console.log(a) //(2)
  a++
  var a
  fn3() //(3)
  fn2() //(4)
  console.log(a) //(5)

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

function fn3(){
  console.log(a)
  a = 200
}

fn()
console.log(a) //(6)

分析：fn3改变了全局变量a的值，fn2改变了fn中局部变量a的值。

注意！！！

mdn 阮一峰

mdn和阮一峰的教程中指出，所有未声明的变量都是全局的。
这句话不太准确，因为没有考虑到函数嵌套的情况。

在未声明变量的情况下，子函数是可以引用父函数内的变量的，它从子函数向父函数一层层向上查找，一直找到全局作用域，找到了变量，就使用那个作用域所在的变量，如果一直没找到，就会在全局创建一个(非严格模式下)。

你不知道的javascript(上)

参考资料:

上一篇 下一篇

猜你喜欢

热点阅读