this的指向

IT技术2年前 (2022)更新 IT大王
0

一、this的指向分类

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

二、改变函数内部this指向

1.函数名称.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.函数名.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
    
3.函数名.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>
    
© 版权声明
好牛新坐标 广告
版权声明:
1、IT大王遵守相关法律法规,由于本站资源全部来源于网络程序/投稿,故资源量太大无法一一准确核实资源侵权的真实性;
2、出于传递信息之目的,故IT大王可能会误刊发损害或影响您的合法权益,请您积极与我们联系处理(所有内容不代表本站观点与立场);
3、因时间、精力有限,我们无法一一核实每一条消息的真实性,但我们会在发布之前尽最大努力来核实这些信息;
4、无论出于何种目的要求本站删除内容,您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》:https://itdw.cn/ziliao/sfgs.pdf,
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明: http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理;请按照此通知格式填写发至本站的邮箱 wl6@163.com

相关文章