JavaScript对象探讨由于JavaScript的灵活性,可以让每个人按照自己的习惯进行编写代码.有函数式的编程方式,
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(); //12var judge = tom.ageJudge(); //未满18岁呢~var setN = tom.setName('Tom');var get = tom.getName(); //Tom 12这就是继承,然后我们看个简单的函数重用:var SetColor = function(){ this.style.backgroundColor = '#000'; //this指向window}document.body.onclick = SetColor; //此时this指向bodydocumnet.getElementById('color').onmouseout = SetColor; //this指向documnet.getElementById('color')看了this的作用之后,想必对this有了新的认识了吧.现在就有疑问了,就是this的该用与不该用,下面在看个简单的例子:var setColor = { init:function(obj){ this.obj = obj; //this指向setColor this.obj.onclick = this.color; }, color:function(){ this.style.backgroundColor = '#000'; //this指向obj }}就在一个类里,this却指向2处地方,有时这样总会让人觉得困惑.刚学习的人更会被this弄的晕头转向.而稍稍改变一下写代码的方式:var setColor = { init:function(obj){ setColor.obj = obj; setColor.obj.onclick = setColor.color; }, color:function(){ this.style.backgroundColor = '#000'; //this可以方便方法的重用 }}这样一下来,代码可以更加的清晰了.所以编写代码的时候应该考虑好究竟今后的用途,还有能否重用.如果明确了不进行继承或是重用,个人觉得应该尽可能的避免使用this,更有个比较常出现的问题.如下:var Person = function(){ this.name = null;}Person.prototype.setName = function(name){ this.name = name;}Person.setName('tom'); //错误方式此时setName方法中的this将指向Person.prototypel,Person并没有setName方法前面讲过,若果不写成var p = new Person();p.setName('tom');该类里的this将会直接指向Person.prototypel.这种错误在编译时,还是运行时都不会报错.有时会造成让人很头痛的问题.所以在编写代码时,我总是很慎重的选用this.出处：蓝色理想责任编辑：bluehearts上一页 JavaScript对象探讨 [2] 下一页 JavaScript对象探讨 [4]◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。 这就是继承,然后我们看个简单的函数重用:
var SetColor = function(){ this.style.backgroundColor = '#000'; //this指向window}document.body.onclick = SetColor; //此时this指向bodydocumnet.getElementById('color').onmouseout = SetColor; //this指向documnet.getElementById('color')看了this的作用之后,想必对this有了新的认识了吧.现在就有疑问了,就是this的该用与不该用,下面在看个简单的例子:
var setColor = { init:function(obj){ this.obj = obj; //this指向setColor this.obj.onclick = this.color; }, color:function(){ this.style.backgroundColor = '#000'; //this指向obj }}就在一个类里,this却指向2处地方,有时这样总会让人觉得困惑.刚学习的人更会被this弄的晕头转向.而稍稍改变一下写代码的方式:
var setColor = { init:function(obj){ setColor.obj = obj; setColor.obj.onclick = setColor.color; }, color:function(){ this.style.backgroundColor = '#000'; //this可以方便方法的重用 }}这样一下来,代码可以更加的清晰了.所以编写代码的时候应该考虑好究竟今后的用途,还有能否重用.如果明确了不进行继承或是重用,个人觉得应该尽可能的避免使用this,更有个比较常出现的问题.如下:
var Person = function(){ this.name = null;}Person.prototype.setName = function(name){ this.name = name;}Person.setName('tom'); //错误方式此时setName方法中的this将指向Person.prototypel,Person并没有setName方法前面讲过,若果不写成var p = new Person();p.setName('tom');该类里的this将会直接指向Person.prototypel.这种错误在编译时,还是运行时都不会报错.有时会造成让人很头痛的问题.所以在编写代码时,我总是很慎重的选用this.
2.类的封装
在Java里,对类的方法或是属性,可以设置为私有,这样就可以避免外部的调用,而JavaScript却不存在这样的设置,看看下面的代码:\
var person = { name:null, init:function(name){ this.setName(name); }， setName:function(name){ this.name = name; return this.name; }}person.init('tom'); //tom在这个类里,一共有2个方法,分别是init和setName,而我们只希望从init中运行setName,或是以后将会为里面添加的各种方法,而不希望出现:
person.setName('tom'); //tom直接调用setName方法,正确的说,希望setName方法私有,还有name属性私有.避免别的程序员使用你的类时,调用了不想被调用的方法.
那应该怎么对类的封装好呢?试试另一种编程方式吧,看看改版的怎么样:
var person = function(){ var name = null; var setName = function(n){ name = n; return name; } return{ init:function(n){ setName(n); } }}这样子,就可以讲原本要私有化的方法和属性私有化了,外部无法直接调用了.这也是利用了闭包而达成所需要的方式的.可是这种编程方式不易于读,尤其是新手看到这种代码会很吃力,还有在占用内存方面也要比一般的高些.
好了,暂时先介绍到这里,下次有时间在说说闭包与作用域.