【JS】javascript 面向对象编程

浏览数：14 / 时间：2015年06月08日

参考资料：Javascript 面向对象编程

先说一些关于this的

1.　　关键词：“动态”、“设置”。

　　函数中的 this 是动态的，不同条件下使用 this 指向是不同的，当然，也可以使用 call、apply、bind 修改 this

2.　　关键词：“媒介”

　　　this 可以视为一种媒介，可以通过它找到各种方法和属性（自有的和继承的）

3.　　关键词：“自有和继承”

　　　常见的利用函数创建类时，可以直接在实例上添加属性，也可以让实例继承属性

以下内容基于ECMAScript5.

变量

JavaScript 中，变量定义基本如下:

var name = ‘Yi Yang‘;;
var email = ‘yiyang(@)hotmail.com‘;
var website = ‘http://coolshell.cn‘;

如果用面向对象的写法，则如下：

var yiyang = {
    name :‘Yi Yang‘,
    email : ‘yiyang(@)hotmail.com‘,
    website : ‘http://coolshell.cn‘
};

于是，就可以这样访问：

//以成员
yiyang.name;
yiyang.email;
yiyang.website;
 
//以hash map的方式
yiyang["name"];
yiyang["email"];
yiyang["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++的函数指针
yiyang.Hello = sayHello;
 
yiyang.Hello();

还有一种比较规范的写法：

//我们可以看到， 其用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 yiyang = new Person("Yi Yang", "[email protected]", "http://coolshell.cn");
yiyang.sayHello();

配置属性：Object.defineProperty()

例如

//创建对象
var yiyang = Object.create(null);
 
//设置一个属性
 Object.defineProperty( yiyang,
                ‘name‘, { value:  ‘Yi Yang‘,
                          writable:     true,
                          configurable: true,
                          enumerable:   true });
 
//设置多个属性
Object.defineProperties( yiyang,
    {
        ‘email‘  : { value:  ‘[email protected]‘,
                     writable:     true,
                     configurable: true,
                     enumerable:   true },
        ‘website‘: { value: ‘http://coolshell.cn‘,
                     writable:     true,
                     configurable: true,
                     enumerable:   true }
    }
);

get / set 访问器

当访问属性时，会调用get，当设置属性时，会调用set，如下例

var  age = 0;
Object.defineProperty( yiyang,
            ‘age‘, {
                      get: function() {return age+1;},
                      set: function(value) {age = value;}
                      enumerable : true,
                      configurable : true
                    }
);
yiyang.age = 100; //调用set
alert(yiyang.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(yiyang.birth_year);
yiyang.birth_year = 2000;
alert(yiyang.age);

我们当然可以这样写

var yiyang = {
    name: "Yi Yang",
    email: "[email protected]",
    website: "http://coolshell.cn",
    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(yiyang.birth_year);
yiyang.birth_year = 2000;
alert(yiyang.age);