对象原型 原型 原型链 以及构造函数和实例之间的关系详解

原型

JS中万物皆对象，每一个对象都拥有自己的属性

JS中怎么才能让多个对象共享一个或多个方法呢？原型的出现就是为了解决这个问题

在JS中每个对象都有一个与它关联的对象，叫做原型对象

每次获取对象属性都是一次查询过程，在对象的自由属性中找不到就会去查找它的原型对象

构造函数

构造函数就是用来在创造对象时初始化对象，为对象数据成员赋初始值

实列

根据类创建出来的一个个具体的“对象”

原型 构造函数 实例 之间的关系

<script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
        //一般情况下，对象的方法都在构造函数的原型对象中设置
        // Star.prototype.sing = function() {
        //     console.log('我会唱歌');
        // };
        // Star.prototype.movie = function() {
        //     console.log('我会演电影');
        // }

        //如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，
        //这样修改后的原型对象 constructor  就不再指向当前构造函数了。此时，
        //我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
        Star.prototype = {
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);

        //constructor 主要用于记录该对象引用于哪个构造函数
    </script>

实例 ._proto_ === 原型

实例 .constructor === 构造函数

原型 .constructor === 构造函数

构造函数 .prototype === 原型

const obj = new Object()

obj._proto_ === Object.prototype

obj.constructor === Object

对象原型

function Star(uname, age) {

            this.uname = uname;

            this.age = age;

        }

        //prototype 原型对象 是共享方法 所有成员都可以使用此方法

        Star.prototype.sing = function() {

            console.log('我会唱歌');

        }

        var ldh = new Star('刘德华', 18);

        var zxy = new Star('张学友', 19);

        // 返回true 说明指向一个原型对象

        console.log(ldh.sing === zxy.sing);

        ldh.sing();

        console.log(ldh);

// 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype 所以可以使用原型对象的方法

        console.log(ldh.__proto__ === Star.prototype);

        // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing

        // 如果没有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法 ---自己没有就去原型对象身上找 直到找到Object对象的原型

原型链

（原型连成一条链，js在查找属性过程中，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不，就会去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端 object）

每一个实例对象上有一个proto属性，指向的构造函数的原型对象，构造函数的原型 对象也是一个

对象，也有proto属性，这样一层一层往上找的过程就形成了原型链。

<script>

        function Star(uname, age) {

            this.uname = uname;

            this.age = age;

        }

        Star.prototype.sing = function() {

            console.log('我会唱歌');

        }

        var ldh = new Star('刘德华', 18);

        // 1. 只要是对象就有__proto__ 原型, 指向原型对象

        console.log(Star.prototype);

        console.log(Star.prototype.__proto__ === Object.prototype);

        // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype

        console.log(Object.prototype.__proto__);

        // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null

    </script>

原型链查找规则：

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。

如果还没有就查找原型对象的原型（Object的原型对象）。

依此类推一直找到 Object 为止（null）

原型对象中this指向

原型对象函数里边的this指向的是实例对象