您的位置：首页 > Web前端 > JavaScript

JS面向(基于)对象编程--构造方法(函数)

2016-04-14 21:58 447 查看

构造函数(方法)介绍

什么是构造函数呢？在回答这个问题之前，我们来看一个需求：前面我们在创建人类的对象时，是先把一个对象创建好后，再给他的年龄和姓名属性赋值，如果现在我要求，在创建人类的对象时，就直接指定这个对象的年龄和姓名，该怎么做？

构造函数(方法)是一种特殊的方法，它的主要作用是完成对对象实例的初始化。它有几个特点：

构造函数(方法)名和类名相同。

在创建一个对象实例时，系统会自动的调用该类的构造方法完成对新对象的初始化。

构造函数基本用法：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航