随笔-9  评论-3  文章-0  trackbacks-0
关于Javascript的几种继承实现方式

1. 伪类(Pseudoclassical)
简单的说，伪类就是通过定义一个构造函数并扩充它的prototype来实现的。

<html>
<head>
<title>test</title>
<script>
    function test(){
        var Father = function(firstName){
            this.firstName = firstName;
        };

        Father.prototype.name = function(){
            return this.firstName;
        };

        var Son = function(firstName, lastName){
            this.firstName = firstName;
            this.lastName = lastName;
        };

        Son.prototype = new Father();

        Son.prototype.name = function(){
            return this.firstName + " " + this.lastName;
        }
        
        var aSon = new Son("San", "Zhang");
        alert(aSon.name()); // San Zhang
    }
</script>
<body onload="test()">
</body>
</head>
</html>


可以看出，这种方法是没有私有属性的，并且不能访问父类的方法。

2. 原型(Prototypal)
利用原型方式来实现继承，就摒弃了伪类中向“类”这种方式靠拢的方法，而是用纯粹的对象来实现。

<html>
<head>
<title>test</title>
<script>
    function test(){
        var aFather = {
            firstName: "San",
            lastName: "Zhang",
            getName: function(){
                return this.firstName + " " + this.lastName;
            }
        };

        var Son = function(){};
        Son.prototype = aFather;

        var aSon = new Son();
        aSon.firstName = "XiaoSan";
        alert(aSon.getName()); // XiaoSan Zhang
        alert(Son.prototype.getName()); // San Zhang
    }
</script>
<body onload="test()">
</body>
</head>
</html>


可以看出，现在的继承是纯粹的对象与对象间的了，不过还有个问题，这个方式依然没有解决属性隐藏。

3. 函数化(Functional)
使用函数化方法可以通过闭包有效的实现信息隐藏，不过看起来就没有原型方式直观了。

<html>
<head>
<title>test</title>
<script>
    function test(){
        var father = function(firstName, lastName){
            var instance = {};

            // 对外暴露的方法，此时firstName和lastName等于被隐藏了
            instance.getFirstName = function(){
                return firstName;
            };

            instance.getLastName = function(){
                return lastName;
            };

            instance.getName = function(){
                return firstName + " " + lastName;
            };

            return instance;
        };
        
        var son = function(firstName, lastName){
            // 这里就像OO语言一样，先调用父类的构造函数
            var instance = father(firstName, lastName);
            
            // 扩充方法，这里可以直接使用“父类”的方法，不过属性已经变化了
            instance.nickname = function(){
                return "Little " + instance.getLastName();
            };
            
            return instance;
        }
        
        var aFather = father("San", "Zhang");
        var aSon = son("XiaoSan", "Zhang");
        alert(aFather.getName()); // San Zhang
        alert(aSon.getName()); // XiaoSan Zhang
        alert(aSon.nickname()); // Litttle Zhang
    }
</script>
<body onload="test()">
</body>
</head>
</html>
posted on 2010-10-09 10:28 臭美 阅读(263) 评论(0)  编辑  收藏 所属分类: The Book of Eli

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 臭美