小笔记：JS原型和原型链

JS原型？

有句简洁直观的描述："原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承"。

在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个"[[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。

"[[Prototype]]"作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了__proto__这个非标准（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器"Object.getPrototype(object)"）。在JavaScript的原型对象中，还包含一个"constructor"属性，这个属性对应创建所有指向该原型的实例的构造函数。

---

提到原型，我们必须要了解下Object和Function：

Object和Function都是JS的自带函数，Object继承自己，Funtion继承自己，Object和Function互相是继承对方，也就是说Object和Function都既是函数也是对象。

//instanceof 就是判断一个实例是否属于某种类型
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

前面提到为了方便查看一个对象的原型，引入"__proto__",那么Function和Object对应的原型是什么？

console.log(Function.__proto__); // ƒ () { [native code] }
console.log(Object.__proto__);  // ƒ () { [native code] }
console.log(Function.__proto__==Function.prototype); //true
console.log(Object.__proto__==Function.prototype); //true

所以,Object 是 Function的实例，而Function是它自己的实例。

说到Function和Object的相互继承和对应原型，可能觉得有点头大，那我们先放一下，让我们先了解下js对象的一些小知识

普通对象和函数对象

万物皆对象,js中对象其实分为函数对象和普通对象。
函数对象可以创建普通对象，普通对象没法创建函数对象，所以普通对象权利最低。

//普通对象
let str=new String();
let num=new Number();
let obj=new Object();
//....

凡是通过new Function创建的对象都是函数对象，其他都是普通对象（通常通过Object创建），可以通过typeof来判断。

function f1(){}; // ==  var f1 = new Function();

function f2(a,b){
  alert(a+b);
}
//等价于
var f2 = new Function(a,b,"alert(a+b)");

说那么多，其实记住下面的内容就好了：

1.每一个函数对象都有一个prototype属性，但是普通对象是没有的；prototype下面又有个construetor，指向这个函数。

2.每个对象都有一个名为_proto_的内部属性，指向它所对应的构造函数的原型对象，原型链基于_proto_;

---

让我们建一个普通函数，可以看到：

var obj = {};
  console.log(obj.prototype); //undefined
  console.log(obj instanceof Object); //true
  console.log(obj.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true
  console.log(Object.prototype.constructor) //function Object()
　console.log(Object.prototype.__proto__); //null

• obj的确没有prototype属性
• obj是Object的实例
• obj的__proto__指向Object的prototype
• Object.prototype.constructor指向Object本身

---

再建一个函数对象：

function Fun(){};
var f1 = new Fun();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Fun); //true
console.log(f1.__proto__ === Fun.prototype); //true
console.log(Fun=== Fun.prototype.constructor) ;//true
console.log(Fun.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

• Fun是函数对象，f1还是普通对象
• f1是Fun的实例
• Fun的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

---

原型链

ECMscript中描述了原型链的概念，并将原型链作为js实现继承的主要方法。
基本思路：利用原型，让一个引用类继承另一个引用类的属性和方法。
构造函数、原型和实例的关系：
    每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
    

其实，avascript中，每个对象都会在内部生成一个proto 属性，当我们访问一个对象属性时，如果这个对象不存在就回去proto 指向的对象里面找，一层一层找下去，这就是javascript原型链的概念。

f1.__proto__ ==> Fun.prototype ==> Fun.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS世界中所有的东西都是对象,所有的东西都由Object衍生而来, 所以所有东西原型链的终点指向null