js中创建对象的几种方式示例说明

发布时间：2023-09-28 15:09:06 所属栏目：教程来源：

导读：JavaScript中的所有事物都是对象：字符串、数组、数值、函数等。JS中并没有类的概念，

但我们可以利用JS的语法特征，以类的思想来创建对象。

原始方法

代码如下:

<script type="text/javascript">

JavaScript中的所有事物都是对象：字符串、数组、数值、函数等。JS中并没有类的概念，

但我们可以利用JS的语法特征，以类的思想来创建对象。

原始方法

代码如下:

<script type="text/javascript">

var obj = new Object();

obj.name = "Koji"; //为对象添加属性

obj.age = 21;

obj.showName = function(){ //为对象添加方法

alert(this.name);

}

obj.showAge = function(){

alert(this.age);

}

obj.showName(); //Koji

obj.showAge(); //21

</script>

上面的方式通过new关键字生成一个对象，然后根据JS是动态语言的特性添加属性和方法，构

造一个对象。其中的this是表示调用该方法的对象。

这种方式的问题是如果需要多次创建对象，则需要重复代码多次，不利于代码的复用。

工厂方法

代码如下:

<script type="text/javascript">

function createObj(){

var obj = new Object(); //创建对象

obj.name = "Koji";

obj.age = 21;

obj.showName = function(){

alert(this.name);

}

obj.showAge = function(){

alert(this.age);

}

return obj; //返回对象

}

var obj1 = createObj();

var obj2 = createObj();

obj1.showName(); //Koji

obj2.showAge(); //21

</script>

这种方式提高了代码重用率，还可以改变工厂方法，传入参数赋值。

代码如下:

<script type="text/javascript">

function createObj(name, age){ //构造对象时可以传入初始化参数

var obj = new Object(); //创建对象

obj.name = name;

obj.age = age;

obj.showName = function(){

alert(this.name);

}

obj.showAge = function(){

alert(this.age);

}

return obj; //返回对象

}

var obj1 = createObj("Koji", 22);

var obj2 = createObj("Luo", 21);

obj1.showName(); //Koji

obj1.showAge(); //22

obj2.showName(); //Luo

obj2.showAge(); //21

</script>

上面的方式虽然可以提高代码的复用率，但和面向对象中类的概念相比有一个很大的缺陷。面

相对象强调对象的属性私有，而对象的方法是共享的。而上面的工厂方法创建对象的时候要为每个

对象创建各自私有的方法。同时由于为每个对象都创建逻辑相同的方法，浪费内存。改进如下

代码如下:

<span style="font-size:14px;"><script type="text/javascript">

function createObj(name, age){

var obj = new Object(); //创建对象

obj.name = name;

obj.age = age;

obj.showName = showName;

obj.showAge = showAge;

return obj; //返回对象

}

function showName(){ //函数也是一个对象

alert(this.name);

}

function showAge(){

alert(this.age);

}

var obj1 = createObj("Koji", 22);

var obj2 = createObj("Luo", 21);

obj1.showName(); //Koji

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!