this指向,改变this指向

this的指向

在ES5中,this永远指向最后调用它的那个对象。

this永远指向最后调用它的那个对象,此处调用的对象是window

        var name="windowsName";
        function a(){
            var name="Cherry";
            console.log(this.name); //windowsName
            console.log("inner:"+this);//window
        }
        a();
        console.log("outer:"+this);//window

此处调用的对象是a

var name="windowsName";
var a={
name:"Cherry",
fn:function(){
console.log(this.name); //Cherry
}
}
a.fn();
window.a.fn();

此处调用函数的对象依然是a,但是a的name没有定义,所以是undefined

var name="windowsName";
    var a={
            //name:"Cherry",
            fn:function(){
                console.log(this.name); //Cherry
            }
        }
    a.fn();
    window.a.fn();

此处把a对象的fn方法赋给了变量f,但是没有调用,所以fn仍然是被window调用的

var name="windowsName";
    var a={
            name:"Cherry",
            fn:function(){
                console.log(this.name); //windowsName
            }
        }
        var f=a.fn;
        f();

改变this的指向

  • 使用ES6箭头函数
  • 在函数内部使用_this=this
  • 使用apply call bind
  • *new一个实例化对象

1 使用ES6箭头函数

不箭头函数,最后调用setTimeout的对象是window,但是window中没有func1函数

    var name = "windowsName";
    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)     
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()//报错
            },100);
        }

    };

    a.func2();// this.func1 is not a function

使用箭头函数,箭头函数的this始终指向函数定义时的this,而非执行时的,“箭头函数中没有给this绑定,必须通过查找作用域链来决定其值,如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this,否则this为undefined”

2 在函数内部使用_this=this
先将调用这个函数的对象保存在变量_this中,然后在函数中都使用这个_this,this就不会改变了。

var name="windowsName";
    var a={
        name:"Cherry",
        fun1:function(){
            console.log(this.name);
        },
        fun2:function(){
            var _this=this;
            setTimeout(function(){
                _this.fun1();
            },100);
        }
    };
    a.fun2();  //Cherry

在fun2中,设置_this=this,这里的this是调用fun2的对象a,为了防止在fun2中的setTimeout被window调用而导致的在setTimeout中的this为window,将this(指向变量a),赋值给一个变量_this,这样,在fun2中使用_this就是指向对象a了。

3 使用apply call bind

使用apply,改变this指向

    var name="windowsName";
    var a={
        name:"Cherry",
        fun1:function(){
            console.log(this.name);
        },
        fun2:function(){
            setTimeout(function(){
                this.fun1();
            }.apply(a),100);
        }
    };
    a.fun2(); 

使用call

    var name="windowsName";
    var a={
        name:"Cherry",
        fun1:function(){
            console.log(this.name);
        },
        fun2:function(){
            setTimeout(function(){
                this.fun1();
            }.call(a),100);
        }
    };
    a.fun2(); 

使用bind

var name="windowsName";
    var a={
        name:"Cherry",
        fun1:function(){
            console.log(this.name);
        },
        fun2:function(){
            setTimeout(function(){
                this.fun1();
            }.bind(a)(),100);
        }
    };
    a.fun2(); 

call 和 apply的区别
apply和call基本类似,知识传入的参数不同
call接受若干个参数列表,apply接受包含多个参数的数组。

var a={
        name :"Cherry",
        fn:function(a,b){
            console.log(a+b)
        }
    }
    var b=a.fn;
    b.apply(a,[1,2]);
    var a={
        name :"Cherry",
        fn:function(a,b){
            console.log(a+b)
        }
    }
    var b=a.fn;
    b.call(a,1,2);

你可能感兴趣的:(JavaScript)