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

吃码小妖

一道经典的this面试题(复杂度两颗星)

【JS脚丫系列】

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

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

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

阅读 1.1k

脚丫系列
吃码小妖的学习之旅
43 声望
3 粉丝
0 条评论
你知道吗?

43 声望
3 粉丝
文章目录
宣传栏