当前位置: 代码迷 >> JavaScript >> javascript面向对象技术基础(3)
  详细解决方案

javascript面向对象技术基础(3)

热度:234   发布时间:2012-10-25 10:58:57.0
javascript面向对象技术基础(三)

原文:javascript面向对象技术基础(三)

函数
javascript函数相信大家都写过不少了,所以我们这里只是简单介绍一下.
创建函数:
function f(x) {........}
var f = function(x) {......}
上面这两种形式都可以创建名为f()的函数,不过后一种形式可以创建匿名函数
函数定义时可以设置参数,如果传给函数的参数个数不够,则从最左边起依次对应,其余的用undefined赋值,如果传给函数
的参数多于函数定义参数的个数,则多出的参数被忽略.

?

Js代码
  1. function ?myprint(s1,s2,s3)?{??
  2. ????alert(s1+"_" +s2+ "_" +s3);??
  3. }??
  4. myprint();??????//undefined_undefined_undefined ??
  5. myprint("string1" , "string2" );? //string1_string2_undefined ??
  6. myprint("string1" , "string2" , "string3" , "string4" );? //string1_string2_string3 ??
function myprint(s1,s2,s3) {
    alert(s1+"_"+s2+"_"+s3);
}
myprint();      //undefined_undefined_undefined
myprint("string1","string2"); //string1_string2_undefined
myprint("string1","string2","string3","string4"); //string1_string2_string3

?

因此,对于定义好的函数,我们不能指望调用者将所有的参数全部传进来.对于那些必须用到的参数应该在函数体中
加以检测(用!操作符),或者设置默认值然后同参数进行或(||)操作来取得参数.

?

Js代码
  1. function ?myprint(s1,person)?{??
  2. ????var ?defaultperson?=?{??? //默认person对象 ??
  3. ????????"name" : "name1" ,??
  4. ????"age" :18,??
  5. ????"sex" : "female" ??
  6. ????};??
  7. ????if (!s1)?{???? //s1不允许为空 ??
  8. ????????alert("s1?must?be?input!" );??
  9. ????return ? false ;??
  10. ????}??
  11. ????person?=?person?||?defaultperson;??//接受person对象参数 ??
  12. ????alert(s1+"_" +person.name+ ":" +person.age+ ":" +person.sex);??
  13. };??
  14. ??
  15. myprint();?//s1?must?be?input! ??
  16. myprint("s1" );? //s1_name1:18:female ??
  17. myprint("s1" ,{ "name" : "sdcyst" , "age" :23, "sex" : "male" });?? //s1_sdcyst:23:male ??
function myprint(s1,person) {
    var defaultperson = {   //默认person对象
        "name":"name1",
	"age":18,
	"sex":"female"
    };
    if(!s1) {    //s1不允许为空
        alert("s1 must be input!");
	return false;
    }
    person = person || defaultperson;  //接受person对象参数
    alert(s1+"_"+person.name+":"+person.age+":"+person.sex);
};

myprint(); //s1 must be input!
myprint("s1"); //s1_name1:18:female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"});  //s1_sdcyst:23:male

?

函数的arguments属性
在每一个函数体的内部,都有一个arguments标识符,这个标识符代表了一个Arguments对象.Arguments对象非常类似
于Array(数组)对象,比如都有length属性,访问它的值用"[]"操作符利用索引来访问参数值,但是,二者是完全不同的
东西,仅仅是表面上有共同点而已(比如说修改Arguments对象的length属性并不会改变它的长度).

?

Js代码
  1. function ?myargs()?{??
  2. ????alert(arguments.length);??
  3. ????alert(arguments[0]);??
  4. }??
  5. myargs();???//0??---??undefined ??
  6. myargs("1" ,[1,2]);?? //2?---?1 ??
function myargs() {
    alert(arguments.length);
    alert(arguments[0]);
}
myargs();   //0  ---  undefined
myargs("1",[1,2]);  //2 --- 1

?Arguments对象有一个callee属性,标示了当前Arguments对象所在的方法.可以使用它来实现匿名函数的内部递归调用.

