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 Array对象详解_javascript技巧
2. **数据解析与转换**：库能够将这些文件解析为JavaScript对象，这样开发者就可以轻松地访问和操作数据。同时，它还提供了将数据转换回电子表格文件的功能。 3. **操作数据**：SheetJS 提供了一系列API，可以对...
在这个“javascript-document对象详解(下)”的压缩包中，我们可以通过三个文件来深入理解这个核心概念。 首先，`29.document-fun.html`可能是一个包含实际代码示例的HTML文件，它展示了`document`对象在实践中的...
### JavaScript对象模型-执行模型详解 #### 一、基本数据类型 JavaScript作为一种广泛使用的脚本语言，在其设计之初便提供了一系列的基本数据类型，这些类型构成了JS语言的基础，并且是理解和运用JS的重要基石。 ...
《华为云对象存储服务（OBS）与JavaScript SDK详解》 华为云对象存储服务（Object Storage Service，简称OBS）是一种大规模、高可靠、安全、低成本的云存储服务，能够帮助用户存储和管理各种类型的数据，如图片、...
资源名称：完全手册--Javaｓｃｒｉｐｔ动态网页开发详解 (杨水清等著) 内容简介： 你还认为Javaｓｃｒｉｐｔ只能制作网页特效，那就大错特错了。现在网络领域最流行的理念是Web 2.0，而该理念的技术...
### JavaScript对象模型与执行模型详解 #### 一、引言 JavaScript作为一种强大的脚本语言，在Web开发领域占据了举足轻重的地位。其独特的对象模型和执行模型为开发者提供了灵活多变的功能，使得JavaScript能够轻松...
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级、解释型编程语言，以其灵活性和交互性在网页设计中占据核心地位。本教程将深入探讨JavaScript的各个方面，旨在为初学者提供一个全面的学习路径，同时也适合有...
JavaScript 和 Vue.js 是Web开发中的两个重要组成部分。JavaScript 是一种广泛使用的编程语言，主要用于增加网页的交互性。Vue.js 是一个流行的JavaScript框架，用于构建用户界面。 JavaScript 的起源可以追溯到...
**JS代码格式整理工具einars-js-beautify详解** 在编程过程中，保持代码整洁和规范是至关重要的。JS代码格式整理工具einars-js-beautify就是这样一个帮助开发者自动化完成这项任务的工具。它能快速地将混乱无序的...
标题中的"1-sixyin-music-source-v1.0.7.js"暗示这是一个JavaScript源代码文件，用于音乐相关的功能。这个文件可能是一个JavaScript库或插件，专为播放、管理和控制音乐而设计。版本号"v1.0.7"表示这是该软件的第7次...
### JavaScript对象读取速度实例详解 #### 一、引言 在JavaScript开发中，了解对象的访问机制对于提高代码执行效率至关重要。本文将基于提供的文件信息，深入探讨JS对象读取速度的影响因素，并通过具体示例来展示...
### 面向对象技术-2,javascript教程,js面向对象教程 #### 课程目标概述 本教程旨在帮助读者深入理解面向对象编程的基础知识，并掌握JavaScript中的面向对象编程技巧。主要内容涵盖面向对象的基础概念、核心特性...
javascript核心对象用户手册详解哦
**img-diff-js开源库详解** 在前端开发中，我们经常需要进行图像处理或比较，例如测试自动化中的视觉回归测试，或者用户界面的差异展示。`img-diff-js`就是一个专为这种需求设计的JavaScript库，它使得在浏览器环境...
### JavaScript对象遍历顺序详解 在JavaScript开发过程中，对象遍历是一个常见的操作。然而，对象遍历的顺序问题经常让开发者感到困惑。本篇文章将详细解释JavaScript对象遍历的顺序规则，以及常用的几种遍历方法。...
**前端项目 - videojs-record 插件详解** `videojs-record` 是一个强大的前端插件，主要用于在Web浏览器中实现音频、视频以及图像的录制功能。这个插件基于流行的 HTML5 视频库 `video.js`，为开发者提供了一种简单...
**Chart.js插件-Annotation详解** 在前端开发中，数据可视化是至关重要的，它能够将复杂的数据以图形的形式展示，使用户更容易理解。Chart.js是一个轻量级且强大的JavaScript库，用于创建各种图表，如折线图、柱状...
### JavaScript对象属性详解 在深入探讨JavaScript对象属性之前，我们首先需要理解JavaScript是一种广泛应用于网页开发的编程语言，它能够使网页变得动态、交互性更强。JavaScript中的对象是其核心特性之一，几乎...
- **读取**：`js-xlsx`能解析XLSX、XLSB、XLS、CSV等格式的文件，将数据转换为JavaScript对象，方便进一步的处理和分析。 - **写入**：反之，它也能将JavaScript对象转换为上述格式的电子表格文件，允许用户创建和...