this指向问题

197 阅读2分钟

记录;

这四种绑定分类是基于调用点(call site),即函数是在哪里被谁调用的。也就是说this指向谁,跟函数在哪里定义没有关系,而是取决于被谁调用,this只会指向它的上一级对象,不管这个对象中有没有this要的东西。

  1. 箭头函数

  2. 关键字new调

  3. 显式绑定

  4. 隐式绑定

  5. 默认绑定

    //案例1 function a(){ var user = "张三"; console.log(this.user); //undefined console.log(this); //Window } a(); //这边是window调用的 所以指向window

    //案例2 var o = { user:"张三",
    fn:function(){ console.log(this.user); //张三 } } o.fn(); //这边是对象o调用的 所以指向对象o

    //案例3 var o = { user:"张三",
    fn:function(){ console.log(this.user); //张三 } } window.o.fn(); // 这里虽然指向window,但我们创建的变量实际上是给window添加属性,所以这里可以用window.o对象,

    //案例4 var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //12 } } } o.b.fn(); //函数的上级对象为b,所以在b中查找a,为12,如果此时没有a属性,则为undefined

    //案例5 var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn; //将fn赋值给j j(); //这时调用相当于fn在window环境下

    //案例6 function Fn(){ this.user = "张三"; } var a = new Fn(); console.log(a.user); //张三 new创建了对象实例并复制了一份fn,最后指向对象a

    //案例7 function foo() { this.baz = "baz"; console.log(this.bar + " " + baz); //undefined undefined } var bar = "bar"; var baz = new foo(); //baz变量并没有bar属性,此时baz只定义未赋值,所以也是undefined

    //案例8 function Person(){ this.age = 18; setTimeout(function () { console.log(this.age); // 输出undefined }, 1000); } var p = new Person(); //setTimeout在window下执行

    function Person(){ this.age = 18; setTimeout(()=> { console.log(this.age); // 输出10 }, 1000); } var p = new Person(); //箭头函数会限制在当前{}下执行,指向Person这个函数

    //案例9 function fn()
    {
    this.user = '张三';
    return {}; // 或者return function(){} } var a = new fn;
    console.log(a.user); //undefined 如果返回值是一个对象,那么this指向的就是返回的对象

    //案例10 function fn()
    {
    this.user = '张三'; return 1; } var a = new fn;
    console.log(a.user); //张三 返回值不是对象,那么this还是指向函数实例(null是一个特例,指向实例)

一点点进步吧!!!