JS箭头函数、this及BOM屏幕宽高

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

#JavaScript 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了JavaScript中获取浏览器窗口尺寸的函数`innerWh()`和滚动条位置的`scrollTl()`，并详细阐述了箭头函数的使用方式。同时，解释了在不同场景下`this`关键字的指向，包括全局作用域、函数调用、IIFF（立即执行函数表达式）等情况下`this`的行为。

浏览器窗口封装：

function innerWh (){
    return {
        width:document.documentElement.clientWidth || document.body.clientWidth || 
        window.innerWidth,
        height:document.documentElement.clientHeight || document.body.clientHeight             
        || window.innerHeight
    }
}
console.log(innerWh().width);
console.log(innerWh().height);

滚动条移动尺寸封装：

function scollTl() {
     return{
            top:document.documentElement.scrollTop || document.body.scrollTop,
            left:document.documentElement.scrollLeft || document.body.scrollLeft
     }
 }
 console.log(scollTl().top);
 console.log(scollTl().left);

箭头函数：（函数中()表示调用，函数体内的{}表示是作用域）

let fn = () => {
   console.log('箭头函数');
}
fn();
        
let fn1 = () => console.log('箭头函数');
fn1();
        
let fn2 = a =>console.log(a);
fn2(11);
        
let fn3 = _=>console.log('没参数的箭头函数');
fn3();

this：函数内部的另一个对象，this相当于在调用时的作用域（this在不同环境下，不同作用下，表现的也不同，谁调用函数，this就指向谁。）

1：全局作用下，this指向的是window

2：函数独立调用时，函数内部的this也指向window

3：被嵌套的函数独立调用时，this默认指向了window

4：IIFF自执行函数中内部的this也是指向window

5：构造函数中的this，用于给类定义成员（属性和方法）