ES6高级-利用原型对象继承方法

最新推荐文章于 2023-10-27 21:14:43 发布

申申あ

最新推荐文章于 2023-10-27 21:14:43 发布

阅读量167

点赞数

分类专栏： ES6 文章标签： es6 javascript

本文链接：https://blog.csdn.net/qq_43781887/article/details/125984769

版权

ES6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们来看下面的代码：

<body>
    <script>
        function Father(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Father.prototype.money = function() {
            console.log('money!');
        }

        function Son(uname, age) {
            Father.call(this, uname, age);
        }
        Son.prototype = Father.prototype;
        Son.prototype.exam = function() {
            console.log('exam');
        }
        var son = new Son('son', 18);
        console.log(son);
        console.log(Father.prototype);
    </script>
</body>

输出结果：

我们就可以发现如果直接把父类的原型对象赋给子类的原型对象，虽然子类可以继承父类的方法，但是如果子类添加方法的话就会对父类造成影响。

原因是因为看下面这个图：

把子原型对象指向了父原型对象，所以修改子原型对象也会修改父原型对象，所以得换一个方法实现方法继承。

更改代码为：

<body>
    <script>
        function Father(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Father.prototype.money = function() {
            console.log('money!');
        }

        function Son(uname, age) {
            Father.call(this, uname, age);
        }
        Son.prototype = new Father();
        Son.prototype.exam = function() {
            console.log('exam');
        }
        var son = new Son('son', 18);
        console.log(son);
        console.log(Father.prototype);
    </script>
</body>

输出结果为：

这样就正常了，原理看下面这张图：

但是上面的代码也有问题，就是这句：Son.prototype = new Father();，这样写的话Son的prototype就没有constructor了，所以需要指回原来的原型对象，加上Son.prototype.constructor=Son();

申申あ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6高级-利用原型对象继承方法

但是上面的代码也有问题，就是这句Son.prototype=newFather();，这样写的话Son的prototype就没有constructor了，所以需要指回原来的原型对象，加上Son.prototype.constructor=Son();我们就可以发现如果直接把父类的原型对象赋给子类的原型对象，虽然子类可以继承父类的方法，但是如果子类添加方法的话就会对父类造成影响。把子原型对象指向了父原型对象，所以修改子原型对象也会修改父原型对象，所以得换一个方法实现方法继承。...
复制链接

扫一扫

专栏目录