JavaScript系列：再巩固-原型链

时间 2019-11-17

原文原文链接

图

1.实例：‘对象（实例）’有属性__proto__,指向该对象（实例）的‘构造函数的原型对象’。
2.方法：‘构造函数’除了有属性__proto__,全部构造函数方法的__proto__指向Function.prototype，Function.prototype的__proto__指向Function.prototype，Function.prototype的__proto__指向Object.prototype，Object.prototype的__proto__指向null。
         还有属性prototype，构造函数方法的prototype指向该'构造方法的原型对象'，构造方法的原型对象又指向Function.prototype，而后__proto__..走上述。

做者：doris
连接：https://www.zhihu.com/question/34183746/answer/58155878
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

首先，要明确几个点：
1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。所以，它们都会具备对象共有的特色。
即：对象具备属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例可以访问在构造函数原型中定义的属性和方法。

2.方法(Function)
方法这个特殊的对象，除了和其余对象同样有上述_proto_属性以外，还有本身特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含全部实例共享的属性和方法（咱们把这个对象叫作原型对象）。原型对象也有一个属性，叫作constructor，这个属性包含了一个指针，指回原构造函数。

好啦，知道了这两个基本点，咱们来看看上面这副图。
1.构造函数Foo()
构造函数的原型属性Foo.prototype指向了原型对象，在原型对象里有共有的方法，全部构造函数声明的实例（这里是f1，f2）均可以共享这个方法。

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

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

另外：
构造函数Foo()除了是方法，也是对象啊，它也有__proto__属性，指向谁呢？
指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛，所以这里的__proto__指向了Function.prototype。
其实除了Foo()，Function(), Object()也是同样的道理。

原型对象也是对象啊，它的__proto__属性，又指向谁呢？
同理，指向它的构造函数的原型对象呗。这里是Object.prototype.

最后，Object.prototype的__proto__属性指向null。


总结：
1.对象有属性__proto__,指向该对象的构造函数的原型对象。
2.方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象。

调试代码

<html>
<head>
    <title></title>
</head>
<script type="text/javascript">

//对应上面的图，咱们只用到了实例---》构造函数---》构造函数的原型---》Object.prototype---》null

//原型链：a1对象（实例对象）还让A.prototype对象（原型对象）之间的链接，叫作原型链
//2个对象。之间有一个连接 _proto_

//a1下是没有num1（A中没有this.num1=20），会继续经过a1._proto_找num1。
//a1下有num1（A中没有this.num1=20），再也不会继续经过a1._proto_找num1，
//即便A.prototype.num1 = 10; alert(a1.num1);依然是20

//....
//原型链最外层：Object.prototype
function A(){
    //this.num1=20

}
//A.prototype.num1 = 10;
        /*Function.prototype.num1 = 30;*/不对
Object.prototype.num1 = 40;
/*A.prototype.num1 = 60*/
A.prototype.fun = function() {
    alert(this.num1)//原型中的this和构造方法的this是同一个，指向实例a1
};
var a1=new A();
a1.fun();
alert(a1.num1);
</script>
<body>

</body>
</html>

增长:`数组的原型链Array._proto_=Function.prototype`和`数组的原型Array.prototype=[]`

总结

JavaScript中有内置(build-in)构造器/对象共计12个（ES5中新加了JSON），这里列举了可访问的8个构造器。
剩下如Global不能直接访问，Arguments仅在函数调用时由JS引擎建立，Math，JSON是以对象形式存在的，无需new。javascript

prototype

Object.prototype--》Object {}
console.log(typeof Object.prototype)   // object

String.prototype--》String {length: 0, [[PrimitiveValue]]: ""}
console.log(typeof String.prototype)   // object

Number.prototype--》Number {[[PrimitiveValue]]: 0}
console.log(typeof Number.prototype)   // object

Boolean.prototype--》Boolean {[[PrimitiveValue]]: false}
console.log(typeof Boolean.prototype)  // object

Error.prototype--》 D…r.aV {name: "Error", message: ""}
console.log(typeof Error.prototype)    // object

Date.prototype--》  Invalid Date
console.log(typeof Date.prototype)     // object

RegExp.prototype  --》 /(?:)/
console.log(typeof RegExp.prototype)   // object

Array.prototype  --》  []  //！！最重要的是 Array.prototype  --》  []
console.log(typeof Array.prototype)    // object

Function.prototype--》function(){} //！！全部构造器函数的__proto__都指向这个，它是一个空函数（Empty function）
console.log(typeof Function.prototype) // function

Math.prototype-->undefined
JSON.prototype-->undefined
Global不能直接访问

http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html#3412281html

JavaScript系列：再巩固-原型链

图

调试代码

增长:数组的原型链Array._proto_=Function.prototype和数组的原型Array.prototype=[]

总结

prototype

增长:`数组的原型链Array._proto_=Function.prototype`和`数组的原型Array.prototype=[]`