js 的function为什么可以添加属性

Question

今天在撸代码的时候遇见个问题。就是下面的写法有什么区别？

(1)
function person(){
    this.name = 'Tom';
}
(2)
function person(){}
person.name = 'Tom';
(3)
function person(){}
person.prototype.name = 'Tom'

这3种写法有什么区别？尤其是第二种写法为什么可以直接写person.name。
person是函数。为什么可以像对象一样添加属性？
我应该看什么资料恶补这方面的知识？
前端小白。各位大神指点下。万分感谢。

Answer 1

因为 JS 里， 函数也是对象， 是 Function 的实例。

function person(){
    this.name = 'Tom';
}

这时候一般把 person 当作构造函数。

const demo = new person()

name 属性是挂在 new 生成对象， 也就是 demo 上的。
ps: 当然， 你也可以不用 new 调用 person。但是可能会发生不可预知的后果。

---

function person(){}
person.name = 'Tom';

这是在函数对象上直接定义了 name 属性。

---

function person(){}
person.prototype.name = 'Tom'

每个函数都会有一个 prototype 的属性（箭头函数除外）。 name 是放到原型属性上。
每个用 new 调用生成的对象，都可以访问到它们构造函数原型上的 name 属性。

Answer 2

可看《javascript高级程序设计》继承部分。

Answer 3

因为Js里面函数也是对象。

函数其实也有另一个写法就是

a = new Function("return 1");

函数也是new出来的，所以函数其实也是一个对象。所以对象可以添加属性。

相关知识可以看一下，这一个系列看完应该会有不小的收获，还可以去关注一下new的实际操作。

深入理解javascript原型和闭包（2）——函数和对象的关系

Answer 4

1是公有属性
2是静态属性
3是原型共享属性
不清楚的话请看《javascript设计模式》

Answer 5

1.创建了一个构造函数。用这个函数创建的对象都拥有name属性
2.函数也是对象，创建构造函数的同时，也实例化了Function这个对象，这时添加的属性就属于这个实例化的函数对象的属性，并不属于用这个函数创建的对象的属性
3.用原型方式为对象添加属性。每个构造函数在创建时，都会有一个prototype属性，该属性指向一个对象，这个对象就是原型。可以把原型理解成构造函数的一个实例。通过这种方式添加的属性是属于这个构造函数创建的对象的

总之，用1，3添加的属性是属于person对象的，是对象公有的。用2添加的属性，是属于构造函数本身的属性