前端面试题：谈谈This指向

最新推荐文章于 2024-05-06 15:12:59 发布

ღ故里᭄ꦿ࿐

最新推荐文章于 2024-05-06 15:12:59 发布

阅读量995

点赞数 4

分类专栏：三大基础面试题库个人总结文章标签：面试 javascript

本文链接：https://blog.csdn.net/Hunt_bo/article/details/107712422

版权

个人总结同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

三大基础

26 篇文章 4 订阅

订阅专栏

面试题库

11 篇文章 9 订阅

订阅专栏

除了那个闭包的输出问题，另一个让人头疼的，非This的指向问题莫属了，this有时候真的是把人搞得蒙蒙的，但是究竟如何this的指向呢，今天上午也是探索了一番。

首先要说的是，this的指向在函数定义的时候是确定不了的，只有当函数执行的时候，才知道this到底指向谁，实际上this最终的指向是那个调用它的对象。

举个例子：

function fn(){
    console.log(this);
}

当面试官给了这么一个函数去问this的指向的时候，虽然平时一些面试问题说不知道很减分，但是这个问题说不知道肯定不减分，因为函数没有执行的时候，它的指向确实是不确定的。

下面就介绍一下常用的一些情况下的this指向。

普通函数中的This

以上面的函数为例，普通函数的直接调用，例如fn的直接调用，就像下面的代码一样，和上面就一点点的区别就是直接调用了函数，这时候的this指向全局对象window。

function fn(){
    var user = "hunt_bo";
    console.log(this.user); //undefined
    console.log(this); //Window
}
fn();

按照我们上面说的this最终指向的是调用它的对象，这里的函数fn实际是被Window对象所点出来的，下面的代码就可以证明。和上边是一样的效果，区别就是我们定义的一些变量函数，其实是在给window添加属性。

function fn(){
    var user = "hunt_bo";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.fn();

构造函数中的This

function Person(age, name) {
    this.age = age;
    this.name = name
    console.log(this)  // 此处this分别指向Person的实例对象p1和p2
}
var p1 = new Person(15, '张三')
var p2 = new Person(18, '李四')

在构造函数中，它的this始终指向构造函数构造出来的实例，结合前面所分享的原型里边的知识，在构造函数中直接打印this.__proto__.constructor，就会直接打印构造函数自己，有兴趣的话可以试一下。

对象方法中的This

 var obj = {
     fn: function () {
         console.log(this); // obj
     }
}
obj.fn();

对象方法调用的时候，此时this指向该方法所属的对象，就是说fn是obj的一个方法，那么当通过obj.fn调用的时候，方法中的this指向的是obj对象。

事件绑定中的This

<body>
    <button id="btn">text</button>
<script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        console.log(this);
    }
</script>
</body>

在事件绑定中的this，指向的是绑定事件的对象，就是说this指向button。

定时器中的this

setInterval(
    function(){ 
        console.log(this); //window
    }, 
3000);

定时器中的this指向的是window，这个就不做过多的解释了。

箭头函数中的this

箭头函数中的this指向的是定义时的this，而不是执行时的this，说白了就是箭头函数是没有this，this指向谁主要取决于箭头函数所处的环境，箭头函数中的this指向外部环境中的this指向。虽然有些拗口，但是应该还是很好理解的。

改变this的指向

改变this的指向的方法主要有call，apply，bind

.call(),  call(thisScope, arg1, arg2, arg3...)

.apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数

.bind()  bind(thisScope, arg1, arg2, arg3...)

想要详细了解这三兄弟的可以去我的另一篇博客前端面试题：手写call，apply和bind。

ღ故里᭄ꦿ࿐

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端面试题：谈谈This指向

除了那个闭包的输出问题，另一个让人头疼的，非This的指向问题莫属了，this有时候真的是把人搞得蒙蒙的，但是究竟如何this的指向呢，今天上午也是探索了一番。首先要说的是，this的指向在函数定义的时候是确定不了的，只有当函数执行的时候，才知道this到底指向谁，实际上this最终的指向是那个调用它的对象。举个例子：function fn(){ console.log(this);}当面试官给了这么一个函数去问this的指向的时候，虽然平时一些面试问题说不知道很减分，但是这个问
复制链接

扫一扫