关于Javascript的几种继承实现方式

臭美 — Sat, 09 Oct 2010 02:28:00 GMT

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

<html>
<head>
<title>testtitle>
<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>testtitle>
<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>testtitle>
<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>

臭美 2010-10-09 10:28 发表评论

BlogJava-臭美-随笔分类-The Book of Eli

关于Javascript的几种继承实现方式