再学javascript之原型和原型链

一，函数对象

                所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）

                所有函数拥有prototype属性（显式原型）（仅限函数）

                原型对象：拥有prototype属性的对象，在定义函数时就被创建

              javascript为什么要创造原型对象？

1、函数有属性和行为。属性是在每各实例中各不相同。而方法在调用时，每次都相同，为了节省内存空间，就把行为（也就是对象中的函数）放在原型对象中，使得每个实例化对象都能访问并使用。而不能使用函数的属性，属性是在每个实例化对象中独自占有。（当然也可以为原型对象中添加属性）。

2、原型 对象在创建时，其实是一个空对象

Person.prototype.showName = function () { console.log(this.name); }

经过这样放入方法。

 

3、什么是原型对象
    1. 每个函数都有一个prototype属性，该属性指向的是原型对象(显示原型对象)
    2. 每个实例对象身上都有一个__proto__属性，该属性指向的也是原型对象(隐式原型对象)
    3. 构造函数的显示原型 === 当前构造函数实例对象的隐式原型对象
    4. 原型对象的本质： 普通的Object实例

 

隐式原型对象:

设计之初[[prototype]]（_proto_）这个属性是不允许被访问的。之是后来浏览器提供了。原来只能通过——函数 点 prototype。对原型对象进行访问。所以在后来使用_proto_进行访问原型对象称为隐式原型对象。

 用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.__proto__。但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

这里的原型对象是什么，我们暂时不管

 

二，构造函数

                先复习下构造函数

1、是否是构造函数，不是在创建时决定的，而是在使用时决定的。如果new一个函数，则这个函数就是构造函数。否则就是普通函数。

//创建构造函数
        function Word(words){
            this.words = words;
        }
        Word.prototype = {
            alert(){
                alert(this.words);
            }
        }
        //创建实例
        var w = new Word("hello world");
        w.print = function(){
            console.log(this.words);
            console.log(this);  //Person对象
        }
        w.print();  //hello world
        w.alert();  //hello world

   print()方法是w实例本身具有的方法，所以w.print()打印hello world；alert()不属于w实例的方法，属于构造函数的方法，w.alert()也会打印hello world，因为实例继承构造函数的方法。

                实例w的隐式原型指向它构造函数的显式原型，指向的意思是恒等于

         w.__proto__ === Word.prototype

    当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性：

                w本身没有alert()方法，所以会去Word()的显式原型中调用alert()，即实例继承构造函数的方法。        

三，原型和原型链

在学习原型和原型链之前，先熟悉以下概念

1、所有函数既是对象也是函数。

2、当函数作为对象时，都是new Function这个内置函数出来的

3、所有的“原型对象”都是Object的实例之一（所有的实例对象都是基于Object的原型对象这条链出来)

4、Object和Function函数 是new Function出来的，实际上并没有进行new，是在引擎中已经预先定义好，为了使普通函数对象能使用 “.toString（在object原型对象中）”等这个方法，使得Object和Function有联系。

  //案例1
  function Foo() {  }
  var f1 = new Foo();
  console.log(f1 instanceof Foo); // true
  console.log(f1 instanceof Object); // true
//只要是左侧在右侧的原型链上，就是左侧的实例对象
  //案例2
  console.log(Object instanceof Function)  //  true
  console.log(Object instanceof Object) // true
  console.log(Function instanceof Object) // true
  console.log(Function instanceof Function) // true
  function Foo() {}
  console.log(Object instanceof  Foo); // false

 

 

        Function.prototype.a = "a";
        Object.prototype.b = "b";
        function Person(){}
        console.log(Person);    //function Person()
        let p = new Person();
        console.log(p);         //Person {} 对象
        console.log(p.a);       //undefined
        console.log(p.b);       //b

  想一想p.a打印结果为undefined，p.b结果为b

                解析：

                p是Person()的实例，是一个Person对象，它拥有一个属性值__proto__，并且__proto__是一个对象，包含两个属性值constructor和__proto__

1.   console.log(p.__proto__.constructor); //function Person(){}

2. console.log(p.__proto__.__proto__); //对象{}，拥有很多属性值

                我们会发现p.__proto__.constructor返回的结果为构造函数本身，p.__proto__.__proto__有很多参数

       我们调用constructor属性，p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数，Person.prototype的隐式原型的constructor指向Object()，即Person.prototype.__proto__.constructor == Object()

             从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype

                所以p.b打印结果为b，p没有b属性，会一直通过__proto__向上查找，最后当查找到Object.prototype时找到，最后打印出b，向上查找过程中，得到的是Object.prototype，而不是Function.prototype，找不到a属性，所以结果为undefined，这就是原型链，通过__proto__向上进行查找，最终到null结束

1. console.log(p.__proto__.__proto__.__proto__); //null

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

                大家理解刚才的过程，相信下面这些应该也都明白

1. //Function

2. function Function(){}

3. console.log(Function); //Function()

4. console.log(Function.prototype.constructor); //Function()

5. console.log(Function.prototype.__proto__); //Object.prototype

6. console.log(Function.prototype.__proto__.__proto__); //NULL

7. console.log(Function.prototype.__proto__.constructor); //Object()

8. console.log(Function.prototype.__proto__ === Object.prototype); //true

                总结：

                1.查找属性，如果本身没有，则会去__proto__中查找，也就是构造函数的显式原型中查找，如果构造函数中也没有该属性，因为构造函数也是对象，也有__proto__，那么会去它的显式原型中查找，一直到null，如果没有则返回undefined

                2.p.__proto__.constructor  == function Person(){}

                3.p.___proto__.__proto__== Object.prototype

                4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null         

                5.通过__proto__形成原型链而非protrotype

 

                最后附上一张图，大家阅读完之后，看图应该可以很容易理解

补充一个小知识点：

 

/*
  测试题1
   */
  var A = function() {

  }
  console.log(A.prototype);//能看到n，但其实chrom浏览器已经预加载了全部代码 ，只在谷歌是有n，在ie里面没n。
  console.log(A.prototype.n);//最后consolo输出都是没有n的
  A.prototype.n = 1
  console.log(A.prototype);

  var b = new A() // {n: 1}

  A.prototype = {
    n: 2,
    m: 3
  }

  var c = new A()
  console.log(b.n, b.m, c.n, c.m) // 1 undefined 2 3