javascript中5种常用对象创建方式
文章目录
一、直接创建方式
二、对象初始化器方式
三、构造函数方法
四、prototype原型方式
五、混合的构造函数/原型方式
一、直接创建方式
1、创建语法
| var 对象变量名 = new Object(); 对象变量名. property1 = value1; …; 对象变量名. propertyN = valueN; 对象变量名. methodName1 = function([参数列表]){ //函数体 } …; 对象变量名. methodNameN = function([参数列表]){ //函数体 } |
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var student = new Object();//直接创建对象
student.name="Tom";//定义变量
student.doHomework=function(){//定义方法
console.log(this.name+name+"@@@@@@@@@@@");
}
console.log(student.name);//输出学生姓名
student.doHomework();//调用方法
</script>
</head>
<body>
</body>
</html>
3、运行结果
二、对象初始化器方式
1、创建语法
| var 对象变量名 = { property1 : value1, property2 : value2, …, propertyN : valueN, methodName1 : function([parameter_list]){ //函数体 }, …, methodNameN : function([parameter_list]){ //函数体 } }
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//对象初始化器方式
var object={
url:"",
success:function(data){
console.log(data+"自主学习");
}
};
object.success("Tom")//调用方法，并传参
</script>
</head>
<body>
</body>
</html>
3、运行结果
三、构造函数方法
1、创建语法
| function 构造函数([参数列表]){ this.属性 = 属性值; … this.属性N = 属性值N; this.函数1 = function([参数列表]){ //函数体 } ; … this.函数N = function([参数列表]){ //函数体 } ; }
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
<!--构造函数方式便于动态为属性赋值，但是这种方式将方法也定义在了构造方法体中，使得代码比较杂乱-->
function Student(score){
this.name="Tom";
this.score=score;
this.doHomework=function(){
console.log(this.name+"正在做作业");
}
}
var student=new Student(88);
console.log(student.score)//调用属性并输出
student.doHomework();//调用方法
</script>
</head>
<body>
</body>
</html>
3、运行结果
四、prototype原型方式
1、创建语法
| function 对象构造器( ){ } 对象构造器.prototype.属性名=属性值; 对象构造器.prototype.函数名 = function([参数列表]){ //函数体 }
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
<!--prototype原型方式实现了方法与属性的分离,使代码不混乱,但不能动态的给属性赋值-->
function Student(){
}
Student.prototype.name="Tom";
Student.prototype.doHomework=function(){
console.log("正在做作业")
}
var student = new Student();
student.doHomework();
</script>
</head>
<body>
</body>
</html>
3、运行结果
五、混合的构造函数/原型方式
1、创建语法
| function 对象构造器([参数列表]){ } 对象构造器.prototype.函数名 = function([参数列表]){ //函数体 }
|
2、基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
<!--混合的构造函数/原型方式实现了方法与属性的分离,使代码不混乱,且能动态的给属性赋值-->
function Student(name){
this.name=name;//动态的给name赋值
}
Student.prototype.doHomework=function(){
console.log(this.name+"正在做作业")
}
var student = new Student("Tom");
student.doHomework();
</script>
</head>
<body>
</body>
</html>3、运行结果
