• prototype封装继承


    首先让我们来看下继承原本的写法:

        <script>
            var Person = function(name, age) {
                this.name = name;
                this.age = age;
            }
            Person.prototype.SayHello = function () {
                alert(this.name + "," + this.age);
            };
            var Programmer = function (name, age, salary) {
                Person.call(this, name, age);
                this.salary = salary;
            };
            Programmer.prototype = new Person();
            var pro = new Programmer("kym", 21, 500);
            pro.SayHello();
        script>
    

    我们看到,在实际上,继承的根本就在于这一步Programmer.prototype=new Person()。也就是说把Person加到原型链上。这一点在Javascript学习笔记7——原型链的原理 已经有过比较详尽的解释。

    那也就是说,我们实现的关键就在于原型链的打造。

    在上文中,我们用JSON来打造了一个原型,其原型链是p.__proto__=Person。那么我们希望在这个上封装继承,那么原型链应该是p.__proto__.__proto__=SuperClass,也就是说Person.__proto__=SuperClass。但是按照我们上面代码的继承方法,原型链关系是Person.__proto__=SuperClass.prototype。

    这个和我们在上文中一样,我们的办法就是借助一个辅助函数,将原来的函数内的属性赋给X,然后令X.prototype=SuperClass即可,也就是说我们将子原型进行一个封装。

    好,就按照这个思路,我们来实现利用原型链的继承关系的封装。

        <script>
            var Factory = {
                Create: function (className, params) {
                    var temp = function () {
                        className.Create.apply(this, params);
                    };
                    temp.prototype = className;
                    var result = new temp();
                    return result;
                },
    
                CreateBaseClass: function (baseClass, subClass) {
                    var temp = function () {
                        for (var member in subClass) {
                            this[member] = subClass[member];
                        }
                    };
                    temp.prototype = baseClass;
                    return new temp();
                }
            };
            var People = {
                Create: function (name, age) {
                    this.name = name;
                    this.age = age;
                },
                SayHello: function () {
                    alert("Hello,My name is " + this.name + ".I am " + this.age);
                }
            };
            var Temp = {
                Create: function (name, age, salary) {
                    People.Create.call(this, name, age);
                    this.salary = salary;
                },
                Introduce: function () {
                    alert(this.name + "$" + this.age + "$" + this.salary);
                }
            };
            var Programmer = Factory.CreateBaseClass(People, Temp);
            var pro = Factory.Create(Programmer, ["kym", 21, 500]);
            pro.SayHello();
        script>
    

    这样就完成了我们对继承关系的封装。当然,我们也可以不单独写一个变量:

    var Programmer = Factory.CreateBaseClass(People, 
    {
        Create: function (name, age, salary) {
            People.Create.call(this, name, age);
            this.salary = salary;
        },
        Introduce: function () {
            alert(this.name + "$" + this.age + "$" + this.salary);
        }
    });
    每个程序员,都是艺术家.
  • 相关阅读:
    项目笔记:统计页面功能实现
    jquery easyui datagrid实现数据改动
    Skia图片解码模块流程分析
    TRIZ的成功案例
    基于HTML5的Web SCADA工控移动应用
    webservices系列(五)——javaweb整合Axis2及多service配置
    org.hibernate.PropertyValueException: not-null property references a null or transient value: model.
    线程池和异步线程
    [leetcode]Implement strStr()
    Python工作日类库Busines Holiday介绍
  • 原文地址:https://www.cnblogs.com/moriah/p/6097040.html
Copyright © 2020-2023  润新知