码迷,mamicode.com
首页 > Web开发 > 详细

js几种继承方式比较

时间:2015-11-16 00:44:07      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:

1、简单原型继承:没有基于类的方式进行管理,破坏了子类的原型,即子类构造器和父类构造器相同

function Person(name) {
            var _name;
            
            function init(name) {
                _name = name;
            }
            
            init(name);
            
            this.setName = function(name) {
                _name = name;
            }
            
            this.getName = function() {
                return _name;
            }
        }
        
        function Student(age) {
            var _age;
            function init(age) {
                _age = age;
            }
            
            init(age);
            
            this.setAge = function(age) {
                _age = age;
            }
            
            this.getAge = function() {
                return _age;
            }
        }
        
        Student.prototype = new Person("zjy");
        
        var s = new Student(19);    
        console.log(s.constructor);
        

2、使用类和原型继承:基于类编程风格进行设计,即继承了原型也继承了类模板,但是缺点在于破坏了子类的构造器

function Person(name) {
            var _name;
            
            function init(name) {
                _name = name;
            }
            
            init(name);
            
            this.setName = function(name) {
                _name = name;
            }
            
            this.getName = function() {
                return _name;
            }
        }
        
        Person.prototype.check = function() {
            var age = this.getAge();
            if (age < 10 || age > 30) {
                throw Error(age is not range);
            };
        }
        
        function Student(name, age) {
            var _age;
            var that = this;    //缓存this变量,
            var init = function(name, age) {
                Person.call(that, name);
                _age = age;
            }

            init(name, age);
            
            this.setAge = function(age) {
                _age = age;
            }
            
            this.getAge = function() {
                return _age;
            }
        }
        
        //加上了这句话,就是混合继承,即继承了模板,也继承了原型
        Student.prototype = new Person();
        var s = new Student(zjy, 5);    
        console.log(s.getName() + ": " + s.getAge());
        console.log(s.constructor);
        s.check();

 

3、彻底继承:即实现了类模板的风格,有保留了子类的构造器,推荐使用

        function Person(name) {
            var _name;
            
            function init(name) {
                _name = name;
            }
            
            init(name);
            
            this.setName = function(name) {
                _name = name;
            }
            
            this.getName = function() {
                return _name;
            }
        }
        
        Person.prototype.check = function() {
            var age = this.getAge();
            if (age < 10 || age > 30) {
                throw Error(age is not range);
            };
        }
        
        function Student(name, age) {
            var _age;
            var that = this;    //缓存this变量,
            //函数内部申明的函数,在调用时,总是指向全局区window  ?
            var init = function(name, age) {
                Student.superClass.constructor.call(that, name);//通过这种实现了继承,并且不破坏子类的构造器
                _age = age;
            }

            init(name, age);        //这种调用确实在使用window环境掉用
            
            this.setAge = function(age) {
                _age = age;
            }
            
            this.getAge = function() {
                return _age;
            }
        }


        extend(Student, Person);

        //实现继承机制
        function extend(sub, sup) {
            var f = new Function();//使用一个空函数进行中转
            f.prototype = sup.prototype;    //实现空函数的原型对象    和超类的原型对象转换
            sub.prototype = new f();    //子类的原型等于父类构造器
            sub.prototype.constructor = sub;    //还原子类构造器
            sub.superClass = sup.prototype;    //自定义一个子类的静态属性,接受父类的原型
        }

        
        
        var s = new Student(zjy, 5);
        
        console.log(Student.superClass);
        s.check(s.getAge());

 

js几种继承方式比较

标签:

原文地址:http://www.cnblogs.com/zhaojunyang/p/4967824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!