Js代码
  1. function (x)?{??
  2. ????if ?(x?<=?1)? return ?1;??
  3. ????return ?x?*?arguments.callee(x-1);??
  4. }??(section8.2)??
function(x) {
    if (x <= 1) return 1;
    return x * arguments.callee(x-1);
}  (section8.2)

?------------------------------

Method--方法
方法就是函数.我们知道,每一个对象都包含0个或多个属性,属性可以是任意类型,当然也包括对象.函数本身就是一种
对象,因此我们完全可以把一个函数放到一个对象里面,此时,这个函数就成了对象的一个方法.此后如果要使用该方法,
则可以通过对象名利用"."操作符来实现.

Js代码
  1. var ?obj?=?{f0: function (){alert( "f0" );}};? //对象包含一个方法 ??
  2. function ?f1()?{alert( "f1" );}??
  3. obj.f1?=?f1;????//为对象添加方法 ??
  4. ??
  5. obj.f0();?//f0??f0是obj的方法 ??
  6. obj.f1();?//f1??f1是obj的方法 ??
  7. f1();?????//f1??f1同时又是一个函数,可以直接调用 ??
  8. f0();?????//f0仅仅是obj的方法,只能通过对象来调用 ??
var obj = {f0:function(){alert("f0");}}; //对象包含一个方法
function f1() {alert("f1");}
obj.f1 = f1;    //为对象添加方法

obj.f0(); //f0  f0是obj的方法
obj.f1(); //f1  f1是obj的方法
f1();     //f1  f1同时又是一个函数,可以直接调用
f0();     //f0仅仅是obj的方法,只能通过对象来调用

?

方法的调用需要对象的支持,那么在方法中如何获取对象的属性呢?this!this关键字我们已经很熟悉了,在javascript的方
法中,我们可以用this来取得对方法调用者(对象)的引用,从而获取方法调用者的各种属性.

?

Js代码
  1. var ?obj?=?{ "name" : "NAME" , "sex" : "female" };??
  2. obj.print?=?function ()?{?? //为对象添加方法 ??
  3. ????alert(this .name?+? "_" ?+? this [ "sex" ]);??
  4. };??
  5. obj.print();??//NAME_female ??
  6. obj.sex?=?"male" ;??
  7. obj.print();??//NAME_male ??
var obj = {"name":"NAME","sex":"female"};
obj.print = function() {  //为对象添加方法
    alert(this.name + "_" + this["sex"]);
};
obj.print();  //NAME_female
obj.sex = "male";
obj.print();  //NAME_male

?

下面我们来一个更加面向对象的例子.

Js代码
  1. var ?person?=?{name: "defaultname" ,??
  2. ??????????????setName:function (s){??
  3. ??????????????this .name?=?s;??
  4. ??????????},??
  5. ??????????"printName" : function (){??
  6. ??????????????alert(this .name);??
  7. ??????????}}??
  8. person.printName();???????//defaultname ??
  9. person.setName("newName" );??
  10. person.printName();???????//newName ??
var person = {name:"defaultname",
              setName:function(s){
	          this.name = s;
	      },
	      "printName":function(){
	          alert(this.name);
	      }}
person.printName();       //defaultname
person.setName("newName");
person.printName();       //newName

?

在上面的例子中,完全可以用person.name=..来直接改变person的name属性,在此我们只是为了展示一下刚才提到的内容.
另一种改变person属性的方法就是:定义一个function,接收两个参数,一个是person,一个是name的值,看起来像是这样:
changeName(person,"newName").哪种方法好呢?很明显,例子中的方法更形象,更直观一些,而且好像有了那么一点面向
对象的影子.

再次强调一下,方法(Method)本身就是是函数(function),只不过方法的使用更受限制.在后面的篇幅中,如果提到函数,那么
提到的内容同样适用于方法,反之则不尽然.

函数的prototype属性
每一个函数都包含了一个prototype(原型)属性,这个属性构成了javascript面向对象的核心基础.在后面我们会详细讨论.

  相关解决方案