JavaScript自定义方法和自定义对象
自定义函数/自定义方法
2.7.1、函数简述及作用
如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。
作用:增强代码的复用性
2.7.2、函数格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 自定义函数的用法
* js函数定义必须小写
* 参数定义无需定义返回类型,直接在function后面写方法名
* 参数定义无需var,一定不要用var否则报错
* JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;
*
* js中最后定义的方法会把前面的同名方法覆盖
* js中仅用方法名来调用函数,即便形参不匹配,也不影响正常使用
*
*/
function getSum(a,b,c){
alert(a+"-"+b+"-"+c)
}
function getSum(a,b){
alert(a+"-"+b)
}
//getSum(1,2);
//第二种方式函数定义的 匿名函数
var sum=function (a,c){
return a+c;
}
var result=sum(20,23);
alert(result);
//函数定义第三种
var ccc=new Function("a","b","return a+b");
</script>
</head>
<body>
</body>
</html>
l JavaScript函数定义必须用小写的function;
l JavaScript函数无需定义返回值类型,直接在function后面书写 方法名;
l 参数的定义无需使用var关键字,否则报错;
l JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;
2.7.3、函数使用的注意事项
JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;
JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;
如果形参未赋值,就使用默认值undefined
2.8、自定义对象
2.8.1、function构造函数
我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class类
无形参格式:
function 对象名(){
函数体
}
l 带参数格式:
function 对象名(参数列表){
函数体
}
l 有属性格式:
function 对象名(){
this.属性名1=属性值1;
this.属性名2=属性值2;
…….
}
this表示当前对象。
示例1:(this表示的是Person对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function Student(){
this.name="小王";
this.age="12";
}
var s=new Student();
alert(s.age);
alert(s.name);
function Student(n,a){
this.name=n;
this.age=a;
//在对象中定义一个方法
this.getSum=function(a,b){
return a+b;
}
}
var s=new Student("老王","55");
alert(s.age);
alert(s.name);
alert(s.getSum(2,3));
</script>
</head>
<body>
</body>
</html>
应用场景:适用于对象构建及代码复用。
2.8.2、对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
格式:
var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};
注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可
应用场景:适用于快速创建实例对象及数据封装。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在直接量中定义方法
* 格式 方法名:function(a,b){}
*/
var Student={age:"21",name:"大炮",sex:"男",addSum:function(a,b){return a+b;}};
alert(Student.age+" "+Student.name+" "+Student.sex)
alert(Student.addSum(12,13));
var person={name:"小炮",age:"23",sex:"小男人",getSum:function(a,b){return a+b}};
alert(person.name+" "+person.sex+" "+person.getSum(111,111));
</script>
</head>
<body>
</body>
</html>