• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

JS面向对象教程(4)

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-06点击:

  p.call(b, 'b'); // this => a, output "10 - b"

  p.apply(b, ['b']); // this => a, output "10 - b"

  继承 和 重载

  通过上面的那些示例,我们可以通过Object.create()来实际继承,请看下面的代码,Student继承于Object。

var Person = Object.create(null); 
  
Object.defineProperties 

    Person, 
    { 
        'name'  : {  value: 'Chen Hao'}, 
        'email'  : { value :
}, 
        'website': { value: 'http://coolshell.cn'} 
    } 
); 
  
Person.sayHello = function () { 
    var hello = "<p>Hello, I am "+ this.name  + ", <br>" + 
                "my email is: " + this.email + ", <br>" + 
                "my website is: " + this.website; 
    document.write(hello + "<br>"); 

  
var Student = Object.create(Person); 
Student.no = "1234567"; //学号 
Student.dept = "Computer Science"; //系 
  
//使用Person的属性 
document.write(Student.name + ' ' + Student.email + ' ' + Student.website +'<br>'); 
  
//使用Person的方法 
Student.sayHello(); 
  
//重载SayHello方法 
Student.sayHello = function (person) { 
    var hello = "<p>Hello, I am "+ this.name  + ", <br>" + 
                "my email is: " + this.email + ", <br>" + 
                "my website is: " + this.website + ", <br>" + 
                "my student no is: " + this. no + ", <br>" + 
                "my departent is: " + this. dept; 
    document.write(hello + '<br>'); 

//再次调用 
Student.sayHello(); 
  
//查看Student的属性(只有 no 、 dept 和 重载了的sayHello) 
document.write('<p>' + Object.keys(Student) + '<br>');

  通用上面这个示例,我们可以看到,Person里的属性并没有被真正复制到了Student中来,但是我们可以去存取。这是因为Javascript用委托实现了这一机制。其实,这就是Prototype,Person是Student的Prototype。

  当我们的代码需要一个属性的时候,Javascript的引擎会先看当前的这个对象中是否有这个属性,如果没有的话,就会查找他的Prototype对象是否有这个属性,一直继续下去,直到找到或是直到没有Prototype对象。

  为了证明这个事,我们可以使用Object.getPrototypeOf()来检验一下:

Student.name = 'aaa'; 
//输出 aaa 
document.write('<p>' + Student.name + '</p>'); 
//输出 Chen Hao 
document.write('<p>' +Object.getPrototypeOf(Student).name + '</p>');

  于是,你还可以在子对象的函数里调用父对象的函数,就好像C++里的 Base::func() 一样。于是,我们重载hello的方法就可以使用父类的代码了,如下所示:

//新版的重载SayHello方法 
Student.sayHello = function (person) { 
    Object.getPrototypeOf(this).sayHello.call(this); 
    var hello = "my student no is: " + this. no + ", <br>" + 
                "my departent is: " + this. dept; 
    document.write(hello + '<br>'); 
}

  这个很强大吧。

  组合

  上面的那个东西还不能满足我们的要求,我们可能希望这些对象能真正的组合起来。为什么要组合?因为我们都知道是这是OO设计的最重要的东西。不过,这对于Javascript来并没有支持得特别好,不好我们依然可以搞定个事。

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1978130638@qq.com ,  QQ