一个题目带你理解函数的三种角色

函数的三种角色

• 1、普通函数
• 2、构造函数（类）
• 3、对象
  首先我们来看看这三种角色分别做了哪些操作：

普通函数

函数的执行 Fn()
形成私有的上下文 <EC(Fn)>、
初始化作用域链、
初始化this[window]、
初始化arguments、
形参赋值、
变量提升、
代码执行…

构造函数

构造函数的执行 new Fn()
形成私有的上下文 <EC(Fn)>、
初始化作用域链、
和普通函数的区别：
创建一个对象（这个对象是当前类的实列）
this（指向创建的对象）
初始化arguments、
形参赋值、
变量提升、
代码执行…
this.xxx=xxx给当前创建的实例对象设置私有的属性和方法
和普通函数的区别：
1、函数没有return：即在函数没有返回值的情况下，默认会把创建的实例返回，如果没有this，返回空对象
2、函数有return：即函数中有返回值①返回基本类型值，还是以返回的实例为主 ②返回的是引用值，自己编写的返回值会替换默认返回的实例

对象

let obj={xxx：xxx}键值对
开辟一个堆内存，用来存放对象中的键值对

---

以上是对函数三个角色的理解，下边我们来看一个具体的题目

function Foo() {
    getName = function () {
        console.log(1);
    };
    return this;
}// =>变量提升阶段把Foo当成普通函数，开辟一个堆内存，把函数体中的内容以字符串的形式存储到内存中，以后函数执行的时候调用
Foo.getName = function () {
    console.log(2);
};//=>把Foo当成一个对象，给对象设置键值对

Foo.prototype.getName = function () {
    console.log(3);
};//=>把Foo当成一个类，给原型上设置公共的属性和方法（供其实例调取）
var getName = function () {
    console.log(4);
};
function getName() {
    console.log(5);
}
Foo.getName();//2  当成对象执行
getName();//4 当成函数执行
Foo().getName();//1
//1 Foo()当成普通函数执行返回window,修改了全局的getName,window.getName();
getName();//1
new Foo.getName();//2
//2 按照执行的优先级，成员访问，再new 返回一个空对象{}，构造函数执行也会走普通函数的流程，打印2，只是多创建了一个了类的实例
new Foo().getName();//3
//3 new Foo()创建类的实例，这个实例中没有this定义实例的私有属性，所以是个空的对象，但他属于Foo的实例，所以可以执行原型上的方法
new new Foo().getName();//3 和上题一样输出3

---