JavaScript原型

构造函数

在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征。

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new一起使用。我

们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

ps:构造函数名首字母大写，必须使用new关键字调用

        function Star(uname,age) {
            this.uname = uname
            this.age = age
            this.sing = function () {
                console.log('我会唱歌');
            }
        }
        var ldh = new Star('刘德华',19)
        var zxy = new Star('张学友',19)
        console.log(ldh);
        ldh.sing()

new在执行时会做四件事情:

①在内存中创建一个新的空对象。

②让this指向这个新的对象。

③执行构造函数里面的代码,给这个新对象添加属性和方法。

④返回这个新对象(所以构造函数里面不需要return)。

实例成员&静态成员

构造函数的属性和方法称为成员

实例成员

实例成员就是构造函数内部通过this添加的成员/通过实例对象添加的成员

实例成员只能通过实例化的对象来访问

        console.log(ldh.uname);//刘德华
        ldh.sing()//我会唱歌

静态成员

在构造函数上添加的成员

静态成员通过构造函数来访问

        Star.gender = 'male'
        console.log(Star.gender);//male

原型对象（prototype）

构造函数方法很好用,但是存在浪费内存的问题。

构造函数里的方法存在不同的空间里，因为每new一次开辟一个新空间

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

JavaScript规定,每一个构造函数都有一个 prototype属性,指向另一个对象。 注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。

我们可以把那些不变的方法,直接定义在prototype原型对象上,这样所有对象的实例就可以共享方法，节约内存

        function Star(uname, age) {
            this.uname = uname
            this.age = age
        }
        Star.prototype.sing = function () {
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 19)
        var zxy = new Star('张学友', 19)
        console.log(ldh.sing === zxy.sing);//true
        ldh.sing()//我会唱歌
        zxy.sing()//我会唱歌

一般我们把公共的属性定义到构造函数里面，公共的方法放到原型对象里面

为什么这里可以采用实例化访问原型对象里的方法呢？

对象原型（__proto__）

每个对象都会有一个属性：__proto __，它指向构造函数的 prototype原型对象,之所以我们实例对象可以使用构造函数里的prototype原型对象的属性和方法,就是因为有对象属性： __proto__原型的存在。

        ldh.sing()//我会唱歌
        zxy.sing()//我会唱歌
        console.log(ldh.__proto__ === Star.prototype);//true

方法的查找规则：首先看ldh对象身上是否有sing方法，如果有就执行此对象上的sing方法

如果没有，因为每个对象有__proto__属性的存在，就会去构造函数的原型对象prototype去查找sing方法

constructor

对象原型(__proto__) 和构造函数的( prototype )原型对象里面都有一个属性constructor , constructor我们称为构造函数,因为它指回构造函数本身。

constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。

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

多数情况下，我们需要手动利用constructor属性指回原来的构造函数

若有多个方法，采用对象的形式来存储，如下

        Star.prototype = {
            sing: function () {
                console.log('我会唱歌');
            },
            act: function () {
                console.log('我会演戏');
            }
        }

观察constructor的指向

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

指向改变，没有指向构造函数，而是指向Object

why?

因为采用对象的形式储存是重新赋值，改变了构造函数的地址。而之前我们是给原构造函数添加方法，并没有改变构造函数的地址。

请观察改变后的原型对象：

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

这时，我们需要手动利用constructor属性指回原来的构造函数，如下

        Star.prototype = {
            constructor: Star,
            sing: function () {
                console.log('我会唱歌');
            },
            act: function () {
                console.log('我会演戏');
            }
        }

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

原型链

原型对象也是一个对象，所以里面也有__proto__属性。实例化对象的__proto__指向构造函数的prototype原型对象。那么原型对象的__proto__属性指向谁呢？

它指向Object构造函数的prototype原型对象。

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

Object.prototype原型对象也是一个对象，那么它的__proto__ 属性指向谁呢？

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

Object.prototype.__proto__指向空null

成员的查找机制

当访问一个对象的属性(包括方法)时,首先查找这个实例对象自身有没有该属性。

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

如果还没有就查找原型对象的原型( Object的原型对象)。

依此类推一直找到Object为止 ( null )。

__proto__ 对象原型的意义就在于为对象成员查找机制提供一个方向 ,或者说一条路线。

        console.log(ldh.gender);//undefined
        Star.prototype.gender = 'male'
        console.log(ldh.gender);//male

1.ldh.gender，实例化对象上没有此属性，通过原型链查找，所有的原型对象上都没有此属性打印undefined

为什么打印undefined而不是null?

因为undefined表示没有定义，而null表示一个空的对象引用。当你尝试访问一个原型链上没有定义的属性时，它将返回undefined，而不是null。

2.Star.prototype.gender = 'male'是给Star构造函数的原型对象prototype添加一个gender属性,

通过原型链的查找机制，自己的实例对象里没有就去它的构造函数的原型对象里查找，找到了就打印male.

通过上图可知，我们可知静态成员不会影响原型链，不会影响实例化对象

        ldh.gender = 'male';
        Star.gender = 'female';
        console.log(Star.gender);//female
        console.log(ldh.gender);//male
        console.log(zxy.gender);//undefined

就近原则

        ldh.gender = 'male';
        Object.prototype.gender = 'female'
        console.log(ldh.gender);//male

若没有赋值不是添加实例成员，如下

        ldh.gender;
        Object.prototype.gender = 'female'
        console.log(ldh.gender);//female

给实例对象添加实例方法

        ldh.jump = function () {
            console.log('我是给实例对象添加方法');//我是给实例对象添加方法
        }
        ldh.jump()

若没有给实例对象添加实例方法，原型链上的所有原型对象都没此方法，直接调用会报错，不会同变量那样打印undefined，因为没有声明该方法

ldh.jump()//报错

若原型链上有此方法就执行此方法，若方法同名遵循就近原则。

        Star.prototype.sing = function () {
            console.log('我会唱爱你一万年');
        }
        Object.prototype.sing = function () {
            console.log('我会唱恭喜发财');
        }
        ldh.sing()//我会唱爱你一万年

原型对象this指向

在构造函数中，this指向的是实例化对象

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

        function Star(uname, age) {
            this.uname = uname
            this.age = age
        }
        let that;
        Star.prototype.sing = function () {
            console.log('我会唱歌');
            that = this
        }
        let ldh = new Star('刘德华', 19)
        ldh.sing()
        console.log(that === ldh);//true

扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

        Array.prototype.sum = function () {
            var sum = 0
            for (let i = 0; i < this.length; i++) {
                sum += this[i]
            }
            return sum
        }
        let arr = [1, 2, 3, 4, 5, 6]
        console.log(arr.sum());//21

注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {} ,因为修改了地址，是重新赋值。只能是Array.prototype.xx = function0f的方式来追加方法。