this指向

var site="qj"

let edu={
    site:"hdr",
    show:function(){
        console.log(this.site);
        function render(){
            let site="11";
            console.log(this.site);
        }
        render()
    }
}
console.log(edu.show());

其中

function render(){
            let site="11";
            console.log(this.site);
        }
是普通函数，this的指向是window。

let Lesson={
    site:"houdunren",
    lists:["js","css","mysql"],
    show:function(){
        //方式1，传给self，然后传到函数中
        const self=this;
        return this.lists.map(function(value){
            return `${self.site}-${value}`;
        })

    }
}
console.table(Lesson.show());

-------------------------------------------------

let Lesson={
    site:"houdunren",
    lists:["js","css","mysql"],
    show:function(){
        //方式1，传给self，然后传到函数中
        // const self=this;
        return this.lists.map(function(value){
            return `${this.site}-${value}`;
            //map的第二个参数传入this
        },this)






    }
}
console.table(Lesson.show());
--------------------------------------


let Lesson={
    site:"houdunren",
    lists:["js","css","mysql"],
    show:function(){
        //箭头函数中的this指向的就是上下文，或者说是父级作用域中的this,而普通函数的this指向的是window
        return this.lists.map(value=>`${this.site}-${value}`);
    }
}
console.table(Lesson.show());

读取按钮，和当前对象中的属性，如何实现，如下：
<button>houdunren</button>

let Dom={
    site:"houdunren",
    bind:function(){
        const btn=document.querySelector("button");
        btn.addEventListener("click",event=>{
//this 指向父级的
            console.log(event);
            console.log(this.site+":"+event.target.innerHTML);
        })
    }
}
Dom.bind();
---------------------------------------------------------

let Dom={
    site:"houdunren",
    bind:function(){
        const btn=document.querySelector("button");
        const self=this;
        btn.addEventListener("click",function(){
            console.log(self.site+this.innerHTML);
        })
    }
}
Dom.bind();
--------------------------------------------------------


let Dom={
    site:"houdunren",
//写一个handleEvent方法
    handleEvent:function(event){
        console.log(this.site+event.target.innerHTML)


    },
    bind:function(){
        const btn=document.querySelector("button");
        btn.addEventListener("click",this);
       
    }
}
Dom.bind();



------------------------------------------------------
现在加上2个按钮

<button>houdunren</button>
<button>hscms</button>


let Dom={
    site:"houdunren",
    handleEvent:function(event){
        console.log(this.site+event.target.innerHTML)



    },
    bind:function(){
        const btn=document.querySelectorAll("button");
        // btn.addEventListener("click",this);
        console.log(btn.length)
        btn.forEach(function(elem){
            elem.addEventListener("cilck",()=>{
                // 此时的this指向的是window，因为父级作用域指向的window
                console.log(this);
            })
        })
       
    }
}
Dom.bind();



 
让父级的this改变


let Dom={
    site:"houdunren",
    handleEvent:function(event){
        console.log(this.site+event.target.innerHTML)



    },
    bind:function(){
        const btn=document.querySelectorAll("button");
        // btn.addEventListener("click",this);
        console.log(btn.length)
        btn.forEach(elem=>{
            console.log(this);
            elem.addEventListener("cilck",()=>{
                // 此时的this指向的是window，因为父级作用域指向的window
                console.log(this);
            })
        })
       
    }
}
Dom.bind();



如下：


let Dom={
    site:"houdunren",
    handleEvent:function(event){
        console.log(this.site+event.target.innerHTML)



    },
    bind:function(){
        const btn=document.querySelectorAll("button");
        // btn.addEventListener("click",this);
        console.log(btn.length)
        btn.forEach(elem=>{
            console.log(this);
            elem.addEventListener("click",event=>{
                // 此时的this指向的是window，因为父级作用域指向的window
                // console.log(this);
                console.log(this.site+":"+event.target.innerHTML);
            });
        })
       
    }
}
Dom.bind();
 
去掉箭头函数的写法：


let Dom={
    site:"houdunren",
    handleEvent:function(event){
        console.log(this.site+event.target.innerHTML)


    },
    bind:function(){
        const btn=document.querySelectorAll("button");
        // btn.addEventListener("click",this);
        console.log(btn.length)
        // self
        const self=this;
        btn.forEach(function(elem){
            console.log(this);
            elem.addEventListener("click",function(){
                // 此时的this指向的是window，因为父级作用域指向的window
                // console.log(this);
                console.log(self.site+":"+event.target.innerHTML);
            });
        })
       
    }
}
Dom.bind();