LuckRain7

1. 知识点

匿名函数无法从函数内部应用自身

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

this 简单讲就是：调用我的”人”在什么上下文环境，我就指向谁！！

2. 题目：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var number = 2;
var obj = {
  number: 4,

  fn1: (function () {
    var number;
    this.number *= 2;
    number = number * 2;
    number = 3;
    return function () {
      var num = this.number;
      this.number *= 2;
      console.log(num);
      number *= 3;
      console.log(number);
    };
  })(),
  db2: function () {
    this.number *= 2;
  },
};

var fn1 = obj.fn1;
var fn2 = obj.db2;

console.log(number);

fn1();
fn2();

obj.fn1();
obj.db2();

console.log(window.number);

console.log(obj.number);

3. 执行过程

var fn1 = obj.fn1;

fn1在全局执行，this 指向全局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var number = 2;
var obj = {
  number: 4,
  fn1: (function () {
    var number;
    this.number *= 2; // 指向全局变量number number=4
    number = number * 2;
    number = 3; // 函数内number = 3
    return function () {
      var num = this.number;
      this.number *= 2;
      console.log(num);
      number *= 3;
      console.log(number);
    };
  })(),
  db2: function () {
    this.number *= 2;
  },
};

var fn2 = obj.db2;

fn2 中的 this 指向全局变量

console.log(number)

打印全局变量 number

输出 ‘4’

fn1()

this 指向全局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var number = 2;
var obj = {
  number: 4,
  fn1: (function () {
    var number;
    this.number *= 2; //全局number=4
    number = number * 2; //NAN
    number = 3; //函数内number = 3
    return function () {
      var num = this.number; //全局作用域 num=4
      this.number *= 2; // 全局number = 8
      console.log(num); // 输出4
      number *= 3; // 函数内number 3*3=9(形成闭包)
      console.log(number); // 输出9
    };
  })(),
  db2: function () {
    this.number *= 2;
  },
};

fn2()

this 指向全局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var number = 2;
var obj = {
  number: 4,
  fn1: (function () {
    var number;
    this.number *= 2;
    number = number * 2;
    number = 3;
    return function () {
      var num = this.number;
      this.number *= 2;
      console.log(num);
      number *= 3;
      console.log(number);
    };
  })(),
  db2: function () {
    this.number *= 2; //全局number = 8   8*2=16
  },
};

obj.fn1()

这里执行时 执行环境是 obj，所以 this 指向 obj

this.number = obj.number

number 则是形成闭包，调用上次的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var number = 2;
var obj = {
  number: 4,
  fn1: (function () {
    var number;
    this.number *= 2;
    number = number * 2;
    number = 3;
    return function () {
      var num = this.number; // obj.number=this.number=num=4
      this.number *= 2; // obj.number =4*2=8
      console.log(num); // 打印 num=4
      number *= 3; //闭包 number=9*3=27
      console.log(number); // 打印 number=27
    };
  })(),
  db2: function () {
    this.number *= 2;
  },
};

obj.db2()

this 指向obj

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var number = 2;
var obj = {
  number: 4,
  fn1: (function () {
    var number;
    this.number *= 2;
    number = number * 2;
    number = 3;
    return function () {
      var num = this.number;
      this.number *= 2;
      console.log(num);
      number *= 3;
      console.log(number);
    };
  })(),
  db2: function () {
    this.number *= 2; // obj.number=this.number=8*2=16
  },
};

console.log(window.number)

打印 16

console.log(obj.number)

打印 16

参考链接


博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

点个赞吧

如果您喜欢我的文章，希望能够关注我的微信公众号 RainCode，您的关注是莫大的鼓励 ❤