Javascript 学习笔记1

该笔记记录学习网站udemy的understanding javascript 课程

 

1. 函数 (function)

Everything is object or primitive type. 一切都是对象或者原始数据。

javascript里，可为函数分配给一个变量。函数也可作为变量传入另一个函数，或者当做变量作为函数返回值。

var myVar = function() {
   console.log('Hello');  
};

myVar();

function a(){
  
 return function b() {
 };

}

 

 

2. 数组 ： 是各种数据的集合，可以是函数，对象以及primitive type

var a = [ false, 
              0, 
              'hello',
               function add() { 
                var test = 0; 
              },
              { name: 'first'}
           ]

 

3. 运行上下文 (execution context)

用()运行函数

引擎运行代码时，分为两步：

1. 创建阶段：创建 global object, 'this' 以及 outer environment，为变量初始化为undefined, 为函数分配内存.

 全局运行上下文是所有代码运行的基础，它含有Global object 以及 this (=window), 而这些是javascript引擎自动产生。

outer environment 是指此运行上下文所指向的外部环境

2. 运行代码阶段

b();           //运行函数b， 输出 'Hello'
console.log(a); //运行代码, 输出初始值undefined

//为函数分配内存
function b() {
  console.log('Hello');
} 

var a = 'test';  //运行阶段，为变量分配值 test
console.log(a);  //运行阶段，输出 test
console.log(c);  //运行阶段，在内存未找到变量c, 报错

// 输出:
Hello // 运行函数b
undefined  // 初始化为undefined
test  //分配a值
报错// 变量c不存在内存里

 

4. 运行栈 (execution stack)

function b() {                       
}                                    

function a() {                 
  b();
}

a();

进入运行栈的顺序为: 全局运行上下文，运行函数a上下文，运行函数b的上下文

函数运行完后，就从运行栈里移除. 输出运行栈的顺序为：b() -> a() -> global

 

5. 作用域链 (scope chain)

函数运行时，此运行上下文里含有一个outer environment，它指向声明此函数的作用域 

当遇到不在此函数域里的变量时，会通过outer environment去它外面一层的作用里找此变量，如果还是找不到，则继续通过此层作用域里的outer environment，以此直到global context.

tip: 一定是声明函数的作用域，不是运行此函数的作用域

例子1: 

//全局作用域 global scope
//声明函数b
function b() {
 //函数b 作用域
 console.log(myVar);
}

function a() {
//函数a 作用域
 var myVar = 2;

  b(); //运行b
}

var myVar = 1;

a(); 

output 1

函数 b 在全局作用域声明的，它里面的myVar应该就是全局的 1 而不是 a 作用域的2

 

例子2：将函数b的声明挪进入函数a中

function a() {
    var myVar = 2;

    function b() {
     console.log(myVar);
    }

    b();
}

var myVar =1;

a();

此次输出为 2. 函数b中的myVar是指向a的作用域的变量

 

6. IIFE 

var firstname = 'John';

(
// anonymous function expression 匿名函数
function (name) {
  var greeting = 'hello';
  console.log(greeting + firstname);
}(firstname) //immediately invoke function 

);

 

7. 闭包 (closure)

例子1

function greeting(whattosay) {

  return function (name) {
     console.log( whattosay + name);
  }

}
var greet = greeting('Hi');  

// 函数greeting运行完后，它的运行上下文就从运行栈里移除
// 函数greet 运行上下文里的outer environment仍然可以找到greeting里的变量
// 闭包就是解释此现象: 不管函数何时何地运行，也不管外部函数的运行情况，它都可以找到外部函数的变量
                            
greet('Tony');

 

例2: 函数里有外部环境的变量时，变量的值是指运行该函数时的值，而不是初始值。

function buildFunction() {
  var arr = [];

  for(var i = 0; i < 3; i++) {
   
   arr.push(function() {
      console.log(i);
   });
 }
}

var fs2 = buildFunction();

fs2[0]();
fs2[1]();
fs2[2](); 


output: 
3
3
3

function buildFunction() {
  var arr = [];

  for(var i = 0; i < 3; i++) {
   
   arr.push((function(j) {
        return function(){
            console.log(j);
       }
   }(i)));
 }
}

var fs2 = buildFunction();

fs2[0]();
fs2[1]();
fs2[2](); 

output:
0
1
2

 

闭包的使用好处： function factories

function makeGreeting(language) {

  return function (firstname, lastname){
    if (language === ''en) {
      console.log('Hello ' + firstname + lastname);
     }

     if (language === 'es') {
      console.log('Hola ' + firstname + lastname);
     }
   }

}

var greet = makeGreeting('en');
var greetSpanish = makeGreeting('es');

 

8. 闭包与回调函数 (callback) 

callback function:  a function you give to another function, to be run whe the other function is finished

function tellMeWhenDone(callback) {
  var a = 1000;
  var b = 2000;

  callback(); //回调函数, it runs that function I give
}

tellMeWhenDone(function() {
 console.log('All done!');
});