この5種類の詳細な説明

1、ウィンドウ

// 第一种：this 指的就是 window
function fn() {
    
    
    console.log(this);
};
console.log(this);

2.これはイベントで

// 第二种：所有事件函数中的this，都是这个监听事件监听对象
//在事件函数中 this===e.currentTarget 也就是事件侦听的对象。
//在事件中使用this，其实事件函数内部实现极力就是使用call等将事件中的this改为 e.currentTarget。
// currentTarget始终是监听事件者，而target是事件的真正发出者。
document.querySelector(".div0").onclick=function (e) {
    
    
    console.log(this);
    console.log(e.target);
    console.log(e.currentTarget);
};

3.これはオブジェクト内にあります

// 第三种：对象中的this，this就是当前这个对象。
// 在对象的函数中，如果需要调用当前对象的其他函数或者属性时，必须加 this.属性名 或者 this.方法名.
var obj={
    
    
    a:1,
    c:function () {
    
    
        console.log(this.a);
    }
};

4.これはオブジェクト指向です

// 第四种：面向对象中的this
// ES5 面向对象写法
function Box(d) {
    
    
    this.d=d;
}
Box.prototype={
    
    
    a:1,
    c:function () {
    
    
	    //  这里的this就是box1
        console.log(this.a+this.d);
    }
};
var box1=new Box(10);
box1.c();

// ES6 的面向对象写法
class Ball{
    
    
    constructor(d){
    
    
        this.d=d;
        this.a=1;
    }
    c(){
    
    
        console.log(this.d+this.a)
    }
}

var ball1=new Ball(10);
ball1.c();

5.これを呼び出し、適用し、バインドします

//第五种：call，apply和bind中的this
// 这里的this就是被替换的对象
function fn2(a,b) {
    
    
    this.a=a;
    this.b=b;
    return this;
}

var obj1=fn2.call({
    
    },3,5);
var obj2=fn2.call({
    
    c:6},10,12);
console.log(obj1,obj2);// {a:3,b:5}, {a:3,b:5,c:6}

e.targetとthisの違い

// 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
    
    
                // ul 绑定了事件  this 指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向点击的对象 li触发了这个事件 e.target 指向的就是li
                console.log(e.target);

            })
            // 兼容性
            // div.onclick = function(e) {
    
    
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2.  this 有个非常相似的属性:currentTarget  ie678不认识