【前端面试题】this指向（二）

this是对当前对象的引用：

        1 事件中 ->谁的事件this->谁

        2 定时器 ->window

        3 对象中 ->谁.方法this->谁

        4 构造函数中 ->实例化对象

        5 普通函数中 ->window

昨天写完了前三条面试题，如果感兴趣可以点击如下链接跳转到我昨天写的前端面试题this指向的前三题：【前端面试题】this指向（一）

我们接着往下写：

第四题

原题

//第四题
var o={
    f1:function(){
        console.log(this);
        var f2=function(){
            console.log(this);
        }();
     }
}
o.f1();

运行结果

讲解

第一个this指向当前的类Object：f1

第二个this指向window，因为f2是一个普通函数，普通函数的this指向window

如果想让第二个this指向f2,简单的使用Call方法即可，使用方法如下：

        //第四题
        var o = {
            f1: function () {
                console.log(this);//object
                var f2 = function () {
                    console.log(this);//window
                }();
            }
        }
        o.f1();

        // //改变this指向 使用call方法
        // var o = {
        //     f1: function () {
        //         console.log(this);//object:f1
        //         var f2 = function () {
        //             console.log(this);
        //         }.call(this);//使用call方法改变this指向,this这次就指向object:f1
        //     }
        // }
        // o.f1();

 this指向改变后的结果：

第五题

原题

//第五题
window.a=20;
var obj={
    a:30,
    add:function(){
        this.a+=1
        console.log(this.a);
    }
}
obj.add();
var foo=obj.add;
foo();

运行结果

讲解

我们为了方便理解，在this.a的前面加一个this的输出：

        //第五题
        window.a = 20;
        var obj = {
            a: 30,
            add: function () {
                this.a += 1
                console.log(this);
                console.log(this.a);
            }
        }
        obj.add();
        var foo = obj.add;
        foo();

运行结果如下：

由此可以看出obj.add();这个调用了当前对象下的add方法，所以this指向当前对象，当前对象是obj，所以第一个console.log输出的是obj,第二个console.log输出的是obj.a=31

我们var了一个方法，把obj.add的方法体给了foo,foo();就相当于window.foo();所以第一个this指向window，this.a就是window.a=20+1=21

改进后的代码：

 //第五题
        window.a = 20; 
        var obj = {
            a: 30,
            add: function () {
                this.a += 1
                console.log(this);
                console.log(this.a);
            }
        }
        //obj.add();这个调用了当前对象下的add方法，所以this指向当前对象，当前对象是obj，所以第一个console.log输出的是obj,第二个console.log输出的是obj.a=31
        obj.add();
        //我们var了一个方法，把obj.add的方法体给了foo,foo();就相当于window.foo();所以第一个this指向window，this.a就是window.a=20+1=21
        var foo = obj.add;
        foo();

第六题

原题

//第六题
window.name="ByteDance";
function A(){
    this.name=123
}
A.prototype.getA=function(){
    console.log(this);
    return this.name+1;
}
let a=new A();
let funcA=a.getA;
funcA();

运行结果

讲解

this指向window

this.name+1用了字符串拼接，this.name=window.name=ByteDance，所以this.name+1=ByteDance1

//第六题
        window.name = "ByteDance";
        function A() {
            this.name = 123
        }
        A.prototype.getA = function () {
            console.log(this);//window
            return this.name + 1;//这个this指向// ByteDance1
        }
        let a = new A();//已经实例化对象
        let funcA = a.getA;//把函数赋给funcA
        //this指向在调用的时候确定
        //funcA();
        console.log(funcA());

第七题

原题

//第七题
var number=1;
var obj={
    number:2,
    getNum:function(){
        var number=6;
        return this.number;
    }
}
var getNum=obj.getNum;
console.log(getNum());
console.log(obj.getNum());
console.log(obj.getNum.call());
console.log(obj.getNum.call({number:7}));

执行结果

解析

//第七题   
        var number = 1;
        var obj = {
            number: 2,
            getNum: function () {
                var number = 6;//局部变量，不指向window
                return this.number;//this指向window
                //return number;// 6 6 6 6
            }
        }
        var getNum = obj.getNum;
        console.log(getNum());//1
        console.log(obj.getNum());//2 this指向Object：this.number=2
        console.log(obj.getNum.call());//1 this指向window call指向当前作用域下的对象
        console.log(obj.getNum.call({ number: 7 }));//7

 

欢迎点赞、关注、收藏~

各自攀登，山顶相见！