1、通过Object来创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> /** * 在js中并不存在类,所以可以直接通过Object来创建对象 * 但是使用如下方式创建,带来最大的问题是,由于没有类的约束 * 无法实现对象的重复利用,并且没有一种约定,在操作时会带来问题 */ var person = new Object(); person.name = "Leon"; person.age = 33; person.say = function() { alert(this.name+","+this.age); } </script> </head> <body> </body> </html>
2、通过json格式来创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> /** * json的意思就是javascript simple object notation * json就是js的对象,但是它省去了xml中标签,而是通过{}来完成对象的说明 */ var person = { name:"张三",//通过属性名:属性值来表示,不同的属性通过,来间隔 age:23, say:function() { alert(this.name+","+this.age); }//最后一个属性之后不能有, } person.say(); /** * 通过json依然可以创建对象数组,创建的方式和js的数组一样 */ var ps = [ {name:"Leon",age:22}, {name:"Ada",age:33} ]; for(var i=0;i<ps.length;i++) { alert(ps[i].name); } /** * 创建一组用户,用户的属性有 * name:string,age:int,friends:array * List<Person> ps = new ArrayList<Person>(); * ps.add(new Person("Leon",22,["Ada","Alice"])); * ps.add(new Person("John",33,["Ada","Chris"])); * 把ps转换为json */ ps = [ { name:"Leon", age:22, friends:["Ada","Alice"] }, { name:"John", age:33, friends:["Ada","Chris"] } ]; </script> </head> <body> </body> </html>
3、通过工厂方式来创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> /** * 通过工厂的方式来创建Person对象 * 在createPerson中创建一个对象 * 然后为这个对象设置相应的属性和方法 * 之后返回这个对象 */ function createPerson(name,age) { var o = new Object(); o.name = name; o.age = age; o.say = function() { alert(this.name+","+this.age); } return o; } /** * 使用工厂的方式,虽然有效的解决了类的问题,但是依然存在另外一个问题 * 我们无法检测对象p1和p2的数据类型 */ var p1 = createPerson("Leon",22); var p2 = createPerson("Ada",33); alert(typeof p1); //Object alert(typeof p2); //Object p1.say(); p2.say(); </script> </head> <body> </body> </html>
4、通过构造函数来创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> /** * 通过构造函数的方式创建,和基于工厂的创建类似 * 最大的区别就是函数的名称就是类的名称,按照java的约定,第一个 * 字母大写。使用构造函数创建时,在函数内部是通过this关键字来 * 完成属性的定义 */ function Person(name,age) { this.name = name; this.age = age; //以下方式带来的问题是所有的对象都会为该行为分配空间 // this.say = function() { // alert(this.name+","+this.age); // } this.say = say; } /** * 将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候 * 这个函数就可以被window调用,此时就破坏对象的封装性 * 而且如果某个对象有大 量的方法,就会导致整个代码中充斥着大量的全局函数 * 这样将不利于开发 */ function say() { alert(this.name+","+this.age); } /* * 通过new Person来创建对象 */ var p1 = new Person("Leon",22); var p2 = new Person("Ada",32); p1.say(); p2.say(); /** * 使用构造函数的方式可以通过以下方式来检测 * 对象的类型 */ alert(p1 instanceof Person); /** * 使用构造函数创建所带来的第一个问题就是每一个对象中 * 都会存在一个方法的拷贝,如果对象的行为很多的话 * 空间的占用率就会大大增加 * 可以将函数放到全局变量中定义,这样可以让类中的行为指向 * 同一个函数 */ alert(p1.say==p2.say); </script> </head> <body> </body> </html>
5、通过原型方式创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> /** * 以下演示了通过原型的创建方式,使用基于原型的创建可以将属性和方法 * 设置为Person专有的,不能再通过window来调用 */ function Person(){ } Person.prototype.name = "Leon"; Person.prototype.age = 23; Person.prototype.say = function() { alert(this.name+","+this.age); } var p1 = new Person(); p1.say(); //通过window没有办法调用say方法,如此就完成了封装 // say(); //这种纯原型的模式问题也很明显,所有的属性,方法都是共享的,不能让对象具体化。常常我们想每个对象有自己的属性。 </script> </head> <body> </body> </html>
相关推荐
javascript-document对象详解(下).zip
资源名称:完全手册--Javascript动态网页开发详解 (杨水清等著) 内容简介: 你还认为Javascript只能制作网页特效,那就大错特错了。现在网络领域最流行的理念是Web 2.0,而该理念的技术...
javascript核心对象用户手册详解哦
JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本...
js对象的读取速度实例详解 1、访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢。访问对象成员时,就像作用域链一样,在原型链上搜索。 2、如果找到的成员在原型链中的位置太深,访问速度就会变慢。...
详解JS对象遍历的顺序问题 可能有些同学听过在 JavaScript 中遍历对象顺序不固定的这一说法。事实上,这个说法不是特别准确。 对待遍历顺序,对象有一套自己既定的规则,在此规则下呢,对象的遍历顺序会受插入...
JavaScript面向对象继承详解,js进阶高手必读,内含六部分
详解js创建对象的几种方式和对象方法 这篇文章是看js红宝书第8章,记的关于对象的笔记(第二篇)。 创建对象的几种模式: 工厂是函数的意思。工厂模式核心是定义一个返回全新对象的函数。 function getObj...
Firebug内置一个console对象,提供5种方法,用来显示信息。 最简单的方法是console.log(),可以用来取代alert()或document.write()。比如,在网页脚本中使用console.log("Hello World")...
JavaScript的浏览器对象详解
JavaScript style对象与CurrentStyle对象案例详解 1、Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式,即元素标签中style属性的值。 例子: ...
下面小编就为大家带来一篇JS 面向对象之继承---多种组合继承详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
javascript Event对象详解..........................
JavaScript的document和window对象详解
JavaScript工作原理及对象详解.docx
《JavaScript+DHTML语法与范例详解词典》词条包含的主要内容有JavaScript的全局函数和基础对象的函数和属性;如何通过JavaScript DOM对象来动态地操作整个HTML文档,对HTML元素进行添加、移动、修改或删除;XMLDOM的...
JS对象之JSON详解.pdf
详解JS WebSocket断开原因和心跳机制 1、断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e....
JavaScript是网页制作中离不开的脚本语言...其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的使用细节前,先来看看这个对象包括哪些相关