This指向

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指向

1. 普通函数 指向window

 function test(){
            console.log(this);// 指向window
        }
        test()

2. 对象调用 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

3. 构造函数的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的指向)

4. `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()`返回的是一个函数,可以在调用的时候传参

5. 在定时器中

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引用传递

 箭头函数

箭头函数中没有this,也没有arguments,主要看写在哪里
在全局中,`this===window`
在函数方法中,主要看函数this的指向,`this===function中的this指向`

在全局中

`this===window`