这篇文章主要为大家详细介绍了使用JavaScript怎么在面向对象中创建对象,文中示例代码介绍的非常详细,具有一定的参考价值,发现的小伙伴们可以参考一下:
创新互联公司网站设计,为客户量身定制各类网站建设业务,包括企业型、电子商务型、成都响应式网站建设公司、行业门户型等各类网站,实战经验丰富,成功案例众多。以客户利益为出发点,创新互联公司网站制作为客户规划、按需策划符合企业需求、带有营销价值的网络建站方案认真对待每一个客户,我们不用口头的语言来吹擂我们的优秀,近千家的成功案例见证着我们的成长。
1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 2.可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 3.可以根据用户的操作,动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。
创建对象的几种常用方式
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
1.使用Object或对象字面量创建对象
使用object
var student = new Object(); student.name = "easy"; student.age = "20";
使用字面量
var sutdent = { name : "easy", age : 20 };
2.工厂模式创建对象
function createStudent(name, age) { var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("easy1", 20); var student2 = createStudent("easy2", 20); ... var studentn = createStudent("easyn", 20);
3.构造函数模式创建对象
在上面创建Object这样的原生对象的时候,我们就使用过其构造函数
var obj = new Object();
在创建原生数组Array类型对象时也使用过其构造函数:
var arr = new Array(10); //构造一个初始长度为10的数组对象
我们首先了解一下构造函数和普通函数有什么区别。
1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。
2、按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。
3、使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。
ok,了解了构造函数和普通函数的区别之后,我们使用构造函数将工厂模式的函数重写,并添加一个方法属性:
function Student(name, age) { this.name = name; this.age = age; this.alertName = function(){ alert(this.name) }; } function Fruit(name, color) { this.name = name; this.color = color; this.alertName = function(){ alert(this.name) }; }
这样我们再分别创建Student和Fruit的对象
var v1 = new Student("easy", 20); var v2 = new Fruit("apple", "green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:
alert(v1 instanceof Student); //true alert(v2 instanceof Student); //false alert(v1 instanceof Fruit); //false alert(v2 instanceof Fruit); //true alert(v1 instanceof Object); //true 任何对象均继承自Object alert(v2 instanceof Object); //true 任何对象均继承自Object
可以将上面的函数简化:Student和Fruit对象中共有同样的方法移到构造函数外部
function Student(name, age) { this.name = name; this.age = age; } function Fruit(name, color) { this.name = name; this.color = color; }; function alertName() { alert(this.name); }
我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题
但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。
更好的方案是通过原型对象模式来解决。
4.原型的模式创建对象
原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的原因,如果对js有兴趣的同学,可以去查阅一下相关JS原型的一些知识点。
function Student() { this.name = 'easy'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); //easy stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
以上就是创新互联小编为大家收集整理的使用JavaScript怎么在面向对象中创建对象,如何觉得创新互联网站的内容还不错,欢迎将创新互联网站推荐给身边好友。