Javascript对象学习1 - 创建对象的几种方法
2013-10-16 13:58
686 查看
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript对象的简单学习</title>
</head>
<body>
<script type="text/javascript">
(function(){
/**
* 1.Javascript对象的简单学习
*/
/* var user = {
name : "tom",
age : 23,
"address" : "USA", //属性名也可以是双引号
sayName : function(){
document.writeln(this.name + "----" + this.address );
}
};
//调用
document.writeln(user.name);
document.writeln(user.sayName());*/
/**
* 2.创建对象：工厂模式。JS中没有类的概念，但是又保留字class,表示未来可能会有类的定义。
*/
/* function createUser(name,age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayName = function() {
document.writeln("用户名为：" + this.name + "<br />");
}
return obj;
}
//创建对象
var user1 = createUser("tom",21);
var user2 = createUser("jerry",22);
//调用
document.writeln(" --- user1:" + user1.name + " <br />");
user2.sayName();
//判断user1类型
document.writeln(" 利用typeof判断user1：" + typeof user1 + "<br />"); //object
//document.writeln(" 利用instanceof判断user1：" + user1 instanceof User);
document.writeln(" user1的构造方法：" + user1.constructor);//function Object() { [native code] }
//说明：虽然通过工厂模式可以创建对象，但是无法知道对象的类型，比如：instanceof
*/
/**
* 3.创建对象：构造函数模式
*/
/* function User(name,age) {
this.name = name;
this.age = age;
this.sayName = function() {
document.writeln(" --- 构造方法创建函数：" + this.name + "<br />");
};
}
//创建对象
var user1 = new User("tom",21);
var user2 = new User("jerry",23);
//调用
document.writeln(" ---- user1.name :" + user1.name + "<br />");
user2.sayName();
//判断user1类型
document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
//document.writeln("判断user1是否为Object类型：" + (user1 instanceof Object) + "<br />"); 注意这么写是不能正常打印。
document.writeln( user1 instanceof User); // 判断是否为User类型 → true
document.writeln(user1.sayName == user2.sayName); // false → 说明sayName被创建多次，浪费内存
*/
/**
* 3.1 构造函数升级版
*/
/* function User(name,age) {
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName() {
document.writeln(" --- 构造方法创建函数：" + this.name + "<br />");
}
//创建对象
var user1 = new User("tom",21);
var user2 = new User("jerry",23);
//调用
document.writeln(" ---- user1.name :" + user1.name + "<br />");
user2.sayName();
//判断user1类型
document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
//document.writeln("判断user1是否为Object类型：" + (user1 instanceof Object) + "<br />"); 注意这么写是不能正常打印。
document.writeln( user1 instanceof User); // 判断是否为User类型 → true
document.writeln(user1.sayName == user2.sayName);
// true → ★表示是同一个函数，但是其缺点：当方法很多时，需要些很多的全局函数
document.writeln("构造函数：" + user1.constructor);
//function User(name,age) { this.name = name; this.age = age; this.sayName = sayName; }
*/
/**
* 4.创建对象：原型对象
*/
/* function User(){}
User.prototype.name = ""; //初始值为""
User.prototype.age = 0; //初始值为0
User.prototype.sayName = function() {
document.writeln(" --- 原型对象创建函数：" + this.name + "<br />");
}
//创建对象
var user1 = new User();
user1.name = "tom";
user1.age = 21;
var user2 = new User();
user2.name = "jerry";
user2.age = 23;
//调用
user1.sayName();
user2.sayName();
//判断user1类型
document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
document.writeln(user1 instanceof User); // 判断是否为User类型 → true
document.writeln(user1.sayName == user2.sayName);// true → ★表示是同一个函数
document.writeln("构造函数：" + user1.constructor); //function User(){}
//缺点：1.不能具有构造函数。2.属性引用对象类型时会发生共享问题。(见下面)
*/
/* function User(){}
User.prototype.name = ""; //初始值为""
User.prototype.age = 0; //初始值为0
User.prototype.address = []; //初始值为空数组[],对象
User.prototype.sayName = function() {
document.writeln(" --- 原型对象创建函数：" + this.name + "<br />");
}
//创建对象
var user1 = new User();
user1.name = "tom";
user1.age = 21;
user1.address.push("USA","CHINA");
var user2 = new User();
user2.name = "jerry";
user2.age = 23;
user2.address.push("CANADA");
//调用
document.writeln("user1.address :" + user1.address + "<br />"); //USA,CHINA,CANADA
document.writeln("user2.address :" + user2.address + "<br />"); //USA,CHINA,CANADA
//判断user1的类型
document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
document.writeln(user1 instanceof User); // 判断是否为User类型 → true
document.writeln(user1.sayName == user2.sayName);// true → ★表示是同一个函数
document.writeln("构造函数：" + user1.constructor); //function User(){}
*/
/**
* 5.★创建对象： 混合模型 = 构造方法(属性做的比较好) + 原型(方法做的比较好)
*/
/* function User(name,age) {
this.name = name;
this.age = age;
this.address = [];
}
User.prototype.sayName = function() {
document.writeln(" --- 混合型创建函数：" + this.name + "<br />");
};
//创建对象
var user1 = new User();
user1.name = "tom";
user1.age = 21;
user1.address.push("USA","CHINA");
var user2 = new User();
user2.name = "jerry";
user2.age = 23;
user2.address.push("CANADA");
//调用
document.writeln("user1.address :" + user1.address + "<br />"); //USA,CHINA
document.writeln("user2.address :" + user2.address + "<br />"); //CANADA
//判断user1的类型
document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
document.writeln(user1 instanceof User); // 判断是否为User类型 → true
document.writeln(user1.sayName == user2.sayName);// true → ★表示是同一个函数
document.writeln("构造函数：" + user1.constructor);
//function User(name,age) { this.name = name; this.age = age; this.address = []; }
*/
/**
* 6.★创建对象：动态原型模型
*/
/* function User(name,age) {
this.name = name;
this.age = age;
this.address = [];
//alert(typeof this.sayName);
if(typeof this.sayName != "function") {
User.prototype.sayName = function() {
document.writeln(" --- 动态原型创建对象：" + this.name);
}
}
}
//创建对象
var user1 = new User();
user1.name = "tom";
user1.age = 21;
user1.address.push("USA","CHINA");
var user2 = new User();
user2.name = "jerry";
user2.age = 23;
user2.address.push("CANADA");
//调用
document.writeln("user1.address :" + user1.address + "<br />"); //USA,CHINA
document.writeln("user2.address :" + user2.address + "<br />"); //CANADA
//判断user1的类型
document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
document.writeln(user1 instanceof User); // 判断是否为User类型 → true
document.writeln(user1.sayName == user2.sayName);// true → ★表示是同一个函数
document.writeln("构造函数：" + user1.constructor);
//function User(name,age) { this.name = name; this.age = age; this.address = []; //alert(typeof this.sayName); if(typeof this.sayName != "function") { User.prototype.sayName = function() { document.writeln(" --- 动态原型创建对象：" + this.name); } } }
*/
/**
* 7.-------------创建对象实例
* 在Javascript中，字符串的拼接将会非常消耗性能。(因为要不断的销毁对象，重建对象)
* 解决办法：是创建一个类似Java中的StringBuffer的对象
*/
function StringBuffer() {
this.array = new Array();
if(typeof this.append != "function") {
StringBuffer.prototype.addHan = function(str) {
this.array.push(str);
};
}
}
StringBuffer.prototype.toString = function() {
return this.array.join("");
};
var sb = new StringBuffer();
sb.addHan("hanchao1");
sb.addHan("hanchao2");
sb.addHan("hanchao3");
document.writeln(sb);
})();
</script>
</body>
</html>本文出自 “我的JAVA世界” 博客，请务必保留此出处http://hanchaohan.blog.51cto.com/2996417/1309678
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js屏蔽鼠标右键 .net 禁止选择文本、shift、alt、ctrl
- javascript快速模板渲染引擎实现mvc
- JS实现时间格式化
- 9 行 javascript 代码获取 QQ 群成员
- js模仿hover
- 9 行 javascript 代码获取 QQ 群成员
- knockoutjs visible
- 使用 Web Tracing Framework 分析富 JS 应用的性能
- JSON-lib框架，转换JSON、XML不再困难
- xStream完美转换XML、JSON
- Internet Explorer 无法启用 JavaScript 怎么办？
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 动态加载js脚本的方法
- 动态输出的javascript中alert文本的换行问题
- js判断文档上传
- 屏蔽webBrowser中JS加载错误
- 用JS实现点击TreeView根节点复选框全选
- [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js
- JS引用类型之——RegExp