红宝书p245原型式继承

于慨

已于 2024-11-29 22:57:32 修改

阅读量185

点赞数

分类专栏：红宝书

于 2021-01-07 20:17:06 首次发布

本文链接：https://blog.youkuaiyun.com/ike_yu/article/details/112303483

版权

面向对象编程

红宝书专栏收录该内容

17 篇文章

订阅专栏

本文详细探讨了JavaScript中原型式继承的工作原理，通过实例展示了如何使用`object`函数创建子类，以及原型链、属性添加和修改对子类实例的影响。重点介绍了规范化用法（Object.create()）和注意事项，涵盖了关键概念和技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【红宝书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>

在这里插入图片描述