javascripte构造函数解析

来源：互联网发布：无极调节划船机知乎编辑：程序博客网时间：2024/06/05 06:54

JavaScript语言是一门面向对象的语言，但是JavaScript中并没有类的概念的。于是JavaScript采用构造函数的方式来模拟类的效果，即我们通过函数来创建对象。这也证明了函数在JavaScript中具有非常重要的地位。

一、简单例子：

[javascript] view plaincopyprint?

var Book = function(name, price) {
this.name = name;
this.price = price;
}
var java = new Book('Java', 82);

var Book = function(name, price) {this.name = name;this.price = price;}var java = new Book('Java', 82);

普通函数与构造函数本质上没有任何区别，只是我们调用的方式不同而已，关键在于一个字 new。

调用构造函数：newfunction_name();

调用普通函数：function_name();

在函数中有一个this对象，this始终代表该函数的调用者。

如果是构造函数，this就是构造出来的新对象。

如果是普通函数，this就是 window 对象。

如果使用new关键字调用，那么函数的 return语句不再起作用，因为这时还回的是 this对象。

下面的例子可以很清楚的看到这点：

[javascript] view plaincopyprint?

var Book = function(name, price) {
this.name = name;
this.price = price;
if (this == window) {
return 'name = ' + name + ", price = " + price;
}
else{
alert("this book's name" + name +"price is "+ price)
}
}
var result = Book("Java", 100);
alert(result);
var book=new Book("Java", 100);

 var Book = function(name, price) {        this.name = name;        this.price = price;        if (this == window) {          return 'name = ' + name + ", price = " + price;        }else{alert("this book's name" + name +"price is "+ price)}      }  var result = Book("Java", 100);  alert(result);  var book=new Book("Java", 100);

运行结果如下。首先弹出：

表示当前使用调用普通函数的方法调用Book（）函数时this就是 window 对象。

然后弹出的结果为：表示如果使用new关键字调用，this就是构造出来的新对象。

二、js对象的动态特性:

对象的成员属性和方法可以动态添加。

[javascript] view plaincopyprint?

<script type="text/javascript">
function Foo(){
this.name="Foo";
}
var obj = new Foo();
obj.name = "Foo1";
obj.m = "m";
delete obj.name;
alert("name:"+obj.name+"\nm:"+obj.m);
</script>

<script type="text/javascript">  function Foo(){  this.name="Foo";  }  var obj = new Foo();  obj.name = "Foo1";  obj.m = "m";  delete obj.name;  alert("name:"+obj.name+"\nm:"+obj.m); </script>

运行结果：

三、理解公共属性，私有属性，公共方法，私有方法。

构造函数就是使自己的对象多次复制，同时实例根据设置的访问等级可以访问其内部的属性和方法，理解了上面简单的例子我们详细区别一下类的公共属性，私有属性，公共方法，私有方法。

[javascript] view plaincopyprint?

<script type="text/javascript">
function myObject(msg){
//特权属性(公有属性)
this.myMsg = msg; //只在被实例化后的实例中可调用
this.address = '上海';
//私有属性
var name = '韩义';
var age = 24;
var that = this;
//私有方法
function sayName(){
alert("the person is"+ name);
}
//特权方法(公有方法)
//能被外部公开访问
//这个方法每次实例化都要重新构造而prototype是原型共享，所有实例化后，都共同引用同一个
this.sayAgeAndName = function(){
sayName()
alert("his age is"+age); //在公有方法中可以访问私有成员
}
//私有和特权成员在函数的内部，在构造函数创建的每个实例中都会包含同样的私有和特权成员的副本，
//因而实例越多占用的内存越多
}
//实例化
var m1 = new myObject('111');
alert( m1.myMsg);//111
m1.sayAgeAndName();//24，调用共有方法访问私有属性
alert(myObject.age);//undefined ,不能访问使用属性。
</script>

<script type="text/javascript">function myObject(msg){     //特权属性(公有属性)     this.myMsg = msg; //只在被实例化后的实例中可调用     this.address = '上海';          //私有属性     var name = '韩义';     var age = 24;     var that = this;          //私有方法     function sayName(){         alert("the person is"+ name);     }     //特权方法(公有方法)     //能被外部公开访问     //这个方法每次实例化都要重新构造而prototype是原型共享，所有实例化后，都共同引用同一个     this.sayAgeAndName = function(){         sayName() alert("his age is"+age); //在公有方法中可以访问私有成员     }     //私有和特权成员在函数的内部，在构造函数创建的每个实例中都会包含同样的私有和特权成员的副本，     //因而实例越多占用的内存越多 }  //实例化 var m1 = new myObject('111');<!-- myObject.sayName()//have no method 'sayName' --> alert( m1.myMsg);//111<!-- alert(mi.name); //undefined, 静态属性不适用于一般实例 -->m1.sayAgeAndName();//24，调用共有方法访问私有属性alert(myObject.age);//undefined ,不能访问使用属性。 </script>

通过运行结果，很容易理解这些概念。

四、简单对象创建方式比较：

1.简单方式

[javascript] view plaincopyprint?

var person = new Object();
person.name = “LL”;
person.age = 22;

var person = new Object();person.name = “LL”;person.age = 22;

问题：创建多个相似对象，大量重复代码

2、工厂模式

[javascript] view plaincopyprint?

function Person (name,age){
var o = new Object();
o.name = name;
o.age = age;
o.getName=function(){
alert(this.name);
}
return o;
}
var person1 = new Person(“LL”,22);
person1.getName() ; //”LL”

function Person (name,age){           var o = new Object();           o.name = name;           o.age = age;           o.getName=function(){                    alert(this.name);}           return o;}var person1 = new Person(“LL”,22);person1.getName() ;         //”LL”

（1）根据接受的参数来构建一个包含所有必要信息的Person对象，多次调用，每次返回一个包含两个属性和一个方法的对象。
（2）优点：解决了创建多个相似对象的问题
问题：对象识别的问题，即怎样知道一个对象的类型
解决：构造函数

3、构造函数模式

[javascript] view plaincopyprint?
<span style="font-size: 18px;"> function Person(name,age){
               this.name = name;
               this.age = age;
               this.getName = function(){
                 alert(this.name);
        };
    }
    var person1 = new Person(“LL”,22);</span>
function Person(name,age){           this.name = name;           this.age = age;           this.getName = function(){         alert(this.name);};}var person1 = new Person(“LL”,22);
1）与工厂模式比较
a.没有显示的创建对象；
b.直接将属性和方法赋值给this对象；
c.没有return语句；
d.将实例标识为一种特定的类型（instanceof）；
（2）构造函数与普通函数区别
a.习惯：构造函数始终一个大写字母开头，非构造函数以一个小写字母开头
b.唯一区别：调用方式不同，用new调用为构造函数，不用new为普通函数

0 0