前言
javascript作为一门类C的语言,它的面向对象的东西相对于C++/Java比较奇怪,但是其的确相当的强大。
本文从一个整体的角度来说明一下JavaScript的面向对象的编程。
该文介绍的内容主要基于ECMAScript 5,旨在介绍新技术。
 
初探
JavaScript中的变量定义基本如下:
 
复制代码 代码示例:
var name = 'Chen Hao';;  
var email = 'haoel(@)hotmail.com';    
var website = 'http://www.jb200.com';  
如果要用对象来写的话,可以这样:
 
复制代码 代码示例:
var chenhao = {    
    name :'Chen Hao',    
    email : 'haoel(@)hotmail.com',    
    website : 'http://www.jb200.com'    
};  
于是,可以这样访问:
 
复制代码 代码示例:
//以成员的方式    
chenhao.name;    
chenhao.email;    
chenhao.website;    
     
//以hash map的方式    
chenhao["name"];    
chenhao["email"];    
chenhao["website"];  
关于函数,JavaScript的函数是这样的:
 
复制代码 代码示例:
var doSomething = function(){    
   alert('Hello World.');    
};  
于是:
 
复制代码 代码示例:
var sayHello = function(){    
   var hello = "Hello, I'm "+ this.name    
                + ", my email is: " + this.email    
                + ", my website is: " + this.website;    
   alert(hello);    
};    
     
//直接赋值,这里很像C/C++的函数指针    
chenhao.Hello = sayHello;    
chenhao.Hello();
可以看到JavaScript对象函数是直接声明,直接赋值,直接就用了。runtime的动态语言。
还有一种比较规范的写法是:
 
复制代码 代码示例:
//其用function来做class。    
var Person = function(name, email, website){    
    this.name = name;    
    this.email = email;    
    this.website = website;    
     
    this.sayHello = function(){    
        var hello = "Hello, I'm "+ this.name  + ", n" +    
                    "my email is: " + this.email + ", n" +    
                    "my website is: " + this.website;    
        alert(hello);    
    };    
};    
     
var chenhao = new Person("Chen Hao", "
haoel@hotmail.com",    
   "
http://www.jb200.com");    
chenhao.sayHello();
要删除对象的属性,很简单:
 
复制代码 代码示例:
delete chenhao['email'] 
总结几点:
Javascript 的数据和成员封装很简单。没有类完全是对象操作。纯动态!
Javascript function中的this指针很关键,如果没有的话,那就是局部变量或局部函数。
Javascript 对象成员函数可以在使用时临时声明,并把一个全局函数直接赋过去就好了。
Javascript 的成员函数可以在实例上进行修改,也就是说不同实例相同函数名的行为不一定一样。
属性配置 – Object.defineProperty
 
代码:
 
复制代码 代码示例:
//创建对象    
var chenhao = Object.create(null);    
     
//设置一个属性    
 Object.defineProperty( chenhao,    
                'name', { value:  'Chen Hao',    
                          writable:     true,    
                          configurable: true,    
                          enumerable:   true });   
//设置多个属性    
Object.defineProperties( chenhao,    
    {    
        'email'  : { value:  'haoel@hotmail.com',    
                     writable:     true,    
                     configurable: true,    
                     enumerable:   true },    
        'website': { value: 'http://www.jb200.com',    
                     writable:     true,    
                     configurable: true,    
                     enumerable:   true }    
    }    
); 
 
属性解释: 
 
writable:这个属性的值是否可以改。
configurable:这个属性的配置是否可以改。
enumerable:这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value:属性值。
get ()/set (_value):get 和 set 访问器。
Get/Set访问器
关于get/set访问器,它的意思就是用 get/set 来取代 value(其不能和 value 一起使用),示例如下:
 
复制代码 代码示例:
var  age = 0;    
Object.defineProperty( chenhao,    
            'age', {    
                      get: function() {return age+1;},    
                      set: function(value) {age = value;}    
                      enumerable : true,    
                      configurable : true    
                    }    
);    
chenhao.age = 100; //调用set    
alert(chenhao.age); //调用get 输出101(get中+1了);  
一个更为实用的例子——利用已有的属性(age)通过get 和 set 构造新的属性(birth_year):
 
复制代码 代码示例:
Object.defineProperty( chenhao,    
            'birth_year',    
            {    
                get: function() {    
                    var d = new Date();    
                    var y = d.getFullYear();    
                    return ( y - this.age );    
                },    
                set: function(year) {    
                    var d = new Date();    
                    var y = d.getFullYear();    
                    this.age = y - year;    
                }    
            }    
);    
     
alert(chenhao.birth_year);    
chenhao.birth_year = 2000;    
alert(chenhao.age);  
为什么不写成下面这个样子:
 
复制代码 代码示例:
var chenhao = {    
    name: "Chen Hao",    
    email: "
haoel@hotmail.com",    
    website: "
http://www.jb200.com",    
    age: 100,    
    get birth_year() {    
        var d = new Date();    
        var y = d.getFullYear();    
        return ( y - this.age );    
    },    
    set birth_year(year) {    
        var d = new Date();    
        var y = d.getFullYear();    
        this.age = y - year;    
    }    
     
};    
alert(chenhao.birth_year);    
chenhao.birth_year = 2000;    
alert(chenhao.age);  
的确可以这样的,不过通过defineProperty ()你可以干这些事:
1)设置如writable,configurable,enumerable 等这类的属性配置。
2)动态地为一个对象加属性。比如:一些 HTML 的 DOM 对像。