this的指向

2023-03-02

函数 this 对象

1|0一、this的指向分类分类this指向普通函数window构造函数实例对象，原型对象里面的方法也指向实例对象对象方法该方法所属对象。若对象中的方法为普通函数写法吗，则this指向该方法所属对象，若为箭头函数，则this指向为window事件绑定函数绑定事件对象定时器window立即执行函数wi

1|0一、this的指向分类

分类	this指向
普通函数	window
构造函数	实例对象，原型对象里面的方法也指向实例对象
对象方法	该方法所属对象。若对象中的方法为普通函数写法吗，则this指向该方法所属对象，若为箭头函数，则this指向为window
事件绑定函数	绑定事件对象
定时器	window
立即执行函数	window
箭头函数	外层作用域中的this（且this指向不可改变）

2|0二、改变函数内部this指向

2|11.函数名称.call（this要指向的，传递的参数1，...）

调用函数，并改变this指向。

var obj = {
    name: 'zs',
    age: 18
}
function fn (a, b) {
    console.log(this)// this指向obj这个对象
    console.log(a + b)// 6
}
fn.call(obj, 1, 5)

2|22.函数名.apply（this要指向的，[传递的参数1，...]）

调用函数，并改变this指向，传递的参数必须是数组。

var arr = [1, 88, 0, 34, 171, 23]
// 利用apply传递数组（伪数组），借助数学内置对象求数组最大值/最小值
var max = Math.max.apply(Math, arr)
console.log(max)// 171
var min = Math.min.apply(Math, arr)
console.log(min)// 0

2|33.函数名.bind（this要指向的，传递的参数1，...）

不调用函数，但改变this指向，调用需要fn.bind(...)( )。

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
// 获取所有的按钮元素
    let btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            // 点击后禁用按钮
            this.disabled = true
            setTimeout(function () {
                // 2秒后解除禁用该按钮
                this.disable = false
            }.bind(this), 2000)
        })
    }
</script>

__EOF__

本文作者：宇宙终极无敌超级爆炸究极飞天帅比暴龙战士的博客
本文链接：https://www.cnblogs.com/P1Kaj1uu/p/16888025.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！