this指向

头条一面

请分别写出下面题目的答案。

function Foo() {
    getName = function() {
        console.log(1);
    };
    return this;
}
Foo.getName = function() {
    console.log(2);
};
Foo.prototype.getName = function() {
    console.log(3);
};
var getName = function() {
    console.log(4);
};

function getName() {
    console.log(5);
}

//请写出以下输出结果:
Foo.getName();      //-> 2    Foo对象上的getName() ,这里不会是3,因为只有Foo的实例对象才会是3,Foo上面是没有3的
getName();          //-> 4    window上的getName,console.log(5)的那个函数提升后,在console.log(4)的那里被重新赋值
Foo().getName();    //-> 1    在Foo函数中,getName是全局的getName,覆盖后输出 1(当前的这个函数在调用的时候才会执行里面的语句)
getName();          //-> 1    window中getName();
new Foo.getName();  //-> 2    Foo后面不带括号而直接 '.',那么点的优先级会比new的高,所以把 Foo.getName 作为构造函数
new Foo().getName();//-> 3    此时是Foo的实例,原型上会有输出3这个方法

函数表达式和函数声明的区分(函数提升比变量提升的优先级高)

函数在运行的瞬间,生成一个活动对象(Active Object),简称AO

  • 参考博客:https://www.cnblogs.com/libin-1/p/6101185.html
  • 分析参数 函数接收形式参数,添加到AO的属性,并且这个时候值为undefine,例如AO.age=undefine 接收实参,添加到AO的属性,覆盖之前的undefine
  • 分析变量声明,如var age;或var age=23; 如果上一步分析参数中AO还没有age属性,则添加AO属性为undefine,即AO.age=undefine 如果AO上面已经有age属性了,则不作任何修改
  • 分析函数的声明,如果有function age(){} 把函数赋给AO.age ,覆盖上一步分析的值

箭头函数中的this 判断

箭头函数里面的this是继承它作用域父级的this, 即声明箭头函数处的this

let a = {
  b: function() {
    console.log(this)
  },
  c: () => {
    console.log(this)
  }
}

a.b()   // a: 普通函数的this是在调用的时候决定的
a.c()   // window:箭头函数的this看外层的是否有函数, 如果有,外层函数的this就是内部箭头函数的this,如果没有,则this是window。

let d = a.b
d()     // window

this判断 下面输出为多少?

var name1 = 1;

function test() {
    let name1 = 'kin';
    let a = {
        name1: 'jack',
        fn: () => {
      var name1 = 'black'
      console.log(this.name1)       // 看当前外部,有函数,外层的this就是内部的this,没有的话就是window(JS只有全局作用域和函数作用域)
    }
  }
    return a;
}

test().fn() // ?

答案: 输出1

因为fn处绑定的是箭头函数,箭头函数并不创建this,它只会从自己的作用域链的上一层继承this。这里它的上一层是test(),非严格模式下test中this值为window。

  • 在非严格模式下,由于this必须是一个对象,所以就默认为指向全局对象window,在严格模式下this为undefined
  • 如果在绑定fn的时候使用了function,那么答案会是 'jack'
  • 如果第一行的 var 改为了 let,那么答案会是 undefind, 因为let不会挂到window上

results matching ""

    No results matching ""