技術標籤：紅寶書面向物件程式設計

【紅寶書p245原型式繼承】

1，呼叫函式，返回一個原型是父類物件的空子物件，檢視空子物件結構

<script>
        function object(o) {
            // 注意：object只是一個普通的函式
            // F()相當於子類
            function F() { }
            F.prototype = o;
            return new F();
        }
       **// 注意：父類的例項用字面量物件來表示**
        let person = {
            name: 'ike',
            friends: ['tom', 'jack']
        }
        let otherPerson = object(person);
        // otherPerson就是一個原型為person的空物件
        console.dir(otherPerson);
    </script>
 

2，給子類例項新增屬性，子類原型屬性新增引用值，檢視結構

<script>
        function object(o) {
            // 注意：object只是一個普通的函式
             // F()相當於子類
            function F() { }
            F.prototype = o;
            return new F();
        }
        let person = {
            name: 'ike',
            friends: ['tom', 'jack']
        }
        let otherPerson = object(person);
        // otherPerson就是一個原型為person的空物件
        otherPerson.name = 'tom';
        // 給子類物件新增屬性
        otherPerson.friends.push('lucy');
        console.dir(otherPerson);
    </script>
 

3，建立第二個子類例項，檢視結構

<script>
        function object(o) {
            // 注意：object只是一個普通的函式
            // F()相當於子類
            function F() { }
            F.prototype = o;
            return new F();
        }
        let person = {
            name: 'ike',
            friends: ['tom', 'jack']
        }
        //建立一個例項
        let otherPerson = object(person);
        // otherPerson就是一個原型為person的空物件
        otherPerson.name = 'tom';
        // 給子類物件新增屬性
        otherPerson.friends.push('lucy');
        // 新建第二個子類例項
        let otherPerson2 = object(person);
        console.dir(otherPerson2);
    </script>
 

4，注意，修改子類例項原型(父例項)屬性，會將父物件屬性更改，造成所有子類例項的原型都一樣（都是修改後的結果）

<script>
        function object(o) {
            // 注意：object只是一個普通的函式
            // F()相當於子類
            function F() { }
            F.prototype = o;
            return new F();
        }
        let person = {
            name: 'ike',
            friends: ['tom', 'jack']
        }
        //建立一個例項
        let otherPerson = object(person);
        // otherPerson就是一個原型為person的空物件
        otherPerson.name = 'tom';
        // 給子類物件新增屬性（注意：父例項物件裡面的屬性會被更改）
        otherPerson.friends.push('lucy');
        // 修改原型上面的屬性值
        otherPerson.__proto__.name = 'jason';
        console.dir(otherPerson);

        // 新建第二個子類例項
        let otherPerson2 = object(person);
        otherPerson2.friends.push('lily')
        console.dir(otherPerson2);
        console.log(otherPerson.__proto__ === otherPerson2.__proto__);
    </script>

子類所有例項的原型都一樣，不管修改父物件屬性的先後順序
5，規範化原型式繼承（es5的Object.create()）

<script>
        let person = {
            // 原型物件
            name: 'ike',
            friends: ['tom', 'jack']
        }
        // es5中Object.create(父類例項,[子類屬性及其特性])建立子類例項
        let otherPerson = Object.create(person, {
            age: {
                value: 24,
            }
        });
        console.dir(otherPerson);
    </script>