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

函数的三种角色

  • 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


在这里插入图片描述


在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读