Function Object

Function Object

参考文章
https://juejin.im/post/58f9d0290ce46300611ada65

• prototype是函数的属性，指向函数的原型
• _proto_对象的内部属性，指向构造器原型

原型链查询就是通过proto链接到构造器的原型，进而实现查询

var obj = {name: 'jack'},
    arr = [1,2,3],
    reg = /hello/g,
    date = new Date,
    err = new Error('exception');

console.log(obj.__proto__  === Object.prototype); // true
console.log(arr.__proto__  === Array.prototype);  // true
console.log(reg.__proto__  === RegExp.prototype); // true
console.log(date.__proto__ === Date.prototype);   // true
console.log(err.__proto__  === Error.prototype);  // true

函数function的原型是： Function.prototype

function Person(name){
  this.name = name;
}
console.log(Person.__proto__ === Function.prototype);//true

Person即是构造器又是函数(function)，函数（function）的构造器是Function
js内置9个构造器，4个对象

• 9个构造器（他们的构造器是Function不是Obejct)

console.log(Number.__proto__   === Function.prototype); // true
console.log(Boolean.__proto__  === Function.prototype); // true
console.log(String.__proto__   === Function.prototype); // true
console.log(Object.__proto__   === Function.prototype); // true
console.log(Function.__proto__ === Function.prototype); // true
console.log(Array.__proto__    === Function.prototype); // true
console.log(RegExp.__proto__   === Function.prototype); // true
console.log(Error.__proto__    === Function.prototype); // true
console.log(Date.__proto__     === Function.prototype); // true

console.log(Date.__proto__     === Object.prototype); // false

所有的构造器(特殊的函数，所以也是对象）都继承Function.prototype

• Math JSON是以对象形式存在，不用new，所以他们的构造器是Object

console.log(Math.__proto__ === Object.prototype);  // true
console.log(JSON.__proto__ === Object.prototype);  // true

console.log(JSON.__proto__ === Function.prototype);  // false

独特的Function.prototype

• Function.prototype类型是函数(其余函数.prototype类型都是对象)

console.log(typeof Function.prototype) // "function"

本来只有函数才有prototype属性，而且prototype属性对应的值是一个对象，如下

console.log(typeof Number.prototype)   // object
console.log(typeof Boolean.prototype)  // object
console.log(typeof String.prototype)   // object
console.log(typeof Object.prototype)   // object
console.log(typeof Array.prototype)    // object
console.log(typeof RegExp.prototype)   // object
console.log(typeof Error.prototype)    // object
console.log(typeof Date.prototype)     // object

因为函数是一等公民，函数也是对象，所以这里就能解释得通为什么Function.prototype为function

• Function.prototype.proto ?

proto是对象的内部属性，所以这里的Function.prototype被视为一个对象
而不是函数function

所以：
console.log(Function.prototype.__proto__ === Object.prototype) //true

• 函数/构造器形式存在.__proto__指向Function.prototype

• 对象形式存在.proto指向Object.prototype
• Object.prototype.proto === null
• Object.proto === Function.prototype
• Function.proto === Function.prototype

console.log(Object.prototype.__proto__ === null);//true

重点理解

• 所有构造器都来自于Funtion.prototype

function test(){

}
console.log(test.__proto__ === Function.prototype); // true

console.log(Number.__proto__   === Function.prototype); // true
console.log(Boolean.__proto__  === Function.prototype); // true
console.log(String.__proto__   === Function.prototype); // true
console.log(Object.__proto__   === Function.prototype); // true
console.log(Function.__proto__ === Function.prototype); // true
console.log(Array.__proto__    === Function.prototype); // true
console.log(RegExp.__proto__   === Function.prototype); // true
console.log(Error.__proto__    === Function.prototype); // true
console.log(Date.__proto__     === Function.prototype); // true



这就解释了经典图的问题：
funtion Fun(){}
funtion Object(){}
funtion Funtion(){}

Fun Object Funtion这是都作为构造器,***构造器都来自原Funtion.prototyp***

Fun.__proto__ === Funtion.prototyp
Object.__proto__ === Funtion.prototyp
Object.__proto__ === Funtion.prototyp

对象构造器有三种身份（Object Array Function)

• 是构造器(new Object()…)
• 是对象(所以有proto属性)
• 是函数(所以都继承Function.prototype)
  为什么Funtion.prototype.__proto__指向Object.prototype?

Funtion.prototype类型是函数，那么Funtion.prototype.__proto__就应该指向函数的构造器的prototype即：、
Funtion.prototype. proto === Function.prototype

但是实际：
Funtion.prototype. proto === Object.prototype
可以这样理解：
Function.prototype是最开始的函数，即函数之源，它形成的时候，还有没有函数的原型，因此不会指向Function.prototype
但是 Function.prototype 形成时，Object.prototype 已经有了，因此按照对象的特性，它的__proto__属性会指向 Object.prototype

联想到instanceof

A instanceof B

理解A的原型链（__proto__）上是否存在B原型（prototype）
A.__proto__ === B.prototype

var obj = new Object()

console.log(obj.__proto__=== Object.prototype); // true
console.log(obj.__proto__=== Function.prototype); // false
console.log(Object instanceof Function); // true

实现instancof

function new_instance_of(left, right) { 
    let rightProto = right.prototype; // 取右表达式的 prototype 值
    left = left.__proto__; // 取左表达式的__proto__值
    while (true) {
    	if (left === null) {
            return false;	
        }
        if (left === rightProto) {
            return true;	
        } 
        // 不断顺着原型链往上查找，直到找到右边的prototyp，如果没有就返回false
        left = left.__proto__ 
    }
}

• 一个案列搞定

let child = function () {
}
let father = function () {
}
child.prototype = new father()
let c = new child()



console.log(c.__proto__ === child.prototype); //true
console.log(c.__proto__.__proto__ === father.prototype); //true

//所以
console.log(c instanceof child); // true
console.log(c instanceof father); // true

联想到继承

因为prototype是用来存储对此昂的属性和方法
而所有的对象都有__proto__指向构造函数的prototype，获取父类的属性方法

而prototype又是一个对象包含：
1 constructor 
2 __proto__(继续指向原型链上一级)

联想到new

var test = new Test()其实内部执行了如下：

1 创建一个空对象
var obj = new Object()

2 将空对象的原型赋值为构造器函数的原型
obj.__proto__ = Test.prototype

3 更改构造器函数内部this，将this指向新对象
Test.call(obj)


所以
function Father(name){
    this.name = name;
}
function child(){}
child.prototype = new Father('test')
console.log(child.prototype);// Father { name: 'test' }

因为结合上面三点：
function Father(name){
    this.name = name;
}
// 等价于
function Father(name){
    //因为this指向了新的对象（prototype表示的就是一个对象）
    child.prototype.name = name;
}

• new的对象可以访问到构造函数的属性和方法
• 关于构造函数，你不知道的new

1 构造函数中return一个非对象无效

function Test(name) {
  this.name = name
  return 1
}
const t = new Test('test')
console.log(t.name) // 'test'


2 return 一个对象有效

function Test(name) {
  this.name = name
  console.log(this) // Test { name: 'test' }
  return { age: 66 }
}
const t = new Test('test')
console.log(t) // { age: 66 }
console.log(t.name) // 'undefined'

所有构造函数不要有返回值，这点符合Java构造函数无返回值