码迷,mamicode.com
首页 > Web开发 > 详细

JS中this的几种情况

时间:2020-02-25 18:25:14      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:obj   tac   构造函数   dev   cli   实例   app   attach   bind   

1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身:

<div id="div"></div>
div.onclick = function() {
    console.log(this); //=><div id="div"></div>
};
div.addEventListener(‘click‘, function () {
    console.log(this);  //=><div id="div"></div>
}, false);

这里边有个特殊情况就是DOM2级绑定事件

div.attachEvent(‘onclick‘,function anonymous(){
    console.log(this); //=>window
});

 

2.普通函数执行,它里边的this是谁,取决于方法执行前面是否有“.”,有的话,“.”前面是谁this就是谁,没有的话并且是在非严格模式下this就是window,严格模式下是undefined:

function fn() {
    console.log(this);
}
let obj = {
    name: ‘OBJ‘,
    fn: fn
}; 
fn(); //window
obj.fn(); //{name: ‘OBJ‘,fn: fn}

 

3.构造函数执行(也即是new执行),函数中的this是当前类的实例:

function F() {
    console.log(this);
}
let f = new F; // F {}

 

4.箭头函数中没有this,所用到的this都是其上下文中的this(或者说是上级上下文):

let obj = {
    fn: () => {
        console.log(this);            
    }
}
obj.fn(); //window
let obj = {
    fn: function () {
        setTimeout(_ => {
            console.log(this);    
        }, 1000);
    }
};
obj.fn(); //obj

 

5.基于call/apply/bind可以改变函数中this的指向:

let obj = {
    fn: function(){
        console.log(this);
        }
}
obj.fn(); //obj
obj.fn.call(12); //12

 

JS中this的几种情况

标签:obj   tac   构造函数   dev   cli   实例   app   attach   bind   

原文地址:https://www.cnblogs.com/ronaldo9ph/p/12362570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!