JS 原型及原型链的理解

   //通过自己理解可以说，也可以按下面方式说。

回答原型及原型链概念问题可以从以下方面解说

原型链作用代码复用和继承。

执行顺序：

<script >
        function Fun(){
                //this.run = 1;
        }
        Fun.prototype.run = 2;

        var obj = new Fun();

        //obj.run = 3;
        obj.__proto__.run = 4;
        Object.prototype.run = 5;
        console.log(obj.run) //执行结果如下：

                                         1）先从对象本身查找 打印3 。

                                         2）对象本身中没有再从-->构造函数中查找 打印1。

                                         3) 构造函数中没有再从-->对象原型中查找 打印 4 。

                                         4）对象原型中没有再从-->构造函数原型中查 打印2。

                                        5）构造函数中没有再次--》当前原型中的原型中查找。

                                        6）  当前原型中的原型中查找没有--》原型中的原型中的原型--null

        console.log(obj.__proto__)// fun
        console.log(obj.__proto__.__proto__)// Object

         console.log(obj.__proto__.__proto__.__proto__)// null
</script>

 

1 原型：

构造函数（person）在创造的时候，默认有prototype属性，对应一个空对象(之所以是空对象是没有我们定义的属性和方法)， 这个空对象就是原型对象。

//显示原型和隐私原型

  显示原型：每个构造函数都有一个prototype属性，既显示原型

  隐式原型：每一个实例对象都有一个__proto__,既隐式原型

  构造函数的显示原型 等于 对象的隐式原型。

function person(){}

var fun = new person()

console.log(person.prototype === fun.__proto__) //true

2 原型链

查找对象中的属性和方法，如果没找到一直往上找，直到找到object--null为止

function Fun1(){ //Fun1(this).prototype = {} //显示原型 -- 可以增加属性和方法

  this.test1 = function(){ //显示原型中可以增加属性和方法

    console.log(1);

  }

}

Fun1.prototype.test2 = function(){

  console.log(2)

}

var Fun2 = new Fun1();//隐式原型 Fun2(this).__proto__ == Fun1.prototype

console.log(Fun2.test1()) //1

console.log(Fun2.test2()) //2

console.log(Fun2.toString()) //[object object]//找到了对象，继续找就是null

console.log(Fun2.test3()) //报错--没有test3方法