Pengjielee's blog

一道题目

Function.prototype.a = () => alert(1);
Object.prototype.b = () => alert(2);
function Foo() {}
var bar = new Foo();
bar.a(); //Uncaught TypeError: bar.a is not a function
bar.b(); //2

表达式结果

以下为chrome 88.0.4324.96

function F(){};
var o = {};

// 这是一个构造函数
typeof F; //'function'
// 这是一个对象
typeof o; //'object'

// 构造函数的原型对象
typeof F.prototype; //'object'
// 不太理解？实例对象没有原型对象？
typeof o.prototype; //'undefined'

// 这是一个实例对象
typeof new F; //'object'
// 不太理解？实例对象没有原型对象？
typeof (new F).prototype; //'undefined'
// 实例对象的属性__proto__，指向原型对象
typeof (new F).__proto__; //'object'

// 构造函数的属性__proto__，指向Function的原型对象
typeof F.__proto__; //'function'
// 实例对象的属性__proto__，指责o的原型对象
typeof o.__proto__; //'object'

// Object是一个函数创建的
typeof Object;  //'function'
// Function是一个函数创建的
typeof Function; //'function'

// 函数实例对象的原型对象
typeof (new Function).prototype; //'object'
// 函数实例对象的属性__proto__，指向Function的原型对象
typeof (new Function).__proto__; //'function'

// 实例对象的原型对象
typeof (new Object).prototype; //'undefined'
// 实例对象的属性__proto__，指向Object的原型对象
typeof (new Object).__proto__; //'object'

// Object的原型对象
typeof Object.prototype; //'object'
// Object的属性__proto__，指向Function的原型对象
typeof Object.__proto__; //'function'

// Function的原型对象
typeof Function.prototype; //'function'
// Function的属性__proto__，指向Function的原型对象
typeof Function.__proto__; //'function'

prototype vs `proto`

前提：

1、在JS里，万物皆对象。

方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。

即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

typeof new Function(); //'function'
typeof new Function().prototype; //'object'

2、方法(Function)

方法是个特殊的对象，除了和其他对象一样有上述__proto__属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

看代码：

//构造函数Foo
function Foo(name){
  this.name = name;
}

//构造函数的原型对象，添加方法
Foo.prototype.sayHi = function(){
  console.log(this.name)
}

//实例1
var f1 = new Foo('f1');
//实例2
var f2 = new Foo('f2');

1、构造函数Foo()

构造函数的原型属性Foo.prototype指向了原型对象，在原型对象里有共有的方法，所有构造函数声明的实例（这里是f1，f2）都可以共享这个方法。

2、原型对象Foo.prototype

Foo.prototype保存着实例共享的方法，有一个指针constructor指回构造函数。

Foo.prototype; //{constructor: ƒ}
Foo.prototype.constructor === Foo; //true

3、实例

f1和f2是Foo这个对象的两个实例，这两个对象也有属性__proto__，指向构造函数的原型对象，这样子就可以像上面1所说的访问原型对象的所有方法啦。

// f1的原型对象
f1.__proto__; //{sayHi: ƒ, constructor: ƒ}

// f2的原型对象
f2.__proto__; //{sayHi: ƒ, constructor: ƒ}

// f1/f2的原型对象 与 F的原型对象 不相等
f1.__proto__ === F.prototype;  //false ?
f2.__proto__ === F.prototype;  //false ?

// f1/f2的原型对象 相等
f1.__proto__ === f2.__proto__; //true

// f1的原型对象指向的构造函数 与 Foo 相等
f1.__proto__.constructor === Foo; //true

// f1的原型对象指向的构造函数 与 Foo原型对象指向的构造函数 相等
f1.__proto__.constructor === Foo.prototype.constructor; //true

另外：

构造函数Foo()除了是方法，也是对象啊，它也有__proto__属性，指向谁呢？指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛，因此这里的__proto__指向了Function.prototype。

// 构造函数的类型是'function'
typeof Foo; //'function'

// Foo的__proto__属性
Foo.__proto__; //ƒ () { [native code] }

// Foo的__proto__属性指向的原型对象 等于 Function的原型对象
Foo.__proto__ === Function.prototype; //true

// Foo的__proto__属性指向的构造函数 等于 Function
Foo.__proto__.constructor === Function; // true

// Foo的原型对象
Foo.prototype; //{sayHi: ƒ, constructor: ƒ}

其实除了Foo()，Function(), Object()也是一样的道理。原型对象也是对象啊，它的__proto__属性，又指向谁呢？同理，指向它的构造函数的原型对象呗。这里是Object.prototype.最后，Object.prototype的__proto__属性指向null。

// Function的原型对象的__proto__属性
Function.prototype.__proto__;
Function.__proto__;  //ƒ () { [native code] }
Function.__proto__ === Function.prototype;  //true
Function.__proto__  === Object.__proto__;  // true

typeof Function;                      //'function'
typeof Function.prototype;            //'function'
typeof Function.__proto__;            //'function'
typeof Function.prototype.__proto__;  //'object'

// Object的原型对象的__proto__属性
Object.prototype.__proto__; //null
Object.__proto__;  //ƒ () { [native code] }
Object.__proto__  === Object.prototype;   //false
Object.__proto__  === Function.prototype; //true

typeof Object;                      //'function'
typeof Object.prototype;            //'object'
typeof Object.__proto__;            //'function'
typeof Object.prototype.__proto__;  //'object'

高能！typeof Function.prototype 引发的先有 Function 还是先有 Object 的探讨
https://segmentfault.com/a/1190000005754797

写给自己的Object和Function的3个灵魂拷问
https://juejin.cn/post/6854573208109056007

js中__proto__和prototype的区别和关系？
https://www.zhihu.com/question/34183746

帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
https://blog.csdn.net/cc18868876837/article/details/81211729

10.Function.prototype & Object.prototype.md

一道题目

表达式结果

prototype vs `proto`

More

一道题目

表达式结果

prototype vs __proto__

More

prototype vs `proto`