Javascript函数

一、创建函数的方法

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高级程序设计》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 函数、对象 一. 目标 使用arguments获取函数的所有参数 arguments是一个伪数组,可以暂且作为一个...
    白小白不姓白阅读 213评论 0 1
  • JavaScript笔记(三) 函数 理解函数 Javascript函数的参数与大多数其他语言中的函数的参数不同。...
    运维开发笔记阅读 268评论 0 0
  • 在JavaScript中,函数即对象,程序可以随意操控它们。比如,JavaScript可以把函数赋值给变量,或者作...
    kissLife阅读 897评论 0 0
  • 1. 函数声明和函数表达式有什么区别? 函数声明定义函数,关键字FUNCTION加函数名:function cou...
    书中有凉气阅读 658评论 0 49
  • 函数函数定义与调用变量作用域全局变量方法高阶函数闭包箭头函数$generator$ 函数 函数定义与调用 定义函数...
    染微言阅读 577评论 0 5