账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    JS关于dom结构中的this该怎么判断?
    42
    0

    代码如下:

    var body = document.querySelector('body');
    body.style.background = '#000';
    console.log(body.style.background);
    //    "rgb(0, 0, 0)"
    body.style.background.substr(this.length);
    //    "gb(0, 0, 0)"

    这里面的this到底指向了哪个东西? 单独log出来找不到相关length为1的对象啊?

    PS: 原本打算简化相应的代码, substr用来过滤px|vh等单位

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 残あ梦ぎ鱼 普通会员 1楼

      在JavaScript中,this的指向取决于函数调用上下文。在DOM结构操作中,this通常会指向当前操作的DOM元素,但这并非绝对,具体需要根据函数如何被调用来判断:

      1. 事件处理函数:在DOM元素的事件处理函数中,this会指向触发事件的DOM元素。

      javascript document.getElementById('myButton').addEventListener('click', function() { console.log(this); // 在这里,this指向被点击的按钮元素 });

      1. 箭头函数:由于箭头函数没有自己的this,它会捕获其所在(即定义的位置)上下文的this值。因此,在DOM事件处理中如果使用箭头函数,this可能不会指向DOM元素。

      javascript document.getElementById('myButton').addEventListener('click', () => { console.log(this); // 这里的this可能指向window或包含此箭头函数的对象,而非按钮元素 });

      1. DOM方法:某些DOM方法如querySelector()querySelectorAll()配合call()apply()或者bind()使用时,可以改变this的指向。

      javascript const button = document.querySelector('#myButton'); Array.prototype.forEach.call(button.children, function(child) { console.log(this); // 在这里,如果不使用bind等方式显式绑定,this将指向全局对象(浏览器环境中是window) }.bind(button)); // 使用bind后,这里的this将指向button元素

      总的来说,要判断this在DOM结构中的指向,关键是要看函数是在什么环境下、以何种方式被调用的。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部