您的位置：首页 > Web前端 > JavaScript

JavaScript面向对象编程

2013-09-20 09:38 267 查看

摘要：Javascript是一个类C的语言，他的面向对象的东西相对于C++/Java比较奇怪，但是其的确相当的强大，本文从一个整体的角度来说明一下Javascript的面向对象的编程。

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

初探

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

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

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

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

于是，我就可以这样访问：

//以成员的方式
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://coolshell.cn");
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://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 一起使用），示例如下：

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);

这样做好像有点麻烦，你说，我为什么不写成下面这个样子：

//列出对象的属性.
function listProperties(obj)
{
 var newLine = " ";
 var names = Object.getOwnPropertyNames(obj);
 for (var i = 0; i < names.length; i++) {
 var prop = names[i];
 document.write(prop + newLine);

 // 列出对象的属性配置（descriptor）动用getOwnPropertyDescriptor函数。
 var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
 for (var attr in descriptor) {
 document.write("..." + attr + ': ' + descriptor[attr]);
 document.write(newLine);
 }
 document.write(newLine);
 }
}

listProperties(chenhao);

call，apply，bind和this

关于 Javascript 的 this 指针，和C++/Java 很类似。我们来看个示例：（这个示例很简单了，我就不多说了）

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

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

但是在 bind 后，this 指针，可能会有不一样，但是因为 Javascript 是动态的。如下面的示例

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

继承和重载

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

Student.name = 'aaa';

//输出 aaa
document.write('' + Student.name + '');

//输出 Chen Hao
document.write('' +Object.getPrototypeOf(Student).name + '');

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

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

这个很强大吧。

组合

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

首先，我们需要定义一个 Composition 的函数：（target 是作用于是对象，source 是源对象），下面这个代码还是很简单的，就是把 source 里的属性一个一个拿出来然后定义到 target 中。

function Composition(target, source)
{
    var desc  = Object.getOwnPropertyDescriptor;
    var prop  = Object.getOwnPropertyNames;
    var def_prop = Object.defineProperty;

    prop(source).forEach(
        function(key) {
            def_prop(target, key, desc(source, key))
        }
    )
    return target;
}

有了这个函数以后，我们就可以这来玩了：

//艺术家
var Artist = Object.create(null);
Artist.sing = function() {
 return this.name + ' starts singing...';
}
Artist.paint = function() {
 return this.name + ' starts painting...';
}

//运动员
var Sporter = Object.create(null);
Sporter.run = function() {
 return this.name + ' starts running...';
}
Sporter.swim = function() {
 return this.name + ' starts swimming...';
}

Composition(Person, Artist);
document.write(Person.sing() + ' ');
document.write(Person.paint() + ' ');

Composition(Person, Sporter);
document.write(Person.run() + ' ');
document.write(Person.swim() + ' ');

//看看 Person中有什么？（输出：sayHello,sing,paint,swim,run）
document.write('' + Object.keys(Person) + ' ');

Prototype和继承

我们先来说说 Prototype。我们先看下面的例程，这个例程不需要解释吧，很像C语言里的函数指针，在C语言里这样的东西见得多了。

function clone(proto) {
    function Dummy() { }

    Dummy.prototype             = proto;
    DummyDummy.prototype.constructor = Dummy;

    return new Dummy(); //等价于Object.create(Person);
}

var me = clone(Person);

defineProperty ()函数

function keys(object) { var result, key
    result = [];
    for (key in object){
        if (object.hasOwnProperty(key))  result.push(key)
    }

    return result;
}

Object.getPrototypeOf() 函数

function proto(object) {
    return !object?                null
         : '__proto__' in object?  object.__proto__
         : /* not exposed? */      object.constructor.prototype
}

bind函数

var slice = [].slice

function bind(fn, bound_this) { var bound_args
    bound_args = slice.call(arguments, 2)
    return function() { var args
        args = bound_args.concat(slice.call(arguments))
        return fn.apply(bound_this, args) }
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航