JavaScript原型链prototypeproto详解

　　1、背景
　　Javascript的继承模型、原型链等等概念比较晦涩难懂, 很多人过去在使用Javascript的时候并没有刻意去搞明白其中的原理,今天笔者一步一步分析一下JavaScript中的继承、原型链、prototype、__proto__。 笔者并不打算写过多的文字解释原理,而是希望将原理总结成代码片段更便于理解。
　　2、JavaScript继承是如何实现的?
　　你只需要知道JavaScript 是通过名叫原型链的东西来实现继承的,依托于constructor.prototype属性(构造函数的prototype属性)即可。 你现在并不需要明白原型链是什么东西我会在下面一步一步详解。
　　3、 javascript通过prototype实现继承
　　function Animal() {    this.echo=function () {        console.log(＂I am An Animal....＂)    };    this.value=1; } function Monkey() {  } //将构造函数Monkey的prototype属性设置为一个Animal的对象,Monkey就拥有了Animal的所有属性和方法 Monkey.prototype=new Animal(); new Monkey().echo(); console.log(new Monkey().value);
　　4、prototype、__proto__解析区别
　　我们知道在JavaScript中我们可以通过new 创建一个对象,我们是根据一个函数模板创建一个对象。也就是说如下代码
　　Animal函数便是函数模板,类似C++/java等的类的概念,然而 new Animal出来的就是对象的概念。
　　function Animal() {    this.echo=function () {        console.log(＂I am An Animal....＂)    };    this.value=1; }
　　代码1
　　__proto__属性是对象的一个属性,在ECMAScript规范中是不暴露的,但是有些浏览器可以访问到,对象的这个属性值就是函数模板的prototype值,
　　不知道这样说是不是不容易理解,换一个方式吧 :对象.__proro__===函数模板.prototype,前提这个对象时 这个函数new出来的。
　　5、通过设置上下文this的方式实现继承
　　我们都知道函数中在可以使用this引用当前上下文, 下面这段代码就是通过设置构造函数的上下文this的方式实现了继承,下面我给出两段代码分别仔细阅读下,琢磨一下代码所表达的意思。
　　代码1
　　function Animal() {     this.echo=function () {         console.log(＂I am An Animal....＂)     };     this.value=1; } //创建一个字面对象 三个方式都创建了对象 var obj1=new function () {}; var obj2={}; var obj3=[] //分别将三个对象设置成Animal构造函数的上下文 并且调用Animal函数,那么这个时候Animal函数中的this=obj1,obj2,obj3 Animal.call(obj1); Animal.call(obj2); Animal.call(obj3); obj1.echo(); obj2.echo(); obj3.echo();
　　代码2
　　function Animal() {     this.echo=function () {         console.log(＂I am An Animal....＂)     };     this.value=1; }  function  Monkey() {     Animal.call(this); } new Monkey().echo();6、什么是原型链？
　　这个概念其实比较好理解,如果我们调用一个对象的一个方法,如何这个方法不存在那么就回去他的__proto__寻找,如果找到直接返回,如果没找到那么继续__proto__.__proto__中寻找,就像如下代码这样, B是如何找到value的。
　　代码1
　　var A={value:1}; var B={}; B.__proto__=A; console.log(B.value);
　　function A() {     this.value=1; } function B() { } B.prototype=new A(); console.log(new B().__proto__.value);
　　代码3
　　function A() {     this.value=1; } function B() { } B.prototype=new A(); console.log(new B().value);
　　7、总结一些关于JavaScript 继承、类型判断 、prototype的用法
　　判断一个字面定义数组的原型的类型,输出是[object Array]Object.prototype.toString.call([1].__proto__)
　　下面演示了数组和对象的关系, 原型链 []->Array->Object 下面返回true
　　Object.prototype===[].__proto__.__proto__
　　[].__proto__.__proto__.toString()
　　instanceof - JavaScript | MDN
　　Object.prototype.toString([])
　　通过call调用toString方法并且设置上下文获取真实类型
　　console.log(Object.prototype.toString.call([])); console.log(Object.prototype.toString.call(/x/)); console.log(Object.prototype.toString.call(/x/)); console.log([].__proto__.__proto__.toString.call(/x/ig)); console.log([].__proto__.__proto__.toString.call(null));
　　输出结果