JS继承的六种方法代码实现

最新推荐文章于 2021-10-27 21:46:06 发布

王钱青

最新推荐文章于 2021-10-27 21:46:06 发布

阅读量286

点赞数

分类专栏： js继承文章标签： javascript 继承

本文链接：https://blog.csdn.net/weixin_43359898/article/details/90025146

版权

js继承专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS继承的六种方法</title>
    <script>

        /* ------------------原型链继承------------------ */
        // 父类构造函数
        function SuperType() {
            this.property = true;
        }

        // 父类原型方法
        SuperType.prototype.getSuperValue = function () {
            return this.property;
        }

        //子类构造函数
        function SubType() {
            this.subproperty = false;
        }

        // 子类原型对象指向父类实例实现继承
        SubType.prototype = new SuperType();

        SubType.prototype.getSubValue = function () {
            return this.subproperty;
        }

        var sub = new SubType();

        console.log(sub.getSuperValue());
        /* ------------------原型链继承------------------ */

        /* ------------------借用构造函数继承------------------ */
        function SuperType() {
            this.colors = ["red", "blue", "green"];
        }

        function SubType() {
            SuperType.call(this);
        }

        var sub1 = new SubType();
        sub1.colors.push("black");
        console.log(sub1.colors); // ["red", "blue", "green", "black"]
        var sub2 = new SubType();
        console.log(sub2.colors); // ["red", "blue", "green"]


        // 例2
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

        }

        Person.prototype.sayName = function () {
            alert(this.name);
        }// 相对子类实例不可见，不可用

        function Student(name, age, sex, weight) {
            Person.call(this, name, age, sex);

            this.weight = weight;
        }

        var s1 = new Student("梁真真", 23, "女", "47kg");

        console.log(s1);

        /* ------------------借用构造函数继承------------------ */

        /* ------------------组合继承------------------ */

        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.friends = ["王华", "李明"];
        }

        Person.prototype.sayName = function () {
            alert(this.name);
        }

        function Student(name, age, sex, height) {
            Person.call(this, name, age, sex);
            this.height = height;
        }

        Student.prototype = new Person();
        Student.prototype.sayHeight = function () {
            alert(this.height);
        }
        var s1 = new Student("王钱青", 24, "男", "186cm");

        console.log(s1);


        /* ------------------组合继承------------------ */

        /* ------------------原型式继承------------------ */

        var person = {
            name: "梁真真",
            friends: ["wqq", "wnf", "wqq"]
        };
        var p1 = Object.create(person, {
            name: {
                value: "汪曾祺"
            }
        });

        console.log(p1);

        /* ------------------原型式继承------------------ */

        /* ------------------原型式继承------------------ */

        function object(o) {
            function F() {
            }

            F.prototype = o;
            return new F();
        }

        function createAnother(ori) {
            var clone = object(ori);

            clone.sayHi = function () {
                alert("Hi");
            };

            return clone;
        }

        var person = {
            name: "wqq",
            friends: ["lzz", "zjs", "wzq"]
        };
        var anotherPerson = createAnother(person);
        console.log(anotherPerson);

        /* ------------------原型式继承------------------ */


        /* ------------------寄生组合式继承------------------ */

        function object(o) {
            function F() {
            }

            F.prototype = o;
            return new F();
        }

        function inheritPrototype(superType, subType) {
            var prototype = object(superType.prototype);
            prototype.constructor = subType;
            subType.prototype = prototype;
        }

        function SuperType(name) {
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }

        SuperType.prototype.sayName = function () {
            alert(this.name);
        };

        function SubType(name, age) {
            SuperType.call(this, name);
            this.age = age;
        }

        inheritPrototype(SuperType, SubType);   // 这一句，替代了组合继承中的SubType.prototype = new SuperType()

        SubType.prototype.sayAge = function () {
            alert(this.age);
        };

        var sub1 = new SubType("wq", 24);
        console.log(sub1);


        /* ------------------寄生组合式继承------------------ */

    </script>
</head>
<body>
</body>
</html>

王钱青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS继承的六种方法代码实现

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS继承的六种方法</title> <script> /* ------------------原型链继承------------------ */ ...
复制链接

扫一扫

专栏目录