【JS脚丫系列】一道经典的this面试题（复杂度两颗星）

一道经典的this面试题（复杂度两颗星）

【JS脚丫系列】

• 【JS脚丫系列】一道经典的this面试题（复杂度两颗星）
• 【JS脚丫系列】严格模式"use strict";
• 【JS脚丫系列】JS基础知识脉络 By 吃码小妖
• 【JS脚丫系列】重温闭包
• 【JS脚丫系列】重温bind

看一道题，控制台打印出来的值是什么？

var number = 5;
var obj = {
    number: 3,
    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);
        }
    })()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

下面的分析过程由我（吃码小妖）捋了一遍。

有一点点绕，能判断过程就可以了。

【01】首先匿名自执行函数运行后，变为

var number = 5;

var obj = {

  number: 3,

  fn1: function () {

​    var num = this.number;

​    this.number *= 2;

​    console.log(num);

​    number *= 3;

​    console.log(number);

  }

}

此时：

this.number *=2 ;//this为window，所以window.number =10;

number = number*2; //那么，number 为NaN

number= 3;//number为3。

SO：

window.number =10

number =3

【02】var fn1 =obj.fn1;

那么 fn1 就是 function(){ var num = this.number; //...}

【03】fn1.call(null) ;

如果将 null 或者是 undefined 作为 this 的绑定对象传入 call、apply 或者是 bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。

等同于运行下面的函数：

function () {

  var num = window.number;

  window.number *= 2;

  console.log(num);

  number *= 3;

  console.log(number);
}

然后：

var num = window.number;//num =10;

window.number *= 2; // window.number = 20;



console.log(num); //10

number *= 3; //3*3 = 9;

console.log(number);//9

SO：
num =10;
number =9;
window.number =20;

输出了10,9

【04】obj.fn1();

等同于运行：

fn1: function () {

​    var num = this.number;

​    this.number *= 2;

​    console.log(num);

​    number *= 3;

​    console.log(number);

}

此时：this为obj对象。

 var num = this.number; // num = 3;
​    this.number *= 2; //obj.number*2=6
​    console.log(num);//3
​    number *= 3;// number = 27;
​    console.log(number);//27

【05】console.log(window.number);

输出20即可。

【06】最后结果：

//10
//9
//3
//27
//20

觉得这题很不错，考察了多个知识点。所以推荐给大家。