构造函数和原型

1.概述

2.构造函数

3.静态成员和实例成员

<script>
        function Star(uname, age) {
           this.uname = uname;
           this.age = age;
           this.sing = function() {
               console.log('Hi');
           }
        }
        var hhh = new Star('hhh', 18);
        //实例成员就是构造函数内部通过this添加的成员，uname、age、sing
        //实例成员只能通过实例化的对象来访问
        console.log(hhh.uname);
        hhh.sing();
        //静态成员,在构造函数本身添加的成员，sex
        Star.sex = 'male';
        //静态成员只能通过构造函数来访问
        console.log(Star.sex);
    </script>

• 实例成员就是构造函数内部通过this添加的成员
• 实例成员只能通过实例化的对象来访问
• 静态成员,在构造函数本身添加的成员
• 静态成员只能通过构造函数来访问

4.构造函数和原型prototype

<script>
                function Star(uname, age) {
                   this.uname = uname;
                   this.age = age;
                }
                //原型对象，节约内存资源
                //放在构造函数中会不断开辟内存空间
                Star.prototype.sing() = function() {
                    console.log('Hi');
                }
                var hhh = new Star('hhh', 18);
                hhh.sing();
                //一般情况下，公共属性定义在构造函数内，公共方法放在原型对象上
            </script>

• 原型对象，节约内存资源
• 构造函数会不断开辟内存空间,造成内存资源浪费
• 一般情况下，公共属性定义在构造函数内，公共方法放在原型对象上

5.对象原型__proto__

• 如果修改了原来的原型对象，给原型对象赋值的是一个对象，原来的constructor被覆盖，可利用constructor指向原来的构造函数
• 对象自动添加一个__proto__指向构造函数的原型对象

6.constructor构造函数

<script>
            function Star(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            //赋值操作使得原来的constructor被覆盖
            Star.prototype = {
                constructor: Star, 
                sing: function() {  
                    console.log('hi');
                },
                movie: function() {
                    console.log('hello');
                }
            }
            var hhh = new Star('hhh', 18);
            hhh.sing();
                //手动利用constructor属性返回原来的构造函数
            console.log(Star.prototype.constructor);
            console.log(hhh.__proto__.constructor); 
                //方法查找：首先查找hhh上是否有sing方法，如果有就执行
                //如果没有，因为__proto__的存在，就去构造函数原型对象prototype查找
            </script>

7.构造函数、实例、原型对象之间的关系

• ldh.proto.constructor会先指向Star原型对象prototype，再指回Star构造函数

8.原型链

9.原型链成员查找规则

<script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
            console.log('hi');
        }
        //hhh.sex = 1;  定义实例的sex，结果将会得到1
        //Star.prototype.sex = 0;  
        //实例的sex不存在,将会沿着原型链向上查找，结果得到0
        Object.prototype.sex = 2;
        //如果Star.prototype.sex也不存在，继续腌着原型链查找，结果得到2
        //如果Object.prototype.sex也不存在，结果将得到undefined
        var hhh = new Star('hhh', 18);
        console.log(hhh.sex);
        //如果实例的sex和Star.prototype.sex同时存在，将根据就近原则得到实例中的sex
    </script>

10.原型对象中的this指向

<script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        var that;
        Star.prototype.sing = function() {
            console.log('hi');
            that = this;
        }
        var hhh = new Star('hhh', 18);
        hhh.sing();
        console.log(that === this);
    </script>

• 在构造函数中，this指向的是对象实例hhh
  原型对象里的this指向的也是实例对象hhh

11.利用原型对象扩展内置对象方法

<script>
        //console.log(Array.prototype); 没有sum方法
        Array.prototype.sum = function() {
            var sum = 0;
            for (var i = 0; i < this.length; i++)
               sum += this[i];
            return sum;       
        }
        var arr = [1, 2, 3];
        console.log(arr.sum());
        console.log(Array.prototype); //有sum方法
    </script>