从面试题学习Javascript——面向对象(继承)

题目:

小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:

  function Dog() {

           this.wow = function() {

                  alert(’Wow’);

          }

           this.yelp = function() {

                  this.wow();

           }

  }

小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实现(提示关键字: 继承,原型,setInterval)。

知识点:

    (1)原型链:ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

      简单回顾一下构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的

      内部指针。那么,假如我们让原型对象等于另一个类型的实例,显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指

      向另一个构造函数的指针。

    (2)组合继承:也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型

      属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

    

        function SuperType(name){
            this.name = name;
            this.colors = [“red”, “blue”, “green”];
        }

        SuperType.prototype.sayName = function(){
          alert(this.name);
        };
        function SubType(name, age){ 
           //inherit properties
          SuperType.call(this, name);
          this.age = age;
        }

        //inherit methods
        SubType.prototype = new SuperType();

        SubType.prototype.sayAge = function(){
          alert(this.age);
        };

        var instance1 = new SubType(“Nicholas”, 29);
        instance1.colors.push(“black”);
        alert(instance1.colors); //”red,blue,green,black”
        instance1.sayName(); //”Nicholas”;
        instance1.sayAge(); //29

        var instance2 = new SubType(“Greg”, 27);
        alert(instance2.colors); //”red,blue,green”
        instance2.sayName(); //”Greg”;
        instance2.sayAge(); //27

    (3)setTimeout函数:Executes a code snippet or a function after specified delay.

        var timeoutID = window.setTimeout(code, delay);

        timeoutID is the numerical ID of the timeout, which can be used later with window.clearTimeout.

    (4)setInterval函数:Calls a function repeatedly, with a fixed time delay between each call to that function.

        var intervalID = window.setInterval(code, delay);

        intervalID is a unique interval ID you can pass to clearInterval().

     (5)setTimeout和setInterval的区别:The setInterval function also delays for a specified time before triggering the execution of a specific function.           Where it differs is that after triggering that function the command doesn't complete. Instead it waits for the specified time again and then triggers      the function again and continues to repeat this process of triggering the function at the specified intervals until either the web page is unloaded or      the clearInterval function is called.   

    (6)闭包中的this对象:在闭包中使用this对象也可能会导致一些问题。我们知道,this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,

    而当函数被作为某个对象的方法调用时,this等于那个对象。不过,匿名函数的执行环境具有全局性,因此其this对象通常指向window。但有时候由于编写闭包的方式     不同,这一点可能不会那么明显。例如:

    

      var name = “The Window”;

      var object = {
        name : “My Object”,

        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
     };

    alert(object.getNameFunc()()); //”The Window”

    以上代码先创建了一个全局变量name,又创建了一个包含name属性的对象。这个对象还包含一个方法——getNameFunc(),它返回一个匿名函数,而匿名函数又返回

    this.name.由于getNameFunc()返回一个函数,因此调用object.getNameFunc()()就会立即调用它返回的函数,结果就是返回一个字符串。然而,这个例子返回的字符

    串是“The Window”,即全局name变量的值。它的原因在于,每个函数在调用时,其活动对象都会自动取得两个特殊变量:this和arguments。内部函数在搜索这两个     变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。不过,把外部作用域中的this对象保存在一个闭包能够访问到的变量里,就可     以让闭包访问该对象了,如下所示:

    var name = “The Window”;

    var object = {
      name : “My Object”,

      getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
        };
      }
    };

    alert(object.getNameFunc()()); //”My Object”

答案:

<!DOCTYPE html>
<html>
<head>
<style type="text/css" rel="stylesheet">
</style>
<title></title>
</head>
<body>

</body>
<script type="text/javascript">

window.onload=function()
{
function Dog(name){
this.name=name;
}
Dog.prototype={
constructor:Dog,
Wow:function(){
console.group();
console.info("I am: "+this.name);
console.info("WangWang....");
console.groupEnd();
},
yelp:function(){
this.Wow();
}
};
function MadDog(name){
Dog.call(this,name);
}
MadDog.prototype=new Dog();
MadDog.prototype.constructor=MadDog;
MadDog.prototype.yelp=function()
{
self=this;
setInterval(function(){self.Wow();console.log(this);console.log(self);},500);
}
var xiaoXian=new Dog("xiaoXian");
xiaoXian.yelp();
var xiaoMang=new MadDog("xiaoMang");
xiaoMang.yelp();

}
</script>
</html>





posted @ 2012-03-29 21:28  shawnXiao  Views(2558)  Comments(5Edit  收藏  举报