js原型继承的几种方法

Posted 2023-03-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js原型继承的几种方法相关的知识，希望对你有一定的参考价值。

参考技术A 利用原型链来实现继承，父类的一个实例作为子类的原型

原理：子类的原型对象指向父类的实例，当子类实例找不到属性和方法时，会沿着原型链往上找。
优点:简单，既是子类实例也是父类实例，父类新加原型方法或者属性，子类都能访问到
缺点：

通过使用call、apply方法可以在新创建的对象上执行构造函数,用父类的构造函数来增加子类的实例

原理：子类的构造函数中执行父类的构造函数，并且改变子类的this绑定

优点：简单，直接父类的属性和方法
缺点：无法继承原型链上的属性方法

将父类原型对象直接赋值给子类的构造函数，再将空属性的构造函数实例赋值给子类原型对象

优点：完美实现继承，解决了组合式继承带两份属性的问题； new Child的时候不用每次都 new Parent
缺点：子类的prototype添加方法会影响父类的prototype;

将父类原型对象直接赋值给子类的构造函数，再将空属性的构造函数实例赋值给子类原型对象

优点：完美实现继承，解决了组合式继承带两份属性的问题； new Child的时候不用每次都 new Parent

将等待继承的原型对象克隆，再赋值给继承的原型对象

优点：直接通过对象生成一个继承该对象的对象
缺点：不是类式继承，而是原型式基础，缺少了类的概念

参考： https://www.jb51.cc/note/413574.html
https://blog.csdn.net/qq_42926373/article/details/83149347

JS 原型继承的几种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">

    function Person() {
        this.name = ‘老王‘;
        this.age = 40;
        
    }
    Person.prototype.showName = function () {
        // alert(this.name);
        alert(this.age);
    };

    function Person1() {
        Person.call(this);
    }
    /*
    ** 方法一 类式继承
    **
    */
    // var F = function () {};
    // F.prototype = Person.prototype;
    // Person1.prototype = new F();
    // Person1.prototype.constructor = Person1;

    /*
    ** 方法二 类式继承2
    **
    */
    // Person1.prototype = Person.prototype;
    // Person1.prototype.constructor = Person1;

    /*
    ** 方法三 拷贝继承
    **
    */
    // extend( Person1.prototype, Person.prototype );
    // function extend( obj1, obj2 ) {
    //     for( var attr in obj2 ){
    //         obj1[attr] = obj2[attr];
    //     }
    // }
    /*
    ** 方法四 原型继承
    **
    */
    var a = {
        age : 1000
    };

    var b = Inherit(a);
    b.age = 24;
    alert(b.age);

    function Inherit(obj) {
        var F = function () {};
        F.prototype = obj;
        return new F();
    }


    // var p1 = new Person1();
    // p1.showName();
    </script>
</body>
</html>

以上是关于js原型继承的几种方法的主要内容，如果未能解决你的问题，请参考以下文章