Javascript函数

2019-09-24  本文已影响0人  PrinzessinGJyao

一、创建函数的方法

1.函数声明

function functionName(arg0, arg1, arg2) {
  //函数体
}

函数声明的一个重要特征是函数声明提升(function declaration hoisting)

sayHi();
funciton satHi() {
  alert("hi")!
}

2.函数表达式

var functionName = function(arg0, arg1, arg2) {
  //函数体
};

这种情况下创建的函数叫做匿名函数(anonymous function),因为function关键字后没有标识符。

上述两种声明方法也被称为函数字面量(function literal)

3.函数对象

// 一个函数对象
new Function('FormalArgument1', 'FormalArgument2',..., 'FunctionBody');

这里使用 Function 的构造函数创建了一个新的函数并把字符串作为参数传递给它。前面的命名参数为新建函数对象的参数,最后一个参数为这个函数的函数体。
采用这种方法创建一个函数:

var add = new Function('a', 'b', 'return a + b;');

console.log(typeof add); // 'function'
console.log(add.name); // '' 或 'anonymous'
console.log(add.length); // '2'
console.log(add(20, 5)); // '25'

虽然这种函数形式有它的用处,但其相比函数字面量的方式存在一个显著的劣势,就是它是处在全局作用域中的:

// 全局变量
var x = 1;

// 局部作用域
(function() {
    // 局部变量
    var x = 5;
    var myFn = new Function('console.log(x)');
    myFn(); // 1, not 5

})();

虽然我们在独立的作用域中定义了一个局部变量,但输出结果却是 1 而非 5,这是因为 Function 构造函数是运行在全局作用域中。

二、函数作用域

一、变量初始化

二、执行环境和作用域链

每个函数都有自己的执行环境(execution context)。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。

作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象(activation object)作为变量对象。活动对象在最开始只包含一个变量,即argumens对象。

作用域链本质上是一个指向变量对象的指针列表,它只引用但不实际包含变量对象。

function createComparisionFunction(propertyName) {
    return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        
        if (value1 < value2) {
            return -1;
        }  else if (value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    };
}

// 创建函数
var compare = createComparisionFunction("name");

//调用函数
var result = compare({ name: 'Nicholas' }, { name: 'Greg' });

下图展示了当以上代码执行时,包含函数与内部匿名函数的作用域链。


匿名函数作用域链.png

三、命名的函数表达式

虽然函数表达式经常被书写为采用匿名函数的形式,但我们依然可以为这个匿名函数赋予一个明确的标识符。这个函数表达式的变种被称为一个命名的函数表达式(named function expression)

var add = function add(a, b) {
    return a + b;
};

console.log(typeof add); // 'function'
console.log(add.name); // 'add'
console.log(add.length); // '2'

var minus = function min(a, b) {
  return a - b;
}

console.log(minus.name); // 'min'

JavaScript 允许我们为匿名函数赋予一个明确的标识符,这样就可以在这个函数内部引用其本身。

var myFn = function() {
    // 引用这个函数
    console.log(typeof myFn);
};
myFn(); // 'function'

上面这段代码,myFn 这个函数可以轻松的通过它的变量名来引用,这是因为它的变量名在其作用域中是有效的。但是看下面这个例子。

// 全局作用域
var createFn = function() {

    // 返回函数
    return function() {
        console.log(typeof myFn);
    };

};

// 不同的作用域
(function() {

    // 将createFn的返回值赋予一个局部变量
    var myFn = createFn();

    // 检测引用是否可行
    myFn(); // 'undefined'

})();

这段代码中,我们创建了一个匿名的局部作用域,在其中定义了一个变量 myFn,并把 createFn 的返回值赋予这个变量。

在匿名函数执行时,标识符解析首先查找作用域的前端,然后逐级向后,本例中首先查找当前作用域,其次是createFn 的执行环境,最后是全局执行环境。变量 myFn 在一个不同的局部作用域中,在这个作用域中函数不能通过它的引用来访问它自身(因为myFn不在匿名函数执行环境的作用域链上)。因此,在这个例子中,log 函数不会返回 “function” 而是会返回一个 “undefined”。

通过为匿名函数设置一个明确的标识符,即使我们通过持有它的变量访问到它,也可以去引用这个函数自身。

// 全局作用域
var createFn = function() {

    // 返回函数
    return function myFn() {
        console.log(typeof myFn);
    };

};

// 不同的作用域
(function() {

    // 将createFn的返回值赋予一个局部变量
    var myFn = createFn();

    // 检测引用是否可行
    myFn(); // 'function'

})();

添加一个明确的标识符类似于创建一个新的可访问该函数内部的变量,使用这个变量就可以引用这个函数自身。这样使得函数可以在其内部调用自身(用于递归操作)或在其本身上执行操作。

一个命名了的函数声明同一个采用匿名函数形式的函数声明具有相同的作用域规则:引用它的变量作用域决定了这个函数是局部的或是全局的。

四、this对象

Anonymous functions are not bound to an object in this context, meaning the this object points to window unless executing in strict mode (where this is undefined).

在执行环境中,匿名函数并没有绑定到任何一个对象中,意味着this指向window(除非这个执行环境是在严格模式下执行的,而严格模式下该this指向undefined))

var  name = "The window";

var obj = {
  name: "My objet",
  
  getNameFunc: function() {
    return function() {
      return this.name;
    };
  }
};

alert(obj.getNameFunc() ()); //"The window"(非严格模式下)

参考文章

https://mp.weixin.qq.com/s/ab6Cgcq-PIXEnJxJ-6WiFg
《JavaScript高级程序设计》

上一篇 下一篇

猜你喜欢

热点阅读