对JavaScript函数的理解

JavaScript函数是JavaScript中非常重要的组成部分,JavaScript编程中,绝大部分时候都是在跟函数打交道。

一、函数调用:

函数调用在JavaScript中共有4种方法:

1、方法调用模式:

当一个函数被当作为某个对象的一个属性时,我们称之为方法。当这个方法被调用的时候,函数执行过程中的this指向当前这个对象。

var obj ={
  name:'obj',
  sayHello:function(){
    console.log('hello world,'+this.name);  //hello world,obj
  }
}
2、函数调用模式:

当一个函数不是对象的一个属性的时候,这时候直接调用就是函数调用模式。谨记,此时函数中的this指向的是全局对象,而不是外部函数的this。这时候如果需要使用外部函数的this,可以借用that变量传递下。

var add = function(num1,num2){
  return num1+num2
};
add(1,2)  //  3

var obj = {
  value:  2,
  innerAdd:  function(){
      var that = this;
      var addValue = function(){
          that.value = add(that.value, that.value)
      };
      addValue();  //  4
  }
}
3、构造器调用模式:

如果在一个函数前面带上new来调用,那么实际上将会创建一个连接到这个函数prototype成员的新对象,且this指向也会指到这个新对象上。同时,new前缀也会改变return语句的行为。

var A  =  function(name){
  this.name  =  name;
}
A.prototype.say  =  function(){
  alert('hello');  
}
var a =  new A('a');
a.say();  //  hello

//  new操作符具体做了什么?
Function.prototype.new = function(){
  //  创建一个新对象,并继承于构造函数的原型对象
  var that = Object.create(this.prototype);
  //  调用构造器函数,绑定this到新建的这个对象
  var other = this.apply(that, arguments);
  //  返回语句的表现
  return (typeof other === 'object' && other) ||  that;
}
4、Apply/Call调用模式:

apply/call方法可以让我们可以构建一串参数传递给被调用函数。允许我们选择指定this指向。apply方法会接受2个参数,第一个参数是要绑定给this的值,第二个参数是需要传递的参数数组(call功能与apply一致,只是第二个参数不是数组,而是展开独立的参数)。

var arr  =  [1,2];
add.apply(null, arr);  //  3
var obj =  {
  name:'beauty'
};
var sayName = function(){
  console.log(this.name)
};
sayName.apply(obj);  //  beauty
二、作用域:
1、变量作用域

变量的作用域无非就是2种:局部作用域和全局作用域。全局作用域就是最外层的函数范围,任何内部的函数都可以访问该变量;而局部作用域则一般在某个固定的代码片段内才能访问到。

//  全局变量
var outer = 123;
var innerfn = function(){
    console.log(outer);  
}
innerfn()  //  123
//  局部变量
var innerfn  =  function(){
  var inner = 456;
}
innerfn();
console.log(inner)  //  ReferenceError: innerVar is not defined
2、函数作用域&提前声明

在ES6之前,JavaScript之前是不像c语言一样存在块作用域的,只存在函数作用域:变量在声明他们的函数体以及这个函数体嵌套的任意函数体内都有定义的。如下代码:

function check(n){
  var a = 1;
  if(n>2){
    var b =  2;
  }
  console.log(a) ; //  1
  console.log(b);  //  undefined
}
check(1)

再来看一下变量提前声明的妙处:

function prevDef(){
  console.log(innerVar);  //  undefined
  var innerVar = 2;
  console.log(innerVar);  //  2
}
prevDef();

上面代码,可以看出,在函数体内,即使是在第二行声明的变量,在第一行访问,也只是会打印出undefined。这是因为,js引擎在解释阶段就会把所有该函数体内的变量统一提升到顶部声明,到对应地方再对这个声明的变量进行赋值。
不过,此时有必要说一下ES6中的let 和 const。与var不一样,let 和 const是支持块作用域的。而且let和const也不支持变量提升,而是会生成个临时死区,提前访问会报错。来看下代码:

