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

js创建对象的几种方式

2018-01-09 00:00 627 查看

1.通过"字面量"创建

var person={};//空对象

var person={//将成员信息写到{}中,并赋值给一个person变量,此时person变量就是一个对象
name:"离歌",
age:"20",
say:function(){
console.log("你好!");
}
}

我们还可以给对象动态添加成员信息

①对象[成员名称]=值;或 ②对象.成员名称=值;

本人比较推荐①这种方式,假如对象中含有“first-name”这种带有“-”连字符的属性时,②这种方式就会出现问题

获取对象的成员信息

①对象[成员名称] 或 ②对象.成员名称 //推荐方式①,理由如上

2.通过"构造函数"创建

与工厂模式相比

无需在函数内创建对象,而是用this代替

无需明确return返回值

//方法:
var 变量名=new 函数名();
//例子:
var person=new Person();//构造函数

通过该方法创建对象时,会自动执行该函数

<script>
$(document).ready(function(){
function Person(){
this.name="www";
this.age="20";
this.say=function(){
console.log("拥有会说话的技能");
}
console.log("我是一个人----");
}
var person=new Person();//输出我是一个人----
});
</script>


3.通过object方式创建

//方法:
var 变量名=new Object();
//例子:
var person=new Object();//通过object方式创建

<script>
$(document).ready(function(){
var person=new Object();
person.name="李四";
person.age="20";
person.say=function(){
console.log("我拥有说话的行为------");
};
person.say();//输出我拥有说话的行为------
});
</script>


4.工厂模式

在函数中定义对象,并定义对象的各种属性(包括属性和方法)

引用对象的时候用的是=函数名()而不是=new 函数名()

在函数的最后返回对象

//方法:
function 函数名(){
var child=new Object();
return child;
}
var 变量=函数名();
//例子:
function Person(){
var child=new Object();
child.name="李四";
child.age="20";
child.say=function(){
console.log("我具备说话的能力----");
}
return child;
}
var person=Person();
person.say();//我具备说话的能力----

把上面例子重构下

//把方法属性提取出来,为了避免重复创建该方法
function say(){
console.log("我具备说话的能力----");
}
function Person(){
var child=new Object();
child.name="李四";
child.age="20";
child.say=say;
return child;
}
var person=Person();
person.say();//我具备说话的能力----


5.原型模式

只创建一个空函数,里面不放任何内容

利用prototype属性,对函数的属性进行绑定

调用的时候new 函数名

//方法:
function 函数名(){

}
函数名.prototype.name="李四";
函数名.prototype.age="20";
函数名.prototype.say=function(){
console.log("我是一个会说话的人---");
}
var person=new 函数名();
//例子:
function Person(){

}
Person.prototype.name="李四";
Person.prototype.age="20";
Person.say=function(){
console.log("我是一个会说话的人---");
}
var person=new Person();
person.say();//我是一个会说话的人---


6.混搭(原型模式+构造函数)

函数中定义属性

函数外结合prototype属性定义方法

调用时使用new 函数名()

//方法:
function 函数名(){
this.name="李四";
this.age="20";
}
函数名.prototype.say=function(){
console.log("我具备这项能力-----");
}
var person=new 函数名();
person.say();
//例子:
function Person(){
this.name="李四";
this.age="20";
}
Person.prototype.say=function(){
console.log("我具备这项能力-----");
}
var person=new Person();
person.say();//我具备这项能力-----
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息