This指向

事件绑定中的this

行内绑定

 <button id="btn" onclick="clickFun()">点击</button>
 <button id="btn" onclick="console.log(this)">点击1</button>
    // 运行环境在节点中,this指向此节点对象
    <script>
        // 事件绑定
        function clickFun(){
            console.log(this);// 在普通函数中,this指向window
        }
    </script>
复制代码

事件绑定和动态绑定

 <button id="btn" onclick="clickFun()">点击</button>
    <script>
        btn.onclick=function(){
            console.log(this);// 指向调用的对象 button
        }
 // addEventListener事件监听和事件绑定一样,this都指向此节点对象
复制代码

函数内部的this指向

普通函数指向window

 function test(){
            console.log(this);// 指向window
        }
        test()
复制代码

对象调用 this指向,谁调用就指向谁

 var obj={
            a:1,
            say:function(){
                console.log(this);//  指向Object
            }
        }
        obj.say();//say()被obj调用,所以say()里面的this指向obj
       
复制代码

          var o = {
            a: 10,
            b: {
                fn: function () {
                    console.log(this);// 指向b对象
                    console.log(this.a);// undefined 在对象b中,找不到a
                }
            }
        }
        o.b.fn();// 找最近的对象
复制代码

 var obj={
            call:function(){
                console.log(this); //指向window
            }
        }
        var f =obj.call;
        f();
复制代码

为什么会指向window?

因为函数是对象,对象是按引用传递的

obj.call赋值给f , 相当于把obj.call 的函数赋值给了变量f , 也就相当于把obj.call的引用指向了f 在变量f处调用 , f为window对象的属性 , 所以this指向了window

构造函数的this指向

new关键字改变了函数内this的指向,使其指向刚创建出来的对象

 function Fn() {
        this.user = "追梦子";  // a.user="追梦子
        }
        var a = new Fn();//this指向新创建出来的实例对象a
        console.log(a.user);//追梦子
复制代码

在构造函数中,当函数中有了return,已经不能称为构造函数了

 function fn() {
            this.user = '追梦子';
            return {}; //undefined
            return function(){}; //undefined
            return 1; // 追梦子
            return undefined; // 追梦子
            return null; // 追梦子
        }
        var a = new fn;
        console.log(a.user);
复制代码

new触发函数时,当函数return[] {} function时,this指向return的值(不是引用数据类型,不改变this的指向)

call(),apply(),bind()() 调用函数方法

this指向传入的对象
没有传参,this指向window

 func.call(obj,参数1,参数2....)
 func.apply(obj,[参数1,参数2...])
 func.bind(obj)(参数1,参数2...)
 
 call()方法
                var li={name:"lisi"}
                var zs={name:"zs"}
                function test(age){
                    console.log(this.name);//lisi
                    console.log(age);//23
                }
                //将test中的this指向固定对象li中
                // 可以理解为 li.test();
                test.call(li,23);
                
  apply()方法
        var li = { name: "lisi" }
        var zs = { name: "zs" }
        function test(age, sex) {
            console.log(this.name + age + sex);//zs 男 18
        }
        //将test函数中的this指向固定对象zs中
        test.apply(zs, ["男", 18]);
        
 bind()()方法
 返回一个新的函数,和原函数功能一模一样
复制代码

三者都是用来改变函数的this指向

apply()传参需要以数组形式,数组中的参数和函数中的形参一一对应

call()的参数直接传,和函数中的形参一一对应

bind()返回的是一个函数,可以在调用的时候传参

在定时器中

this指向window

            var x=1;
            var o={
                x:2,
                fn:function(){
                    console.log(this.x);
                    console.log(this);
                }
            }
            o.fn();//2 Object
            setTimeout(o.fn,1000);//1 window
// o.fn引用传递
复制代码