js中的面向对象之对象常见创建方法详解
本文实例讲述了js中的面向对象之对象常见创建方法。分享给大家供大家参考，具体如下：
创建对象的几种常用方式
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
1.使用Object或对象字面量创建对象
使用object
varstudent=newObject(); student.name="easy"; student.age="20";
使用字面量
varsutdent={
name:"easy",
age:20
};
2.工厂模式创建对象
functioncreateStudent(name,age){
varobj=newObject();
obj.name=name;
obj.age=age;
returnobj;
}
varstudent1=createStudent("easy1",20);
varstudent2=createStudent("easy2",20);
...
varstudentn=createStudent("easyn",20);
3.构造函数模式创建对象
在上面创建Object这样的原生对象的时候，我们就使用过其构造函数
varobj=newObject();
在创建原生数组Array类型对象时也使用过其构造函数：
vararr=newArray(10);//构造一个初始长度为10的数组对象
我们首先了解一下构造函数和普通函数有什么区别。
1、实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
2、按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的newArray()，newObject()。
3、使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
ok，了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：
functionStudent(name,age){
this.name=name;
this.age=age;
this.alertName=function(){
alert(this.name)
};
}
functionFruit(name,color){
this.name=name;
this.color=color;
this.alertName=function(){
alert(this.name)
};
}
这样我们再分别创建Student和Fruit的对象
varv1=newStudent("easy",20);
varv2=newFruit("apple","green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：
alert(v1instanceofStudent);//true alert(v2instanceofStudent);//false alert(v1instanceofFruit);//false alert(v2instanceofFruit);//true alert(v1instanceofObject);//true任何对象均继承自Object alert(v2instanceofObject);//true任何对象均继承自Object
可以将上面的函数简化：Student和Fruit对象中共有同样的方法移到构造函数外部
functionStudent(name,age){
this.name=name;
this.age=age;
}
functionFruit(name,color){
this.name=name;
this.color=color;
}；
functionalertName(){
alert(this.name);
}
我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题
但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。
更好的方案是通过原型对象模式来解决。
4.原型的模式创建对象
原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，在这里由于我们课程定位的原因，如果对js有兴趣的同学，可以去查阅一下相关JS原型的一些知识点。
functionStudent(){
this.name='easy';
this.age=20;
}
Student.prototype.alertName=function(){
alert(this.name);
};
varstu1=newStudent();
varstu2=newStudent();
stu1.alertName();//easy
stu2.alertName();//easy
alert(stu1.alertName==stu2.alertName);//true二者共享同一函数
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。