首页 > 代码库 > 2014年辛星完全解读Javascript第六节 对象
2014年辛星完全解读Javascript第六节 对象
随着面向对象的普及,现在很多语言都在支持面向对象,Javascript也不例外,所谓对象,就是拥有属性和方法的数据。这里的属性其实就是变量,这里的方法,其实就是函数。但是Javascript的面向对象和其他编程语言还是有很大区别的。
************对象*************
1.Javascript中的对象的定义“属性的无序集合,每个属性存放一个初始值、函数或者对象”,也就是说,对象是没有额定顺序的值的数组。
2.Javascript中的对象一般可以分为本地对象、内置对象、宿主对象和自定义对象。
3.本地对象可以包括Object、Function、Array、String、Boolean、Number、Date、Error等等。
4.所谓宿主对象就是给Javascript提供运行环境的对象,如果是浏览器的话,可以提供BOM和DOM。
5.内置对象有两个,一个是Global,一个是Math,这两个可以直接使用,不必实例化。
********工厂方法创建自定义对象*************
1.在Javascript中,创建自定义对象的方式有很多,比如我们直接创建,代码如下:
var person = new Object();person.myname = "辛星";person.myage = 23;person.info = function(){ alert(this.myname+this.myage);};person.info();
2.它会弹出一个窗口,上面显示的文本信息是“辛星23”。上面代码中我们就创建了一个person对象,它有myname属性和myage属性,有一个info方法,然后我们调用了它的info方法。
3.但是这种方式有点问题,那就是它在创建多个对象的时候很麻烦,因此,我们可以使用工厂方法,我们用该方法来批量创建对象,代码如下:
function createPerson(myname,myage){ var person = new Object(); person.myname = myname; person.myage = myage; person.info = function(){ alert(this.myname+this.myage); }; return person;}createPerson("辛星",23).info();createPerson("小倩",20).info();
4.然后我们就可以通过createPerson这个方法来快速的创建多个对象,这就是我们介绍的工厂方法创建对象。
**************构造函数的方式去创建*************
1.比如我们想创建一个person对象,它有两个属性myname和maage,那么代码如下:
function Person(myname,myage){ this.myname = myname; this.myage = myage; this.info = function(){ alert(myname+myage); }}var p1 = new Person("辛星",23);var p2 = new Person("小倩",20);p1.info();p2.info();
2.我们创建了Person对象,而p1和p2则是它的两个实例,然后我们调用了它们的方法,注意它使用的关键字并不是class,而是function。
3.我们还可以把Person对象的方法从该对象拿出来,写成独立的方法,看下面代码:
function Person(myname,myage){ this.myname = myname; this.myage = myage; this.info = info;}function info(){ alert(this.myname+this.myage);}var p1 = new Person("辛星",23);var p2 = new Person("小倩",20);p1.info();p2.info();
4.需要注意的是这里的this.info= info后一个info是不需要加小括号的,它会自动寻找里面相对应的方法。
***********原型方式创建对象*****************
1.我们可以把构造函数做成空的构造函数,然后把所有的属性和方法直接赋值给prototype属性。
2.看下面示例代码:
function Person(){}Person.prototype.myname = "辛星";Person.prototype.myage = 23;Person.prototype.info = function info(){ alert(this.myname+this.myage);}var p = new Person("辛星",23);p.info();
3.它的问题还是蛮多的,那就是所有的对象都引用同一个原型,导致我们创建第二个对象的实例的时候会很麻烦。
4.于是我们就可以把构造函数和原型结合起来,看如下代码:
function Person(myname,myage){ this.myname = myname; this.myage = myage;}Person.prototype.info = function info(){ alert(this.myname+this.myage);}var p1 = new Person("辛星",23);var p2 = new Person("小倩",20);p1.info();p2.info();
5.它既保留了构造函数的灵活性,又利用原型来避免多次定义,可以说还是非常不错的。
**************动态原型方式*************
1.其实它和上面的原型加构造函数的方式非常相似,只是多了一个判断,而且位置也略有变化,因此就成了动态原型。
2.看下面代码示例:
function Person(myname,myage){ this.myname = myname; this.myage = myage; if ( typeof Person._initialized == ‘undefined‘){ Person.prototype.info = function (){ alert(this.myname+this.myage); }; Person._initialized = true ; }}var p1 = new Person("辛星",23);var p2 = new Person("小倩",20);p1.info();p2.info();
3.上面代码中的_initialized属性是属于整个Person对象的,并不属于某个实例,因此它只是在第一次被初始化的时候创建,之后就不用再创建了。
4.这种方法还是蛮好理解的,就是相当于把原型放到构造函数里面去了。
**************小结**************
1.本小节我们主要解读了Javascript的对象的创建方式,可能大家会感觉Javascript怎么那么多的创建方式。
2.确实,这种散乱的方式确实不是什么好现象,至少我认为应该规范成统一的接口才好。