JavaScript面向对象编程(入门参考)

发布时间:2020-11-09编辑:脚本学堂
本文介绍下入门级的JavaScript面向对象编程的教程,通过实例学习下javascript面向编程的相关知识,有需要的朋友不妨作个参考。

前言

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 对像。