JavaScript基础知识点解读—函数

说起ECMAScript中什么最有意思,我想那莫过于函数了——而有意思的根源,则在于函数实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。

如何理解函数是对象?

JavaScript基础知识点解读—对象这篇文章的后半部分已经介绍过JavaScript中函数和对象之间的关系。

创建函数

有三种基本的函数创建方式。

// 1 使用function声明
function add(num1, num2) {
  return num1 + num2;
}

// 2 函数表达式
var add = function(num1, num2) {
  return num1 + num2;
}

// 3 使用new Function创建
var add = new Function("num1", "num2", "return num1 + num2"); //不推荐

创建函数的时候一定要理解在JavaScript中函数没有重载

什么是重载?

面向对象编程语言的三大基本特征:封装,继承和多态。

实现多态的两种方式:
覆盖(重写),子类重新定义父类中的虚函数
重载,是指允许存在多个同名函数,而这些函数的参数表不同(或许参数个数不同,或许参数类型不同,或许两者都不同)。

更多的面向对象语言的特性就不做更多的解释。一定要记住JavaScript中没有重载。为什么?因为使用function声明的函数后面声明的函数会把前面声明的函数覆盖掉,同一个函数名只保留一个最后一个定义的函数体。使用var声明的函数表达同样存在覆盖的情况,看下面例子。

// 1 使用function声明函数
function addSomeNumber(num) {
  return num + 100;
}
function addSomeNumber(num) {
  return num + 200;
}
var result = addSomeNumber(100); // 300

// 使用函数表达式
var addSomeNumber = function(num) {
  return num + 100;
};
addSomeNumber = function(num) {
  return num + 100;
};
var result = addSomeNumber(100); // 300
函数声明和函数表达式

思考!函数声明和函数表达式有什么区别?

函数声明有函数提升的作用,即解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问)。至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

// 函数声明
sum(10, 10); // 20
function sum(num1, num2) {
  return num1 + num2;
}

// 函数表达式
sum(10, 10); // 报错 Uncaught TypeError: sum is not a function
var sum = function(num1, num2) {
  return num1 + num2;
}
作为值的函数

在ECMAScript中,函数名本身就是变量,所以函数也可以作为值来使用。比如下面的程序。

function callSomeFunction(someFn, someArgument) {
  return someFn(someArgument);
}

function add10(num) {
  return num + 10;
}

var result = callSomeFunction(add10, 10);
console.log(result); // 20

这里记住函数名也是变量,和普通变量的区别是在函数名变量后面加上“()”后可以执行即可。

函数内部属性

在函数内部有两个特殊的对象:argumentsthis

arguments,是一个类数组对象,它里面存的是传入函数中的所有参数。这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。请看下面这个非常经典的阶乘函数。

function factorial(num) {
  if(num <= 1) {
    return 1;
  } else {
    return num * factorial(num - 1);
  }
}

定义阶乘函数一般都要用到递归算法;如上面的代码所示,在函数有名字且名字以后也不会变的情况下,这样定义没有问题。问题是这个函数的执行与函数名factorial紧紧耦合在了一起。想要消除这种紧密耦合的现象,可以像下面这样使用arguments.callee。

function factorial(num) {
  if (num <= 1){
    return 1;
  } else {
    return num * arguments.callee(num - 1);
  }
}

使用arguments.callee到底有什么作用呢?请看下面的程序。

var trueFactorial = factorial;
factorial = funciton() { return 0; };
console.log(trueFactorial(5)); // 120
console.log(factorial(5)); // 0

将factorial函数的指针赋值给trueFactorial 后,即使原函数factorial被重新定义,函数trueFactorial依然可以实现阶乘的功能。

this,是函数内部的另一个特殊对象。this引用的是函数据以执行的环境对象。说到this,顿时感觉有说不完的话要表达了。

思考!在程序执行的过程中,this到底指向(代表)了什么?

请看下面的程序,程序有些长,也可以先看下面this指向的规律后再分析程序。

// 1
var color = "red";
var obj = {
  color: "blue"
};
function getColor() {
  console.log(this.color);
};
getColor(); // "red"
obj.getColor = getColor;
obj.getColor(); // "blue"

// 2
function colorFull() {
  var color = "yellow";
  function getColor() {
    console.log(this.color);
  }
  getColor(); // "red"
}
colorFull();

// 3
var name = "window";
var object = {
  name: "object",
  sayName: function() {
    function innerFunction() {
      console.log(this.name); // "window"
    }
    innerFunction();
    return function() {
      console.log(this.name); // "window"
    }
  }
}
object.sayName()();
// 4
var obj = {
  value: 37,
  fun: function() {
    return this.value;
  }
}
var fun1 = obj.fun;
console.log(fun1()); // undefined
// 原型链中的this
var obj = {
  a: 2,
  b: 5,
  fun: function() {
    return this.a + this.b;
  }
}
var o = Object.create(obj);
o.a = 1;
o.b = 2;
console.log(o.fun()); // 3
// 构造函数中的this
function C() {
  this.a = 1;
}
var o1 = new C();
console.log(o1.a); // 1

function C2() {
  this.a = 2;
  return {a: 3}
}
var o2 = new C2();
console.log(o2.a); // 3 好诡异

从上面的程序中我们可以得出使用this的几条规律。

1. this的指向是在函数执行时候确定的。

2. 函数如果有直接调用者对象(如object.fun()),那么函数内部的this执行该调用者对象(即object);如果函数没有直接调用者对象,那么函数内部的this对象指向的是window对象。原型链中的方法的this仍然指向调用它的对象

3. 构造函数的this与被创建的新对象绑定,当构造器返回的默认值是一个this引用的对象是,可以手动设置返回其他的对象,如果返回值不是一个对象,则返回this。

上面是在es5中this的使用,在es6中新增了箭头函数。箭头函数中的this指向与上述有所不同。请看下面的程序。

var name = "window";
var object = {
  name: "objcet",
  sayName: function() {
    return () => {
      console.log(this.name); // "object"
    }
  }
}
object.sayName()();

var anotherObject = {
  name: "anotherObject"
}
/*
object.sayName()执行完后返回的箭头函数里面的this已经指向了object,此处的this已经固定不会被更改了
*/
object.sayName().call(anotherObject); // "object"

/*
object.sayName只是一个函数指针,该函数并未执行,其内部嵌套的箭头函数中的this
*/
object.sayName.call(anotherObject)(); // "anotherObject"

上面的es6中的箭头函数转换成es5,其实是下面这样的。

var name = "window";
var object = {
  name: "object",
  sayName: function() {
    var _this = this;
    return function() {
      console.log(_this.name);
    }
  }
}

箭头函数不绑定this,它会捕捉其所在(即定义的位置)上下文的this值作为自己的this值

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base; // 此时已经确定了this的值即adder
    return f(a);
  }
  addThruCall: funcntion(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    }
    return f.call(b, a);
  }
};
console.log(adder.add(1)); // 2
console.log(adder.addThruCall(1)) // 仍然 2,其内部的this并没有因为call() 而改变,其this值仍然为函数inFun的this值,指向对象adder

call(), apply(), bind()方法对于箭头函数来说只是传入参数,并不影响this的值。

参考文章

this 指向详细解析(箭头函数)

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

推荐阅读更多精彩内容