导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

写法、类型

函数声明

function 函数名(参数) {
  // 执行语句
}

⭐️ 函数表达式（有名）

• 函数表达式右侧函数有函数名，也会被系统忽略。外部无法调用，内部可以调用

var test = function test1() {
  console.log(test1.name); // test1 内部可见
}

console.log(test.name); // test1

test(); // 可执行
// test1(); // 报错，test1函数外部不可见

函数表达式（匿名）

// 整体是个匿名函数表达式，function匿名函数这个值，这个整体是字面量
var test = function() {
  var a = 1, b = 1; // 推荐
  // var a = b = 1; // 不推荐，此时的 b 并没有被 var ，b 为全局变量
}

var a = 10; // 10 这个值就是字面量

var a = function b() {
  console.log(a, b); // [Function: b] [Function: b]
  console.log(a.name, b.name); // b b
}
a();

形参、实参

function test(a, b) { // a, b 是形参

}
test(1, 2); // 1, 2 是实参

⭐️ 形参、实参个数可以不相等

• arguments.length 是 实参个数
• [function name].length 是 形参个数

function test(a, b, c) {
  console.log(arguments.length); // 实参有 2 个：1 跟 2
  console.log(test.length); // 形参有3个：a, b, c
}
test(1, 2);

(function() {}).length;             // 0

实参求和

function sum() {
  return [...arguments].reduce((total, cur) => total += cur, 0);
}

sum(1, 2, 3);

⭐️ arguments

• 函数内部可以修改实参的值
• 实参如果没有传入的形参，则这个形参在函数内部无法赋值

function test(a, b) {
  a = 3;
  console.log(arguments[0]); // 值为3，修改形参会影响 arguments 映射的值

  b = 2;
  console.log(arguments[1]);
  // 值为undefined，由于没有传入形参对应的实参，导致更改形参无法改变 arguments 中对应的值
}

test(1);

return

• 终止函数的执行，return 后边的语句不会被执行
• 返回相应的值

function test() {
  console.log('1'); // 1
  return 123; // test函数返回123
  console.log('2'); // 未被执行，不会打印
}

⭐️ 函数参数默认值

• 函数参数默认值：undefined
• 可以在定义形参时赋值默认值

function test(a, b) {
	console.log(a, b); // 1, undefined
}
test(1);

function test(a = 1, b = 2) {
  console.log(a, b); // 1, 2
}
test();

• 不想传的值，可用 undefined 占位代替

function test(a = 1, b) {
  console.log(a, b); // 1, 2
}
test(undefined, 2);

• 兼容IE等旧版本浏览器

function test(a, b) {
  var a = typeof(arguments[0]) !== 'undefined' ? arguments[0] : 1;
  var b = typeof(arguments[1]) !== 'undefined' ? arguments[1] : 2;
  console.log(a, b);
}
test();

⭐️ 预编译

⭐️ 运行过程

1. 通篇检查是否有语法错误，有则直接抛错，不执行任何语句
2. 预编译
3. 解释一行，执行一行

变量提升

• 变量只把声明提升，赋值不提升
• 函数
  • 函数声明：整体提升
  • 函数表达式：只提升变量，字面量不提升

test(); // 1
function test() {
	console.log(1);
}

console.log(a); // undefined
var a;

隐式全局变量 Implicit global variable

• 没有声明（没写var）就赋值的变量
• 全局声明或者不声明（没写var）得变量都会挂在 window 上

function test() {
  var a = b = 1;
}

test();
console.log(b); // 1 (b挂在了window，因为没有var声明)
console.log(window.b); // 1
console.log(a); // ReferenceError: a is not defined
console.log(window.a); // undefined

⭐️ AO（activation object）活跃对象，函数上下文

1. 寻找形参和变量声明（没用 var 声明的变量不提升变量名，不声明 var 的变量被修改，当前作用域有此变量的，优先修改此作用域内的变量）
2. 实参值赋值给形参
3. 寻找函数声明并赋值
4. 执行

function test(a) {
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
  var b = function() {}
  console.log(b);
  function d() {}
}
test(2);
// function a() {}
// 1
// 1
// function() {}
AO = {
  a: undefined ->
     2 ->,
     function a(){} ->
     1,

  b: undefined ->
     function() {},

  d: function d() {}
}

