【转载】[探讨]JavaScript面向对象编程

oneforce

浏览: 19516 次

最近访客更多访客>>

woodding2008

qq_30312197

conkeyn

weihaimail

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript是一个类C的语言，他的面向对象的东西相对于C++/Java比较奇怪，但是其的确相当的强大，本文主要从一个整体的角度来说明一下JavaScript的面向对象的编程。这篇文章主要基于ECMAScript 5，旨在介绍新技术。关于兼容性的东西，请看最后一节。

初探

我们知道JavaScript中的变量定义基本如下：

var name = 'Chen Hao';;
var email = 'haoel(@)hotmail.com';
var website = 'http://coolshell.cn';

如果要用对象来写的话，就是下面这个样子：

//以成员的方式  
chenhao.name;  
chenhao.email;  
chenhao.website;  
   
//以hash map的方式  
chenhao["name"];  
chenhao["email"];  
chenhao["website"];

关于函数，我们知道JavaScript的函数是这样的：

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://coolshell.cn");  
chenhao.sayHello();

顺便说一下，要删除对象的属性，很简单：

delete chenhao['email']

上面的这些例子，我们可以看到这样几点：

Javascript 的数据和成员封装很简单。没有类完全是对象操作。纯动态！
Javascript function中的this指针很关键，如果没有的话，那就是局部变量或局部函数。
Javascript 对象成员函数可以在使用时临时声明，并把一个全局函数直接赋过去就好了。
Javascript 的成员函数可以在实例上进行修改，也就是说不同实例相同函数名的行为不一定一样。

属性配置 – Object.defineProperty

先看下面的代码：

//创建对象  
var chenhao = Object.create(null);  
   
//设置一个属性  
 Objec
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://coolshell.cn',  
                     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)：

http://sd.csdn.net/a/20120110/310412.html

分享到：