【面试题】说说JS中的this指向问题

简介: 【面试题】说说JS中的this指向问题

JS中的this指向问题

this的指向问题

全局作用域

在JS中,全局的变量和函数附着在global对象上,全局对象在浏览器环境下是window对象。

  • 在全局作用域中,this指向全局对象window
console.log(this);      // window对象
console.log(window);    // window对象
console.log(this === window);    // true
var a = 3;
console.log(a);                                     // 3
console.log(window.a);                              // 3
console.log(this.a);                                // 3
console.log(a === window.a && window.a === this.a); // true
function say(){
    console.log("hi");
}
this.say();     // hi

全局变量和window对象的关系

  • 使用var声明定义的全局变量被挂载到全局对象window上。
  • 使用letconst声明定义的全局变量不会被挂载到全局对象window上。

普通函数

普通函数内部的this指向调用这个函数的对象。

案例1

function testThis(){
    console.log(this);
}
testThis();     // 输出结果: window对象

testThis()在全局作用域中被调用,相当于执行了window.testThis();,则函数被调用时,内部的this指向window.

案例2

var obj = {
    test(){
        console.log(this);
    }
}
obj.test();     // obj

普通函数作为对象上的方法时,this指向调用方法的对象.

案例3

var obj = {
    test1(){
        console.log(this);
    },
    test2(){
        test();    // 这里相当于执行了window.test();
    }
}
function test(){
    console.log(this);
}
obj.test1();     // obj
obj.test2();     // window
test();          // window

构造函数

构造函数一般是通过new关键字调用的,其内部的this指向新创建的对象。

function Person(name,age){
    this.name = name;
    this.age = age;
    console.log(this);
}
const person1 = new Person('张三',20);
const person2 = new Person('李四',18);

构造函数利用指向新对象的this,将传入的nameage属性直接赋值给新对象。通过最后的console.log(this)语句也可以检测出this的指向。


绑定事件函数

const btn = document.querySelector('button');
btn.onclick = function(){
    console.log(this);
}
  • this指向触发该事件的对象。

此处,点击事件触发时,this指向按钮这个DOM对象。


箭头函数

箭头函数没有属于自己的this。因此,箭头函数内部使用的this就是箭头函数所在上下文的this.

var obj = {
    test1(){
        console.log(this);
    },
    test2:()=>{
        console.log(this);
    }
}
obj.test1();     // obj
obj.test2();     // window

test2是箭头函数,没有属于自己的this。在其内部输出的thisobj所在上下文的this,即window


改变this指向的方法

函数是对象,有属于自己的属性和方法。

函数有callapply方法可以改变调用时this的指向。

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
2月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
57 3
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
2月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
35 0
|
2月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
2月前
|
JavaScript 前端开发 UED
小白请看! 大厂面试题 :如何用JS实现瀑布流
小白请看! 大厂面试题 :如何用JS实现瀑布流
|
2月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
2月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
3月前
|
缓存 JavaScript 前端开发
js高频面试题,整理好咯
中级前端面试题,不低于12k,整理的是js较高频知识点,可能不够完善,大家有兴趣可以留言补充,我会逐步完善,若发现哪里有错,还请多多斧正。
|
4月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
58 3
|
3月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
671 0