JS笔记(8): 函数的三种角色

一、函数的三种形态：

• 1.作为一个普通函数执行（形参 实参 arguments 返回值）
  • 堆栈内存释放
  • 作用域链
• 2.函数作为一个类（new Fn，构造函数执行）
  • prototype
  • __proto__ 原型链
  • 实例
• 3.函数也是一个对象（内置Function的实例化对象）
  • 可以添加属性 自身也有私有属性
  • 和普通的一个obj没区别，就是对键值对的增删改查
• 三种角色之间没有必然的联系

function Fn(){
    var n = 10;
    this.m = 100;
};
Fn.prototype.aa = function (){
    console.log('aa');
};
Fn.bb = function(){
    console.log('bb');
};

// 普通函数执行
Fn(); //=>this:window  有一个私有变量n 和原型以及属性bb没关系

//构造函数执行
var f = new Fn; //=> this:f 
console.log(f.n); //=> undefined: n是私有变量 和实例没关系
console.log(f.m); //=> 实例的私有属性
f.aa(); //=> 实例通过__proto_找到Fn.prototype上的方法
console.log(f.bb); //=> undefined 作为普通对象加一个属性 和实例无关

//普通对象
Fn.bb;
复制代码

二、三种角色详解

1.普通函数

function fe(a, b) {
// var c = undefined
console.log('fe', a, b)
// console.log(arguments) // 实参集合
return a + b
};
console.log(fe(1, 2));
复制代码

• 形成一个私有作用域
• 形参赋值 变量提升
• 函数体代码从上到下执行
• 如果有return 返回值

2.作为类 (函数)

• (1) 类.prototype 可以在类的原型上 保存一些公有的属性和方法
• (2) new 操作符 可以让类 生成一个实例对象（__proto__）， 同时也可以给这个实例对象添加一些私有属性和方法

function Fn(n) {
var num = 123
// 生成一个实例对象（this）
// 给这里实例的添加一个xxx的属性
this.xxx = 100
}
const f = new Fn(1)
console.log(f)
复制代码

3.作为一个普通对象 (所有对象数据类型都是Object的一个实例)

function fe(a, b) { }

// 作为一个普通对象 查找length属性
console.log(fe.length) // 2 形参个数
console.log(fe.name) // "fe" 函数名

console.log(fe instanceof Object) // true

// 把函数当做对象来使用 添加私有属性和方法
fe.age = 10
fe.title = 'hello'
// 函数对象自身的属性，只能通过函数自身来调用 fe.title
复制代码

三、相关执行题：

题目一：

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
getName();//4
Foo().getName();//1
getName();// 1

new Foo.getName(); //2
new Foo().getName();//3
new new Foo().getName();//3
复制代码