原型与原型链

1.函数与对象的关系

函数是一种对象 // let fun=function(){}
对象都是通过函数实例化来创建的 //let obj1={}; let obj2=new Object()

注：函数与对象是通过函数的一个属性来作为关系纽带的，每个函数都有一个prototype原型属性，这个原型属性本身也是一个包含各种属性的对象，默认情况下，它都会有一个constructor属性，这个属性就代表了当前这个函数

2.原型与原型链

原型

prototype:一般称为显式原型

__proto__:一般称为隐式原型

每一个函数创建之后，都会有一个prototype属性，这个属性表示函数的原型对象，同时这个原型对象本身有一个 constructor属性，指向这个函数本身。除此之外每个对象都有一个隐藏的原型对象__proto__,

隐式原型表示创建这个对象的函数的prototype。

function yl(){}
yl.prototype.a='1';
yl.prototype.b='2';
console.log(yl.prototype)   //{a: '1', b: '2', constructor: ƒ}

let lwl=new yl()    //lwl是yl的实例对象
console.log(lwl.__proto__)   //{a: '1', b: '2', constructor: ƒ}

原型链

当我们访问一个对象的属性时，js会先在这个对象定义的属性中查找，如果没有找到，就会沿着__proto__这个隐式原型关联起来的链条向上一个对象查找，这个链条就是原型链。

注：原型链某种意义上就是让一个引用类型继承另一个引用类型的属性和方法。

作用：实现对象与对象之间的继承。有了继承，就可以编写出可以复用的组件，多个子组件从同一个父组件中继承已有的属性和方法，然后扩展子组件的方法和属性，就可以灵活的编写出各种组件。

function Fun1(){}
 
Fun1.prototype.abc='1';
Fun1.prototype.bca='2';
Fun1.cab='3'
 
let fn1=new Fun1();
fn1.xyz='4';
fn1.bca='5';
 
console.log(fn1.abc)    //1
console.log(fn1.bca)   //5
console.log(fn1.cab)   //undefined
console.log(fn1.xyz)   //4
 
fn1------__proto__------->Fn1.prototype----------->constront------->Fn1-----__proto__------>Function.prototype-------->constront----->Function<br><br>

console.log(fn1.hasOwnProperty('xyz')) //true
console.log(fn1.hasOwnProperty('abc')) //false
console.log(fn1.hasOwnProperty('cab')) //false

console.log(Function instanceof Object) //true
console.log(Function instanceof Function.prototype) //报错
console.log(Object instanceof Function) //true

console.log(Object.prototype.__proto__) //null