function check(n){
  let a = 1;
  if(n>2){
    let b =  2;
  }
  console.log(a) ; //  1
  console.log(b);  //  Uncaught ReferenceError: b is not defined
}
check(1)
=================================
function es6Def(){
  console.log(innerVar);  //  Uncaught ReferenceError: innerVar is not defined
  let innerVar = 2;
  console.log(innerVar);  // 中断了
}
es6Def()

因此,在JavaScript中,我们应当尽可能地将变量声明放在函数体的顶部,避免一些不必要出现的问题。

3、作用域链

每一段JavaScript代码(全局代码或函数)都有一个与之关联的作用域链。这个作用域连是一个对象列表或者链表,这组对象定义了这段代码“作用域中”的变量。当JavaScript需要查找变量x的值的时候(这个过程称作“变量解析”),它会从链中的第一个对象开始查找,如果这个对象有一个名为x属性,则会直接使用这个属性的值,如果第一个对象中不存在,则会继续寻找下一个对象,依次类推。如果作用域链上没有任何一个对象含有属性x,则抛出错误(ReferenceError)异常。

不同的层级作用域上对象的分布

在JavaScript的最顶层(也就是不包含任何函数定义内的代码)=》作用域链由一个全局对象组成。
在不包含嵌套的函数体内,作用域链上有两个对象 =》第一个是定义函数参数和局部变量的对象;第二个是全局对象。
在一个嵌套的函数体内,作用域链上至少有三个对象 =》当调用这个函数时,它创建一个新的对象来存储它的局部变量,它实际上保存在同一个作用域链。

三、闭包:

作用域的好处就是内部函数可以访问定义在它们外部函数的参数和变量。闭包我们可以理解为是一个函数,一个可以访问其他函数内部变量的函数。
我们来看下代码:

function calCount() {
    var ncount = 0;
    function countAdd() {
        ncount++;
        console.log(ncount);
    }
    return countAdd;
}

var count = calCount();
count();  //  1
count();  //  2
count();  //  3

上面的countAdd就可以理解为是一个闭包。这个函数可以访问calCount函数内部的ncount变量,让其始终保持在内存中运行着。
从上面可以看出,闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来。这显然类似于面向对象编程。在面向对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联。
闭包的2个很经典的应用:

1、依赖于外部参数来返回一个操作函数:
function closure(nodes){
  for(var i = 0;i<nodes.length;i++){
     nodes[i].onclick = function(i){
        return function(){
            alert(i);
        }
    }(i)
  }
}
2、利用闭包来模拟私有化模块
var Closure = function(){
  var value = 1;
  function changeValue(flag){
    value +=  flag;
  }
  return {
    increment:  function(){
      changeValue(1);
    }
   ,decrement:  function(){
      changeValue(-1);
    }
   ,getValue:  function(){
      return value;
    }
  }
}();
Closure.getValue();  //  1
Closure.increment();
Closure.increment();
Closure.decrement();
Closure.getValue();  //  2

上面代码实现了一个简单的模块,value作为私有变量放在Closure对象里面,只能通过getValue访问,increment/decrement来修改。

3、闭包的性能考虑:

如果不是某些特定任务需要使用闭包,在其它函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时,方法都会被重新赋值一次(也就是,每个对象的创建)。

四、柯里化函数:

柯里化本质上就是将一个依赖多个输入参数的函数变为一个依赖一个参数的函数,通用的实现方式代码如下:

const currying = function(fn,...args){
  let arg = args;
  return function(...a){
    return fn.apply(null,arg.concat(a))
  }
}

主要应用场景便是:生成特定应用的函数。举个最简单的例子:

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

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,145评论 0 13
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,556评论 0 5
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,118评论 0 21
  • 今年的nba季后赛已经过去一段时间了,与去年不一样的是,去年还有拥有二少的雷霆去阻挡勇士的步伐。而今年二少中的杜兰...
    看那个帅哥阅读 336评论 1 1
  • 一 我和大表姐接近凌晨一点才到家,几乎是马不停蹄直奔向外婆的房间。外婆躺在床上,虚睁着眼,我唤了两声,她已经没有办...
    木小卯阅读 2,199评论 0 0