前端原型与原型链的原理

1.函数的prototype属性

每个函数都有一个prototype属性，它默认指向一个空Object实例对象（原型对象）ps：只有Object例外，即Object.prototype instanceof Object 为 false

function A(){}//内部语句：this.prototype = {}
console.log(A.prototype);//默认指向一个空对象

原型对象中有一个属性constructor，它指向函数对象

console.log(A.prototype.constructor === A );//true

给原型对象添加属性（一般都是方法），作用：函数的所有实例对象自动拥有原型中的属性（方法）

function A(){}
var a = new A //内部语句 ：this.__proto__ = A.prototype
A.prototype.test = function () {
   console.log('test');
}
a.test() //test

2.显式原型和隐式原型

每个function（A）都有一个prototype，即显式原型（属性）

每个实例对象（a）都有一个__proto__，即隐式原型（原型）

对象的隐式原型的值为其对应构造函数的显式原型的值，即：

console.log(A.prototype === a.__proto__);//true

3.原型链

访问一个对象的属性时，现在自身属性查找，若无，再沿着__proto__这条链向上查找，若无，返回undefined

别名：隐式原型链

例：

function Fn(){
    this.test1 = function () {
        console.log('test1');
    }
}  
var fn = new Fn
Fn.prototype.test2 = function () {
    console.log('test2');
}
fn.test1() //test1
fn.test2() //test2
console.log(fn.toString());//[object Object]
fn.test3() //test3 is not a function
       
        

重点：实例对象的隐式原型=函数对象的显式原型

补充：关于Function、Object间原型的关系问题

关键在于：

Function = new Function()
Object = new Function()

4.instanceof

A instanceof B 判断A是否为B的实例
即判断B的原型（prototype）是否在A的原型(隐式__proto__)链上

5.测试题

function A() {}
A.prototype.n = 1
var b = new A()
A.prototype = {
    n:2,
    m:3
}

var c= new A()
console.log(b.n,b.m,c.n,c.m);

答案：1 undefined 2 3
重点：A的prototype改变之后，实例b的__proto__指向的仍然是之前的prototype，没有改变

 var F = function () {}
 Object.prototype.a = function(){console.log('a');}
 Function.prototype.b = function(){console.log('b');}
 var f =new F()
 f.a()//a
 F.a()//a
 F.b()//b
 f.b()//f.b()is not a function

一图解释：