JavaScript用prototype扩展和继承对象

JavaScript用prototype扩展和继承对象,使用对象的主要优点之一是能够在崭新的环境中重复使用编写好的代码。JavaScript提供的机制能够基于已有的对象修改对象,使其拥有新的方法或属性,甚至可以创建完全崭新的对象。

这些技术分别叫作扩展继承

扩展对象

当一个对象已经实例化之后,如果想使其具有新的方法和属性,怎么办呢?这时可以使用关键字prototype。prototype对象允许迅速地添加属性和方法,然后就可以用于对象的全部实例。

用prototype扩展对象
我们来扩展前面范例里的对象Person,给它添加一个新方法sayHello。

Person.prototype.sayHello = function() {
    alert(this.name + " says hello");
}

在编辑器中新建一个HTML文档,输入如下程序所示的内容。

<!DOCTYPE html>
<html>
<head>
<title>Object Oriented Programming</title>
    <script>
        function Person(personName){
            this.name = personName;
            this.info = ′This person is called ′ + this.name;
            this.showInfo = function(){
                alert(this.info);
            }
        }
        var person1 = new Person(′Adam′);
        var person2 = new Person(′Eve′);
        Person.prototype.sayHello = function() {
            alert(this.name + " says hello");
        }
    </script>
</head>
<body>
    <input type="button" value="Show Info on Adam" onclick="person1.showInfo()" />
    <input type="button" value="Show Info on Eve" onclick="person2.showInfo()" />
    <input type="button" value="Say Hello Adam" onclick="person1.sayHello()" />
    <input type="button" value="Say Hello Eve" onclick="person2.sayHello()" />
</body>
</html>

现在来看看代码里都发生了什么。

首先,定义了一个构造函数。该构造函数有一个参数personName,定义了两个属性name和info以及一个方法showInfo。

接着创建了两个对象,每个对象在实例化时给name属性设置了不同的值。在创建了这两个对象之后,用关键字prototype给Person对象定义添加了一个方法sayHello。

在浏览器里加载上述代码,单击页面上显示的四个按钮,可以发现最初定义的showInfo方法没有任何变化,而且新方法sayHello对于两个已有的实例也能正常操作。

继承对象

继承是指从一种对象类型创建另一种对象类型,新对象类型不仅可以继承旧对象类型的属性和方法,还可以可选地添加自己的属性和方法。通过这种方式,可以先设计出“通用”的对象类型,然后通过继承来不断细化它们以得到更特定的类型,这样可以节省很多工作。

JavaScript模拟实现继承的方式也是使用关键字prototype。

因为object.prototype可以添加新方法和属性,所以可以用它把已有的构造函数里的全部方法和属性都添加到新的对象。

现在来定义另一个简单的对象:

function Pet() {
    this.animal = "";
    this.name = "";
    this.setAnimal = function(newAnimal) {
        this.animal = newAnimal;
    }
    this.setName = function(newName) {
        this.name = newName;
    }
}

Pet对象具有表示动物类型和宠物名称的属性,以及设置这些属性的方法:

var myCat = new Pet();
myCat.setAnimal = "cat";
myCat.setName = "Sylvester";

假设现在要为狗类专门创建一个对象,但不是从头开始创建,而是让Dog对象继承Pet,并且添加属性breed和方法setBreed。

首先,要创建Dog构造函数,定义新的属性和方法:

function Dog() {
    this.breed = "";
    this.setBreed = function(newBreed) {
        this.breed = newBreed;
    }
}

这样添加了新的属性breed和新的方法setBreed。接下来就是从Pet继承属性和方法,这需要使用关键字prototype。

Dog.prototype = new Pet();

现在不仅可以访问Dog里的属性和方法,还可以访问Pet里的属性和方法:

var myDog = new Dog();
myDog.setName("Alan");
myDog.setBreed("Greyhound");
alert(myDog.name + " is a " + myDog.breed);

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!