JS函数与作用域

2017-05-26  本文已影响0人  LeeoZz

函数声明和函数表达式是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')
}

在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,并没有重载这个概念,但我们可以用另外一种方法实现这个功能:

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

 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;
上一篇 下一篇

猜你喜欢

热点阅读