关于this指向的问题-CSDN博客

本文链接：https://blog.csdn.net/m0_51602066/article/details/123430225

本文深入探讨JavaScript中的函数行为，包括Foo构造函数内的getName方法覆盖、函数作用域中的this指向以及箭头函数的this继承特性。通过示例解释了Foo对象、window对象以及实例化后的Foo对象调用getName方法的不同结果。同时，文章讨论了箭头函数如何在对象属性上下文中保持外部this值，展示了不同函数声明方式对this的影响。

摘要由CSDN通过智能技术生成

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

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这个方法

#箭头函数中的this 判断

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

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

a.b()   // a
a.c()   // window

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