2014年辛星完全解读Javascript第六节 对象

时间：2021-09-08 08:34:13

   随着面向对象的普及，现在很多语言都在支持面向对象，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.确实，这种散乱的方式确实不是什么好现象，至少我认为应该规范成统一的接口才好。

标签：

相关文章