日期:2014-05-16  浏览次数:20405 次

JavaScript对象探讨
由于JavaScript的灵活性,可以让每个人按照自己的习惯进行编写代码.有函数式的编程方式,也有现在用的较为广泛的对象字面量.由于面向对象的出现,JavaScript刚开始的函数编程也逐渐演化为类式编程方式.现在我对几种比较熟悉的编程习惯进行简单的说明:
1.对象字面量:
var person = {
    name:null,
    setName:function(name){
        this.name = name;
        return this.name;
    },
    getName:function(){
        alert(this.name);
    }
}

具有JavaScript特色的一种编程方式,以类为单位含有属性name,方法setName和getName.调用方法比较简便person.setname('R'),this由此至终均指向person,person的属性与方法均不私有,可以进行调用.
2.prototype构造器调用模式
var Person = function(){
    this.name = null;
}
Person.prototype.setName = function(name){
    this.name = name;
}
Person.prototype.getName = function(){
    alert(this.name);
}

也是很常见的编程方式,创建一个Person类,然后利用prototype对类进行扩展,添加方法.与对象字面量最大区别在于,调用该类的方法时,必须先new(跟Java调用类相似).var p = new Person();p.getName();如果不用new,而直接创建,会产生错误.而且这种错误将不会报错,难以发现.错误的产生原因来自于this 指向Person.prototypel,而Person并没有setName方法.
3.利用匿名函数进行函数编程
(function(){
    var name;
         
    var setName = function(n){
         name = n;
    }
    window['person']['setName'] = setName;
   
    var getName = function(){
        alert(name);
    }
    window['person']['getName'] = getName;
})()

类的出现,其中一个最大的好处就是降低了全局变量的出现,但是如果你依旧习惯于函数式编程,没关系,只要创建一个匿名函数,进行闭包,就可以再里面进行函数编程,也不需要担心全局变量的出现.如上所看到的var name;在匿名函数外部是无法调用的,然后利用外部的变量来调用内部的函数,或者是变量.可以借此创建私有变量和私有方法.
4.类式编程(不知道取什么名)
var person = function(){
    var name = null;
    return{
        setName:function(n){
            name = n;
        },
        getName:function(){
            alert(name);
        }
    }
}


与对象字面量很相似,其不同之处在于抛开了this,和可以对方法与属性进行私有.调用方法与对象字面量基本一致.
5.方法链
var Person = function(){
    this.name = null;
}
Person.prototype = {
    setName:function(name){
        this.name = name;
        return this;
    },
    getName:function(){
        alert(this.name);
        return this;
    }
}

jQuery就是一个最经典的方法连库,如果还不懂方法链是什么,看看这个例子:
  var p = new Person();
    p.setName('Tom').getName().setName('Ray').getName();

由于每个方法的结尾都是return this;所以产生了方法链式的类.
本人比较熟悉的就是这几种方式了,每个人都有每个人的特色,所以方式也是说不尽的.但是借此,我想探讨以下几个问题:
1.有关于this指针

在建立多种类的时候都用到this,可是this的作用究竟是什么,而其实this在重用和继承上起着很大的作用.我们先看看一个关于继承的例子:
首先建立Person类:
var Person = function(){
    this.name = null;
}
Person.prototype.setName = function(name){
    this.name = name;
}
Person.prototype.getName = function(){
    alert(this.name);
}
Person.prototype.getAge = function(){
    var age = this.age || '';
    alert(age);
}

然后在建立一个Children类,并集成Person的所有方法和属性:
本人比较熟悉的就是这几种方式了,每个人都有每个人的特色,所以方式也是说不尽的.但是借此,我想探讨以下几个问题:

1.有关于this指针

在建立多种类的时候都用到this,可是this的作用究竟是什么,而其实this在重用和继承上起着很大的作用.我们先看看一个关于继承的例子:
首先建立Person类:

var Person = function(){
    this.name = null;
}
Person.prototype.setName = function(name){
    this.name = name;
}
Person.prototype.getName = function(){
    alert(this.name);
}
Person.prototype.getAge = function(){
    var age = this.age || '';
    alert(age);
}

然后在建立一个Children类,并集成Person的所有方法和属性:

var Children = function(age){
    this.name = null;
    this.age = age;
}
Children.prototype = new Person();    //继承Person的属性和方法
Children.prototype.ageJudge = function(){    //另外为Children添加新方法
    if(this.age > 18){
        alert('成年人~');
    } else {
        alert('未满18岁呢~');
    }
}
Children.prototype.getName = function(){    //重写getName方法
    var about = this.name + ' ' + this.age;
    alert(about);
}
var tom = new Children(12);
var ages = tom.getAge();    //12
var judge = tom.ageJudge();    //未满18岁呢~
var setN = tom.setName('Tom');
var get = tom.getName();    //Tom 12

这就是继承,然后我们看个简单的函数重用:

var SetColor = function(){
    this.style.backgroundColor = '#000