面向对象(六)原型的使用方法

原型的使用方法

① 利用对象的动态特性给原型添加属性|方法[如果要添加的方法过多,则有大量重复代码]
② 直接替换原型对象[替换前后创建的对象所指向的原型对象不一致]

替换原型对象（字面量）注意点：

01指向的原型对象
如果是替换了原型对象，那么在替换之前创建的对象和替换之后创建的对象她们指向的原型对象并不是同一个
02 构造器属性
在替换之后创建的对象中，它的构造器属性指向的不是Person构造函数，而是Object的原型对象的构造器属性
建议：
在设置完原型对象之后再统一的创建对象。
总结：
① 当替换构造函数的原型对象的时候,已经使用构造函数创建出来的对象指向的原型对象不会发生改变
② 如果是替换了构造函数的原型对象,那么构造函数的新的原型对象和旧的原型对象之间没有任何关系

---

①利用对象的动态特性来设置原型属性

<script>
    function Person(){
        this.name = "默认的名称";
    }

    // 设置原型对象
    // 增加成员
    Person.prototype.des = '我是一个直立行走的人';
    Person.prototype.logName = function(){
        console.log(this.name);
    };
    //.......................
    //如果要添加大量的属性和方法,则会出现很多重复的代码

    // 修改成员
    Person.prototype.des = '野蛮生长';

    var p1 = new Person();
    console.log(p1);
    console.log(p1.des);
    p1.logName();

    console.log(Person.prototype.hasOwnProperty('des')); //true
    console.log(p1.des);
    console.log(Person.prototype.des);
    console.log(p1.des == Person.prototype.des); //true

    // 删除成员
    console.log(delete p1.des); //true
    console.log(p1.des); //野蛮生长
    /*
     注意：直接用p1.des删除属性，是删除不掉的
     为什么？
     因为p1是Person构造函数创建出来的对象，p1默认拥有了Person原型对象的属性和方法，所以p1.des能够打印出来
     console.log(delete p1.des); //true
     删除一个不存在的属性自动返回true

    */

    console.log(delete Person.prototype.des); //true
    console.log(p1.des);
    console.log(Person.prototype.des);
</script>

---

②替换原型对象 (字面量) --- 替换前后指向的原型对象不是同一个

思考：
1。先创建对象，再来设置（非字面量）原型属性，原型方法，可以调用成功吗？可以
2。先设置（非字面量）原型属性原型方法，再来创建对象，可以调用成功吗？可以
3。如果是替换（字面量方式）了原型对象，那么在替换之前创建的对象，和替换之后创建的对象，他们指向的原型对象并不是同一个。

<script>

    //01 提供一个构造函数
    function Person(){
        this.age = 40;
    }
    //在替换原型对象之前创建对象,其指向的原型对象为Person构造函数所指向的原型对象
    var p1 = new Person();
    Person.prototype.sayHi = function(){
        console.log("hi");
    };

    // 设置原型对象
    // 02 直接替换原型对象(以字面量的方式来创建原型对象) --> 切断
    Person.prototype = {
        name : '默认的名称',
        sayHello:function(){
            console.log("say 什么 hello");
        }
    };

    var p2 = new Person();

    //03 问题:替换原型对象前后所创建的对象,其指向的原型对象不是同一个
    console.log(p1);
    console.log(p2);


    p1.sayHi();
//    p2.sayHi(); //p2.sayHi is not a function

    console.log(p1.name + '--'); //undefined--
    console.log(p2.name + '--'); //默认的名称--

//    p1.sayHello(); //p1.sayHello is not a function
    p2.sayHello();

    console.log(p1.constructor); //Person
    console.log(p2.constructor); //Object
</script>

内存结构图

总结

01 使用字面量的方式创建原型对象(替换原型对象)会切断构造函数和之前的原型对象之间的联系
02 在替换原型对象之前创建的对象和替换之后创建的对象所指向的原型对象不同

②替换原型对象 (字面量) --- 替换前后构造器属性发生改变，需修正

<script>
    function Person(){
        this.age = 40;
    }
    var p1 = new Person();
    Person.prototype = {
        //如果替换了原型对象，那么需要在原型对象中修正构造器属性
        constructor:Person,
        sayHi:function(){
            console.log("hi");
        }
    }
    var p2 = new Person();
    console.log(p1);
    console.log(p2);
    console.log(p1.constructor);
    console.log(p2.constructor);
    console.log(p2.constructor == p2.__proto__.constructor);
    console.log(p2.constructor == Object.prototype.constructor);
</script>

核心代码 -> constructor:Person

问题：在替换之后创建的对象，它的构造器属性指向的不是Person构造函数，而是Object.prototype的构造器属性

方案：如果替换了原型对象，那么需要在原型对象中修正构造器属性
思考：constructor属性在原型对象也有，在实例对象也有，那么， 到底在谁身上修改
注意：p2.constructor = Person 这样修改完是没有用的，相当于在p2身上添加了一个属性，对其他的对象没有作用。

内存结构图