美文网首页
Javascript函数

Javascript函数

作者: PrinzessinGJyao | 来源:发表于2019-09-24 21:39 被阅读0次

一、创建函数的方法

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 构造函数是运行在全局作用域中。

二、函数作用域

一、变量初始化

  • 创建变量的过程(初始化)和给变量赋值的过程(声明)是被 JavaScript 解析器分开执行的。
  • 在创建一个函数时,会创建一个预先包含全局变量对象的作用域链,这个作用域链被保存在内部的[[]Scope]]属性中。
二、执行环境和作用域链

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

  • 每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中。

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

  • 当一个函数被调用时,会为函数创建一个执行环境,然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。此后,使用argumens和其他命名参数的值来初始化函数的活动对象(activation object)并将其推入执行环境作用域链的前端。

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

  • 标识符解析是沿着作用域链一级一级地搜索标识符的过程。
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高级程序设计》

相关文章

  • Javascript 函数缺省值

    Javascript 函数 Javascript 函数缺省值写法

  • JavaScript函数式编程

    读完《JavaScript函数式编程》《JavaScript函数式编程指南》这两本书,对JavaScript函数式...

  • JavaScript函数式编程

    读完《JavaScript函数式编程》《JavaScript函数式编程指南》这两本书,对JavaScript函数式...

  • JavaScript函数

    layout: posttitle: JavaScript函数tags: [JavaScript, 函数]auth...

  • JavaScript encodeURI() 函数

    JavaScript encodeURI() 函数 JavaScript 全局函数](https://www.ru...

  • JavaScript中的函数

    @(javascript)[js函数] [toc] JavaScript中的函数 函数的分类与定义函数的方式 Ja...

  • JavaScript语言基础(二)

    JavaScript内置函数,这些函数都是由JavaScript语言自身提供,是JavaScript全局方法。pa...

  • JavaScript - 函数 - 1

    #JavaScript 函数定义 JavaScript 使用关键字 function 定义函数。函数可以通过声明定...

  • 2016-11-24

    JavaScript escape() 函数 JavaScript 全局对象 定义和用法:escape() 函数可...

  • JS 函数

    JavaScript 函数定义 JavaScript 使用关键字 function 定义函数。函数可以通过声明定义...

网友评论

      本文标题:Javascript函数

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