作者:Sofish Lin
原文地址:
https://fe.ele.me/guan-yu-han-shu-zuo-yong-yu-he-ji-cheng/
关于函数、作用域和继承,可以写的非常多。不过和 JavaScript 类型浅解 一样,是写给初学者看的,我们从简单的来。当然,即使用「简单」来描述,这也是 JavaScript 中最不容易懂,最容易误会的点,特别是对于没有编程经验的同学。
一、函数
声明一个函数function fn(){}
,最简单的一个方法。一个函数可以有多种形式。虽然初学看起来有点乱,不过我想说的是,你总会知道如何用的,它们除了在hositing
(后面说)表现会有一些不同,其他的都差不多, 看完就会知道如何合理地使用他们了。
1. 声明/匿名函数
当声明函数没有name
的时候,便成了匿名函数。使为 first-class object,像其他对象一样,它也可以作为值传递给一个变量。
function [name]([arg1] [, arg2] [..., argN]) {
statements
}
而在 ES6 中,我们可能会使用类似 Coffee Script 中类似的语法:
([arg1] [, arg2]) => {
statements
}
2. Function
函数构造器
new Function([arg1] [, arg2] [..., argN], statement);
上面的代码表现形式,是壳。而理解函数的重点,还在于理解函数的内涵。这个内涵指的是用{}
包起来的一切。在这个花括号乱起来的地方 —— 函数体。以上面的形式为例,我们可以直接使用的有:
- 参数:可以像变量(arg1~N)一样在函数体中使用。
- 参数对象:参数可以直接使用参数名调用,也可以按参数顺序在
arguments
这个array-like 对象中获取。 - 函数名:通常来说递归调用会用到,也可以用
arguments.callee
(函数本身) - 上下文:每一个函数体,都是一个作用域,
this
代表当前作用域上下文。
让我们直观一点,用一个代码片断来看上面的内容:
function sofish(gender, age) {
console.log(gender, age); // male, 28
console.log(sofish === arguments.callee) // true
console.log(this); // window
console.log(arguments); // ['male', 28]
}
二、作用域
作用域可以这样理解 —— 封闭的,不影响外部的空间。不过在 JavaScript 中是这样的,函数可以嵌套,也就是说使用域也可以是多级的。如果你看过吸血鬼相关的书/影响作品,可能会知道一个设定,吸血鬼在未经邀请之下是不可以进入某个人的屋内的。而作用域就是这样一个房间:外部不能访问内部变量,内部可以外部变量,Module 作用域可以使用 export 对外输出(如果有两个吸血鬼来访,你只邀请一个,那么只有一个人可以访问)。如下:
function sofish(){
var nickname = ‘小鱼’;
(function ciaocc() {
var age = 24;
// 内部函数可以访问外部 sofish() 创建作用域的变量
console.log(nickname); // '小鱼'
})();
// 但是外部函数,不能访问内嵌函数 ciaocc() 创建使用域的变量
console.log(age); // undefined
}
总的来说,在 JavaScript ES5 中,基本上只有两种形式的使用域 —— 全局/函数级使用域,换句话说,除了全局作用域,只有函数级作用域,像if
、while
、for...in
等代码块是不会创建作用域的。在 ES6(ES2015)中,块也会作用作用域,但仅限于let
定义变量。你可以试试运行这段代码:
var sofish = '小鱼';
while(sofish === '小鱼') {
var cc = 'ciaocc';
sofish = 'whatever';
let ciao = 'u cant see me';
}
console.log(cc); // 'ciaocc'
console.log(ciao); // Uncaught ReferenceError: ciao is not defined
像上面的代码都是按顺序执行的,在同一个作用域,这是比较容易理解的。不过,考虑一下下面这段代码的执行结果:
console.log(typeof sofish); // 1___
console.log(momo); // 2___
function sofish() {
var ciaocc = 'a beauty';
};
sofish();
var momo;
console.log(ciaocc); // 3___
第 1 个输出的是'function'
,第 2 个输出的是undefined
,但为什么最后一个是 Error ——ReferenceError: ciaocc is not defined
。结果似乎有点出乎意料。这里面涉及到一个概念 ——hoisting
,即函数和变量在代码解析的时候,会提到作用域的最顶端,如上面的代码,其实执行时候的浏览器看到的代码是这样的:
// 函数和变量被提到最顶端
function sofish() {
var ciaocc = 'a beauty';
};
var momo;
console.log(typeof sofish); // 1___
console.log(momo); // 2___
sofish();
console.log(ciaocc); // 3___
不过,函数和变量只会被提到所在作用域的最顶端。所以上面的函数sofish()
中的变量ciaocc
只存在所在作用域顶端,不会提到外部的顶端。这里提一个问题,函数和变量哪个在最顶部呢?考虑一下下面的三段代码执行:
console.log(sofish);
function sofish() {};
sofish = 'ciao cc';
console.log(sofish);
sofish = 'ciao cc';
function sofish() {};
console.log(sofish);
var sofish = 'ciao cc';
function sofish() {};
三、继承与构造函数
这里我推荐几篇让人更容易理解的文章:
- Javascript继承机制的设计思想
- Javascript 面向对象编程:封装、构造函数继承、非构造函数继承
讲的比较散,有问题的话,可以自己看看下面推荐的一些文章,或者留言之类,虽然基本上是写给某位看的,不过既然分享出来,我也会抽空回答一些问题。