前端 js this指向性

前言

以前老是对this指向性问题搞混，记得不清楚。特意做一下笔记。正好整理自己思路。写的不一定对。如有错误希望指出加以改正。

1.构造函数中this的指向性

function sn(name, sex) {
            this.name = name;
            this.sex = sex;
            console.log(this);
        }
sn();//提示windows
var p1 = new sn('zs', '男');//提示sn{}

从这里可以看出。构造函数的 this指向的是p1,也就是说谁调用指向谁。而直接使用sn（）会指向windos。

2.函数中this的指向性

function sn(name, sex) {
            this.name = name;
            this.sex = sex;
            console.log(this);
        }
sn();//提示windows

函数调用this会指向全局对象windows，因为是windows调用了这个函数（包括匿名函数）。

3.作为对象的方法调用时this的指向性

        var a = {
            name:"me",
            b:function () {
                console.log(this);
            }
        }
        a.b();//提示a{}

作为对象的方法调用this会指向a，也是谁调用就指向谁。

4.call,apply和bind方法时 this的指向性

        var a = {
            name:"me",
            b:function() {
                console.log(this);
            }
        };
        var c = {
             name:"you"
        };
        a.b();//输出a{}
        a.b.call(c);    //输出c{}
        a.b.apply(c);    //输出c{}
        a.b.bind(c)();    //输出c{}

这三个方法都是用来改变函数的this对象的指向的，他们第一个参数就是this指向的对象。

5.箭头函数中this的指向性

        var a = {
            n1: function() {
                return function() {
                    console.log(this);
                }
            },
            n2: function() {
                return() => {
                    console.log(this);
                }
            }
        };
        var b = {
            name:"me"
        }
        var nativeFn = a.n1();
        var arrowFn = a.n2();
        nativeFn();//打印windows
        arrowFn();//打印a{}
        nativeFn.call(b);//打印b{}
        arrowFn.call(b);//打印a{}

通过上面例子可以看出箭头函数this的指向性是函数被创建时绑定的而不是调用的时候绑定，this的指向就是绑定时所在作用域并且不会因为被怎么调用而改变指向，并不会指向运行时所在的作用域

6.定时器中this的指向性

        var a = {
             fn: function() {
                setTimeout(function() {
                     console.log(this); 
                }, 50)
                
            }
        }
        var b ={
            jn: function() {
                that =this;
                setTimeout(function() {
                     console.log(that); 
                }, 50)
                
            }
        }
        a.fn();//打印windows
        b.jn();//打印b{}

如果没有特殊指向，定时器中的this指向windows，可以通过在外部函数中将this存为一个变量，回调函数中使用该变量，而不是直接使用this而改变this的指向。