单元二之第四章函数执行this指向及概念

总结

1. 当一个函数被调用,这个函数执行上下文被设置并添加到堆栈(call stack)中
2. 执行上下文的工作方式,直到完成一个函数不会从中删除 => 调用堆栈和执行啥下文任然存在

this

1. this 的值取决与什么?

• 取决于函数的调用方法 => 并将 this 的值设置为执行上下文所属的对象

代码

// 输出
/**
 * undefined
 * 10
 * undefined
 * 100
 * 110
 */

// 0. `第一阶段:创建阶段` 设置全局执行上下文
//  扫描var,function关键字
// 0-1-1 给变量sum 添加值,这个值这个函数
var sum = function () {
  // 1. 添加一个新的执行上下文到堆栈(call stack)中
  // 1-1 `第一阶段:创建阶段` 设置函数执行上下文
  // 扫描var,function关键字
  // 1-1 进入`第二阶段:执行阶段:逐行执行`
  console.log(num);
  var num = 10;

  // 注意:这是个函数声明而不是函数表达式 => 所以函数声明建立在内存(是memory 不是Heap)中

  function getNewNum() {
    // _注意:_ 这个newNum和外边执行上下文不同,因为这是一个不同的执行环境 => 这是一个新的内存
    // 3-1 newNum在内存中设置,被设置为未定义,在这个执行上下文中这只newNum值(value)为100
    var newNum = 100;
    console.log(newNum);
    // 3-2 将newNum变量放在执行上下文(execution context)中
    // _原因:_ 因为从这个函数返回,执行上下文从调用栈中移除
    return newNum;
  }
  console.log(num);
  console.log(newNum);
  // 2-1 调用getNewNum函数
  // 2-1添加一个新的执行上下文(getNewNum)到堆栈(call stack)中
  // 3-3 这里获取到放在执行上下文的值
  var newNum = getNewNum();
  // 4-1 执行clog代码: 打印(num+newNum)
  console.log(num + newNum);
};
// 0-2-1
// `第二阶段:执行阶段`
// _注意:_ 全局对象已经设置,在本列中为window
// _注意:_ 调用之前,在调用堆栈上拥有的是全局执行上下文
sum();

// this的指向
//
var sum = function () {
  console.log(num);
  var num = 10;
  //指向windos
  console.log(this);
  function getNewNum() {
    var newNum = 100;
    console.log(newNum);
    // 指向window
    console.log(this);
    return newNum;
  }
  console.log(num);
  console.log(newNum);
  var newNum = getNewNum();
  console.log(num + newNum);
};

sum();