function test(a, b) {
  console.log(a);
  c = 0;
  var c;
  a = 5;
  b = 6;
  console.log(b);
  function b() {}
  function d() {}
  console.log(b);
}
test(1, 2);
 // 1
 // 6
 // 6
AO = {
  a: undefined ->
      1 ->
      5,

  b: undefined ->
      2 ->
      function b() {} ->
      6,
  c: undefined ->
      0,
  d: function d() {}
}

没用 var 声明的变量不会有变量提升

console.log(a);
a = 2;

// 答案:

// ReferenceError: a is not defined

// vs
console.log(a);
var a = 2;

// 答案:

// undefined

function test() {
  console.log(a);
  a = 2;
}
test();

// 答案:

// ReferenceError: a is not defined

// vs
function test() {
  console.log(a);
  var a = 2;
}
test();

// 答案:

// undefined

代码块、if 语句中，通过 var 声明的变量，会提升到外层作用域（也就是里外共享 var 声明的变量）

console.log(a);
if (true) {
  a = 2;
}

// 答案:

// ReferenceError: a is not defined

// vs

console.log(a);
if (true) {
  var a = 2;
}

// 答案:

// undefined

// ----------

var a = 1;

{
  a = 3;
  console.log(a);
  var a;
}

console.log(a);

// 答案:

// 3  3

function test() {
  console.log(a);
  if (true) {
    a = 2;
  }
}
test();

// 答案:

// ReferenceError: a is not defined

// vs
function test() {
  console.log(a);
  if (true) {
    var a = 2;
  }
}
test();

// 答案:

// undefined

{
  a = 3;
}

console.log(a);

// 答案:

// 3 (a 不会提升 但会执行，挂载在 window 下)

// vs
console.log(a);
{
  a = 3;
}

// 答案:

// ReferenceError: a is not defined

// vs
{
	var a = 3;
}

console.log(a);

// 答案:

// 3

// ----------------------

if (true) {
  a = 3;
}
console.log(a);

// 答案:

// 3

// vs
if (false) {
  a = 3;
}
console.log(a);

// 答案:

// Uncaught ReferenceError: a is not defined

// ----------------------

if (true) {
  var a = 3;
}
console.log(a);

// 答案:

// 3

// vs

if (false) {
	var a = 3;
}
console.log(a);

// 答案:

// undefined

GO（global object）全局上下文

1. 寻找变量
2. 寻找函数声明
3. 执行

GO === window

var a = 1;
**function a() {**
	console.log(2);
}
console.log(a);

*//* 答案:

// 1

GO = {
	a: undefiend ->
  	 function a(){} -> 
     1
}

console.log(a, b);
function a() {}
var b = function() {};

// 答案:

// function a() {} undefined
GO = {
	b: undefined,
  a: function a() {}
}

function test() {
	var a = b = 1;
  console.log(a);
}

test();

// 答案:

// 1

GO = {
	b: 1
}

AO = {
	a: undefined ->
  	1
}

var b = 3;
console.log(a);
function a(a) {
	console.log(a);
  var a = 2;
  console.log(a);
  function a() {}
  var b = 5;
  console.log(b);
}

a(1);

// 答案:

 // function a(a) {}
 // function a() {}
 // 2
 // 5

GO = {
	b: 3
  a: function a() {}
}

AO = {
	a: undefined ->
  	 1 ->
  	 function a() {} ->
		 2,
  b: undefined ->
     5
}

AO = {
	b: undefined ->
  	 5
}

a = 1;
function test() {
	console.log(a);
  a = 2;
  console.log(a);
  var a = 3;
  console.log(a);
}
test();

// 答案:

 //undefined
 // 2
 // 3

GO = {
	a: undefined ->
  	 1,
  test: function test() {}
}
AO = {
	a: undefined ->
  	 2 ->
  	 3
}

function test() {
	console.log(b);
  if (a) {
  	var b = 2;
  }
  c = 3;
  console.log(c);
}
var a;
test();
a = 1;
console.log(a);

// 答案:

// undefined
// 3
// 1

GO = {
	test: function test() {},
  a: undefined ->
      1,
  c: 3
}

AO = {
	b: undefined
}

⭐️ if、代码块陷进

假定 if 中有一个函数声明 function a() {}

⭐️ arguments