关于函数、作用域和继承

作者：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 面向对象编程：封装、构造函数继承、非构造函数继承

讲的比较散，有问题的话，可以自己看看下面推荐的一些文章，或者留言之类，虽然基本上是写给某位看的，不过既然分享出来，我也会抽空回答一些问题。

Function and Function Scope
ECMAScript 5 Strict Mode, JSON, and More
Named function expressions demystified

关于函数、作用域和继承

一、函数

二、作用域

三、继承与构造函数

你可能感兴趣的:(关于函数、作用域和继承)