JavaScript中创建对象的几种模式
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建对象的模式</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<!--<script src="main.js"></script>-->
</head>
<body>
<script>
//js中没有类的概念，所以开发人员使用函数来封装特定接口从而创建对象
//1.工厂模式，解决了创建多个相似对象的问题，但是没有解决对象识别问题
function t1(name,age,sex){
var o={};
o.name=name;
o.age=age;
o.sex=sex;
return o;
};
var p1=t1('张三',21,'male');
var p2=t1('Alice',23,'female');
console.log(p1,p2);
console.log(typeof p1,typeof p2); // 2.构造函数模式
function T2(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.showInfo=function(){
console.log(this.name+' '+this.age+' '+this.sex);
}
}
var p3=new T2('李四',25,'male');
var p4=new T2('Mary',22,'female');
//此时对象的constructor是用来标识对象类型的
console.log(p3,p4,p3.constructor===T2,p4.constructor===T2);
console.log(p3 instanceof Object,p3 instanceof T2); //如果将构造函数作为普通函数调用，那么属性和方法都被添加到全局对象，这里是window
T2('ww',29,'male');
console.log(window.name,age,sex); // 构造函数模式存在的缺陷：构造函数里面的方法(上面指showInfo)不是共享的，即每次的showInfo不相同
console.log(p3.showInfo===p4.showInfo); // 3.原型模式
function T3(){
}
T3.prototype.name='Aya';
T3.prototype.age=100;
T3.prototype.showInfo=function(){
console.log(this.name);
}; var p5=new T3();
p5.showInfo();
var p6=new T3();
p6.showInfo();
console.log(p5.showInfo===p6.showInfo);
// 实例中的属性或方法会覆盖原型中的属性或方法
p5.name='xiaoming';
p5.showInfo();
delete p5.name;
p5.showInfo();
// js引擎对属性的寻找都是从下往上追溯的 // 使用hasOwnProperty()可以检测属性在实例上，还是在原型上
p6.name='nicai';
console.log(p6.hasOwnProperty('name'));
// 使用in，属性在原型上或者实例上，均返回true
console.log('name' in p5,'name' in p6); // 所以当hasOwnProperty()返回false,而in返回true，那么属性位于原型上
if (!p5.hasOwnProperty('name') && 'name' in p5){
console.log('name属性在原型上');
} // 原型模式更直观的可以写为下面形式：
function T4(){}
T4.prototype={
name:'abc',
age:100,
sayHi:function(){
console.log(this.name);
}
}
// 原型模式存在的问题:1.所有属性初始值一样;2.最大的问题，当含有引用类型时，一个实例对象的修改会导致其它实例对象也跟着修改
function T5(){}
T5.prototype={
constructor:T5,
name:'abc',
age:100,
arr:[1,2,3]
}
var p7=new T5();
var p8=new T5();
//所有实例对象的引用类型会相应变化
p7.arr.unshift(0);
//实例对象的基本类型倒不影响
p7.name='Bob';
console.log(p7.arr,p8.arr,p7.name,p8.name); // 4.组合使用构造函数模式与原型模式
// 是目前在ECMAScript使用最广泛、认可度最高的一种创建自定义类型的方法
function Person(name,age){
this.name=name;
this.age=age;
this.friends=['Alice','Bob'];
}
Person.prototype={
constructor:Person,
sayHello:function(){
console.log(this.name);
} };
var per1=new Person('Apple',1000);
var per2=new Person('Blue',10);
per1.friends.push('cat');
console.log(per1.friends,per2.friends);
console.log(per1.sayHello===per2.sayHello); // 5.动态原型模式
function Person1(name,age){
this.name=name;
this.age=age;
if(typeof this.sayHello !== 'function'){
Person1.prototype.sayHello=function(){
console.log(this.name);
}
}
}
var per3=new Person1('Bill',111);
console.log(per3); // 6.寄生(parasitic)构造函数模式
// 其实与工厂模式一样，除了使用构造函数和new操作符
function Person2(name,age){
var o={};
o.name=name;
o.age=age;
return o;
}
var per4=new Person2('Egg',100); // 7.稳妥(durable)构造函数
// 与寄生构造函数模式类似，但两处不同点：1.新创建对象的实例方法不使用this 2.不使用new 调用构造函数
// 稳妥构造函数适合在某些安全环境下
function Test3(age){
var o={};
o.showName=function(){
console.log(age);
};
return o;
}
var per5=Test3(100);
console.log(per5);
</script>
</body>
</html>
运行结果：
参考<<JavaScript高级程序语言设计>>
JavaScript中创建对象的几种模式的更多相关文章
- JavaScript中创建对象的三种模式
JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...
- JavaScript中创建对象的5种模式
构造函数模式 实现方式: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; thi ...
- javascript中创建对象的几种不同方法
javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- javascript中创建对象的几种方式
1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- 深入理解JavaScript中创建对象模式的演变（原型）
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 《JAVASCRIPT高级程序设计》创建对象的七种模式
细看javascript创建对象模式的诞生,具体的脉络为:不使用任何模式——工厂模式——构造函数模式——原型模式——组合使用构造函数模式——动态原型模式——寄生构造函数模式——稳妥构造函数模式.每一种 ...
- javascript中创建对象和实现继承
# oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系: * 构造函数的pro ...
随机推荐
- Android数据存储引擎---SQLite数据库
目标:是否可以在PC端桌面上使用SQLite数据库制作一个财务文件? 目录: 来源: 实践: 总结和比较: SQLite数据简介 是什么,内部结构是怎样的,数据库和表的关系是什么 有什么用 常用的操作 ...
- Allegro导入PADS文件
1.打开要转换的PADS文件,并导出ASC文件 全选.格式选择PowerPCB V5.0 2.打开Allegro软件,导入上面生成的ASC文件 单击Translate即可完成转换,目录切换到输出路径, ...
- Hibernate 对象关系映射文件
简介: POJO 类和关系型数据库之间的映射可以用一个 XML 文档来定义 通过 POJO 类的数据库映射文件,Hibernate 可以理解持久化类和数据表之间的对应关系,也可以理解持久化类属性与数据 ...
- Java课程课后作业之19学期之第一周博客作业
作为一个大二的学生,自己已经不小了,没有大一那个时候的无忧无虑的可以放纵的时光,只剩下一年,我就该做出我人生的下一个重大决定了,这一次真的是我一个人的决定,从小到大,父母为我做过很多的决定,即使在小的 ...
- File类中的一些属性 添加删除文件夹
import java.io.File; import java.io.IOException; public class FileD { public static void main(String ...
- css 图片置灰
.filterGray{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(10 ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- SQL - 1.区分login、user、schema和role
Login Login 是Server一级的概念,表示登录Server的凭证,比如在Server_A上有一个数据库DA,那么想要访问数据库DA,第一步要做的事情就是先登录到Hosting该数据 ...
- Eclipse中 maven 工程 pom 文件 出错
解决: 在<plugins> 外层 添加 <pluginManagement> No marketplace entries found to handle mybati ...
- gdb调试用法
目录 一.gdb功能简介 二.gdb使用前置条件:编译时加入debug信息. 三.gdb最常见的几个用法: 1.gdb的启动,加载程序: 2.调试正在运行的程序: 3. 查core: 四.gdb常用命 ...