学习周记（11.1-11.7）

本周总结：本周松懈，内容较少，下周一定要加油呀

题目

var length = 10
function fn() {
  console.log(this.length);
}

let obj = {
  length: 5,
  method: function (fn) {
    fn()   
    arguments[0]()  
  }
}

obj.method(fn, 1)

// node: undefine 2
// window: 10 2

• 对于第一处的输出，method方法由obj调用，内部this指向obj，但并不会进入fn函数内，fn内的this还是指向全局this，此时在node环境下，this.length的值为undefine，而浏览器环境下var会将变量挂在window上，所以输出10，如果想在node环境下也能输出10，则需要在加上globalThis.length = 10，这表示在node全局this中添加一个length属性，值为10。对于第二处输出，fn其实是arguments直接进行调用，所以它指向arguments，而在下方我们传入了两个参数，所以length为2，相当于以下代码。注意：数组是一种特殊的结构体

function fn() {
  console.log(this.length);
}
const arr = [fn, 1, 2]
arr[0]() // 3

• 于是，上述代码各处的this指向关系应该如下代码所示

var length = 10 // 浏览器环境下var声明的变量会自动挂载在window上
globalThis.length = 10 // node环境下在全局this上挂载变量
function fn() {
  console.log(this.length);
}

let obj = {
  length: 5,
  method: function (fn) {
    console.log(this.length) // 5 --> 指向obj
    fn()  // 10 --> 指向全局this 
    arguments[0]()  // 2 --> 指向arguments
  }
}

obj.method(fn, 1)

• 题目总结：嵌套函数中的 this 不会继承外层函数的 this 值。有两种方法可以让其‘继承’。 1、箭头函数

const fn = () => {
  console.log(this.length);
}

let obj = {
  length: 5,
  method: function (fn) {
    fn()  // undefine --> 指向全局this 
    const bar = () => {
      console.log(this.length);
    }
    bar() // 5
  }
}

obj.method(fn, 1)

2、转换为作用域

let obj = {
  length: 5,
  method: function (fn) {
    let self = this  // 转化为作用域
    function bar() {
      console.log(self.length);  // 通过self访问外部this
    }
    bar() // 5
  }
}

obj.method()