js原型初步介绍

js原型是js原型对象的一种对象属性，在Javascript中，每一个函数都会有这个属性，这个属性就是prototype。

prototype的作用

prototype对象属性多用于构造函数中，因为在构造函数中构造函数的每个方法都是需要在实际运用的对象中重新创建一遍，不能重复使用的。这样代码会非常的臃肿，会造成资源浪费。但我们使用prototype原型对象给构造函数就可以很好的解决这个问题，被添加到prototype原型上的方法，会被构造函数构造出来给所有对象共享。

不使用prototype

<script>
    let arr = [1, 2, 3, 4, 5];
    //声明一个求和的函数
    arr.sum = function() {
        let res = 0;
        for (let i = 0; i < this.length; i++) {
            res += this[i];
        }
        return res;
    }
    alert(arr.sum()); //15

    let arr2 = [10, 20, 30, 40, 50];
    // alert(arr2.sum());//会报错，因为匹配不到这个方法

    arr2.sum = function() {
        let res = 0;
        for (let i = 0; i < this.length; i++) {
            res += this[i];
        }
        return res;
    }
    alert(arr2.sum()); //150
    alert(arr.sum == arr2.sum); //false
</script>

使用prototype

<script>
    Array.prototype.sum = funtion() {
        let res = 0;
        for (let i = 0; i < this.length; i++) {
            res += this[i];
        }
        return res;
    }

    let arr1 = [1, 2, 3, 4, 5];
    let arr2 = [10, 20, 30, 40, 50];

    alert(arr1.sum()); //15
    alert(arr2.sum()); //150

    alert(arr1.sum == arr2.sum); //true
</script>

在使用prototype后我们的代码都是变得简便很多，非常的好用

原型链

构造函数构造出来的对象，会拥有一个__proto__的这么一个属性，这个__proto__还会有它自己的__proto__，以此类推，就形成了一个原型链。
简单来说就是构造函数构造出来的对象有__proto__属性，构造出来的函数有prototype属性
然后在生成对象的时候，所生成的对象的__proto__属性是指向函数的prototype属性。

原型链解说图

<script>
    function star(uname, age) {
        this.unameuname;
        this.ageage;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    let 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_原型 指向为nu11
</script>

prototype和__proto__的区别

prototype是函数独有的属性，在对象上没有这个属性

<script>
    function star() {
        alert(我是一个程序员);
    };
    let arr = [1, 2, 3];

    console.log(star.prototype); //[object Object]
    console.log(arr.prototype); //undefined
</script>

但是在函数上有__proto__这个属性

<script>
    function star(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    star.prototype.showName = function() {
        alert("我的名字叫：" + this.name);
    }
    star.prototype.showSex = function() {
        alert("我的性别是：" + this.sex);
    }
    let p1 = new star('刘德华', '男');

    console.log(star.__proto__); //  ƒ () { [native code] }
    console.log(p1.__proto__); //Object
</script>

prototype和__proto__的相同

prototype和__proto__相同的地方在于都是指向原型对象的，而区别在于 prototype 是针对函数，而__proto__针对的是对象。

<script>
    function star(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    star.prototype.showName = function() {
        alert("我的名字叫：" + this.name);
    }
    star.prototype.showSex = function() {
        alert("我的性别是：" + this.sex);
    }
    let p1 = new star('刘德华', '男');

    console.log(star.prototype); //Object
    console.log(p1.__proto__); //Object
    alert(star.prototype === p1.__proto__); //true
</script>