构造函数(方法)介绍
什么是构造函数呢?在回答这个问题之前,我们来看一个需求:前面我们在创建人类的对象时,是先把一个对象创建好后,再给他的年龄和姓名属性赋值,如果现在我要求,在创建人类的对象时,就直接指定这个对象的年龄和姓名,该怎么做?
构造函数(方法)是一种特殊的方法,它的主要作用是完成对对象实例的初始化。它有几个特点:
-
构造函数(方法)名和类名相同。
-
在创建一个对象实例时,系统会自动的调用该类的构造方法完成对新对象的初始化。
构造函数基本用法:
function 类名(参数列表){ 属性=参数值;//不带this为私有,带有this为共有。 }
如下例:
function Person(name, age) { this.name = name;//this指代当前对象(即实例化的对象) this.age = age; } //创建Person对象的时候,就可以直接给名字和年龄 var p1 = new Person("abc", 80); var p2 = new Person("hello", 9); window.alert(p2.name);
当然,在给一个对象初始化属性值的时候,也可以指定函数属性。如下例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>构造函数</title> <script type="text/javascript"> function jiSuan(num1, num2, oper) { if(oper == "+") { return num1+num2; } else if(oper == "-") { return num1-num2; } else if(oper == "*") { return num1*num2; } else if(oper == "/") { return num1/num2; } } function Person(name, age, fun) { this.name = name; this.age = age; this.myFun = fun; } var p1 = new Person("aa", 9, jiSuan); var p2 = new Person("aa", 9, null); // window.alert(p1.name); // window.alert(p1.myFun(89, 90, "+")); window.alert(p2.myFun(1, 2, "*"));//Uncaught TypeError: p2.myFun is not a function </script> </head> <body> </body> </html>
构造方法(函数)小结
-
构造方法名和类名相同
-
主要作用是完成对新对象实例的初始化
-
在创建对象实例时,系统自动调用该对象的构造方法
类定义的完善:
在介绍了构造函数(方法)后,我们类(原型对象)的定义就可以完善一步:
function 类名() { 属性; }
↓
function 类名() { 属性; 函数(方法); }
↓
function 类名(参数1, 参数2, ...) { 属性 = 参数1; 函数(方法) = 参数2; }
面向对象编程进一步认识:
创建对象的又一种形式:
1、对于比较简单的对象,我们也可以这样来创建(可以指定普通属性和函数属性),如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>构造函数</title> <script type="text/javascript"> var dog = {name:"小狗", age:8, fun1:function(){window.alert("hello,world");}, fun2:function(){window.alert("ok");} }; window.alert(dog.constructor); window.alert(dog.name+dog.age); dog.fun1(); dog.fun2(); </script> </head> <body> </body> </html>
2、有时,会看到这样一种调用方法:
函数名.call(对象实例);
例,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>构造函数</title> <script type="text/javascript"> var dog={name:'hello'}; function test(){ window.alert(this.name); } test(); window.test(); var name = "阿昀"; //test.call(window);//输出阿昀 test.call(dog); // <==> dog.test(); </script> </head> <body> </body> </html>
3、for...in,如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>构造函数</title> <script type="text/javascript"> var dog = {name:'小名', sayHello:function(a,b){window.alert("结果="+(a+b));} }; //循环列出dog对象的所有属性和方法 对象名['属性名'] for(var key in dog){ window.alert(dog[key]); } </script> </head> <body> </body> </html>
记住:可以使用该形式—对象名['属性名']—访问该对象中的属性和方法。
又如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>构造函数</title> <script type="text/javascript"> document.writeln("****当前浏览器window对象有属性和方法****<br/>"); for(var key in window){ document.writeln(key+":"+window[key]+"<br>"); } </script> </head> <body> </body> </html>