JavaScript创建对象的几种重要模式
一、工厂模式
1. 代码示例
function person(name, age) {
var p = new object();
p.name = name;
p.age = age;
p.sayName = function() {
console.log(this.name);
};
return p;
}
var person1 = person('Bonnie', 26);
var person2 = person('Summer', 24);
2. 优点
解决了创建多个相似对象的问题。
3. 缺点
没有解决对象识别的问题。
二、 构造函数模式
1. 代码示例
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log(this.name);
}
}
var person1 = new Person('Bonnie', 26);
var person2 = new Person('Summer', 24);
牢记:构造函数在不返回值的情况下,默认会返回新对象的实例(构造函数模式)。 如果在构造函数内部末尾添加一个return语句,可以重写调用构造函数时返回的值(寄生构造函数模式)。
2.优点
创建自定义的构造函数意味着可以将它的示例标志为一种特定的类型(执行person1 instanceof Person为true)。这就是它比工厂模式更胜一筹的地方。
3.缺点
每个方法都要在每个实例上创建一遍。也就是说,使用构造函数模式创建的每个实例都包含着各自独有的同名函数。然而,创建两个完成同样任务的同名函数并没有必要。
可以像这样使构造函数创建的每个实例都引用一个方法:
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName() {
console.log(this.name);
}
但是这样带来的问题是被构造函数的不同实例共同引用的这个方法存在于全局作用域中,这一方面破坏了全局作用域,另一方面也破坏了该自定义类型的封装性。
三、 原型模式
1. 代码示例
function Person() {
}
Person.prototype.name = "Bonnie";
Person.prototype.age = 26;
Person.prototype.sayName = function() {
console.log(this.name)
}
var person1 = new Person();
var person2 = new Person();
2. 优点
可以让所有对象实例共享它所包含的属性和方法。
3. 缺点
首先,它省略了为构造函数传递初始化参数这一环节,这样所有实例默认都会取得相同的属性值。
更严重的是,其共享的本质对于引用类型的属性值(如数组)是非常不适合的:对于修改一个实例上引用类型的属性值也会修改另一个实例上的这个属性值。不过,其共享本质对于函数非常合适,因为方法本来就是共用的。而其对于基本值的属性也比较合适,因为可以通过在实例上添加同名的属性名来覆盖原型中的属性。
详见我的另一篇博客《原型与原型链》 的"一、创建对象的重要模式:原型模式"。
四、 组合使用构造函数模式和原型模式
1.代码示例
function Person(name, age) {
this.name = name;
this.age = age;
this.friends = ['Spring', 'Huiyun'];
}
Person.prototype.sayName = function() {
console.log(this.name);
}
var person1 = person('Bonnie', 26);
var person2 = person('Summer', 24);
2. 优点
实例属性都在构造函数中实现,共享的属性和方法在原型中定义,是使用最广、认同度最高的一种创建自定义类型的方式。也是默认方式。
五、动态原型模式
1. 代码示例
function Person(name, age) {
this.name = name;
this.age = age;
if (typeof this.sayName != 'function') {
Person.prototype.sayName = function() {
console.log(this.name);
}
}
}
2. 优点
只有在某方法不存在的情况下,才将该方法添加到原型上。添加到原型上这段代码只会在初次调用构造函数时才会执行。对原型所做的修改会立刻反映到所有实例中。
注意:不能使用对象字面量重写原型,因为如果已经创建了实例,那么重写原型会切断现有实例和新原型之间的联系。
六、寄生构造函数模式
1. 代码示例
function Person(name, age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function() {
console.log(this.sayName);
}
return o;
}
var person1 = new Person('Bonnie', 26);
除了使用new操作符并把包装的函数叫做构造函数之外,该模式跟工厂模式是一模一样的。构造函数在不返回值的情况下默认返回新对象实例。而通过在构造函数内部末尾添加return语句,可以重写调用构造函数时返回的值。
2. 优点
该模式适于为特殊对象(如Array)创建具有新属性、新方法的实例。也就是说适于在某些已有的特殊类型(如Array)的基础上创建新的特殊类型(如SpecialArray)。
例如可以在Array的基础上,创建具有额外方法的数组:
function SpecialArray() {
var o = new Array();
o.push.apply(o, arguments);
o.getPipedStr = function() {
return this.join('|');
}
return o;
}
var colors = new SpecialArray('red', 'blue', 'green');
console.log(colors);// ["red", "blue", "green", getPipedStr: ƒ]
console.log(colors.getPipedStr);//"red|blue|green"
3. 缺点
该模式返回的对象与构造函数以及构造函数的原型之间毫无关系。也就是说,该模式返回的对象与在构造函数外部超级多对象没什么不同。所以构造函数所表示的类型并不是实例的类型。
以上例来说:
colors instanceof SpecialArray;// false
七、 稳妥构造函数模式
1. 代码示例
function Person(name, age) {
var o = new Object();
//私有变量
var job = 'developer';
o.sayName = function() {
console.log(name);
}
o.sayJob = function() {
console.log(job);
}
return o;
}
var person1 = new Person('Bonnie', 26);
person.sayName()//'Bonnie'
person.sayJob()//'Job'
该方式创建的对象,除了sayName、sayJob方法以外,没有别的办法访问变量name、job。
2. 优点
该模式提供了固定的方法来访问构造函数中的原始数据(构造函数参数、私有变量)。除提供的方法外,没有其他办法可以访问其构造函数中的原始数据。这种安全性使得稳妥构造函数模式非常适合在某些安全执行环境(如ADsafe、Caja)下使用。
参考资料
《JavaScirpt高级程序设计》6.2
JavaScript创建对象的几种重要模式的更多相关文章
- JavaScript创建对象(三)——原型模式
在JavaScript创建对象(二)——构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题.本篇文章就来讨论一下该问题的解决方案——原型模式. 首先我们来看下什么是原型.我们在创建一个函 ...
- JavaScript 创建对象的七种方式
转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以 ...
- JavaScript创建对象的几种 方式
//JavaScript创建对象的七种方式 //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9 ...
- Javascript 创建对象的三种方法及比较【转载+整理】
https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...
- javascript创建对象的方法--动态原型模式
javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题 2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- javascript创建对象的几种方式
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON:但写法有很多种,也能混合使用.主要为下面几种:1.对象字面量的方式 person={firstname ...
- JavaScript创建对象的几种方式总结
ECMA把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数. 1. 使用Object构造函数创建对象 创建自定义对象的最简单的方式就是创建一个Object的实例,然后再为它添加属性和方法 ...
- JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
随机推荐
- Shell编程之case条件
一.case条件语句 1.语法 case "变量" in 值 1) 指令 1... ;; 值 2) 指令 2... ;; *) 指令 3... esac case条件语句的执行流程 ...
- PHP面向对象之对象和引用
在PHP中对象类型和简单变量类型表现可以说是大相径庭,很多数据类型都要可以在写时进行复制,如当写代码$a=$b时,两个变量因为赋予相同的值而告终.所以需要注意的是,这种情况用在对象时就会完全不同了. ...
- PHP 面向对象及Mediawiki 框架分析(二)
mediaHandler可以理解为处理media文件的 /includes/filerepo/file/File.php /** * Get a MediaHandler instance for t ...
- Centos7 关闭Ipv6
- maven创建web工程Spring配置文件找不到
使用maven创建web工程,将Spring配置文件applicationContext.xml放在src/resource下,用eclipse编译时提示class path resource [ap ...
- mac下查看占用端口的进程及杀死进程
mac lsof -i :9000 kill -9 716
- this关键字详解
在java中,编译器会为每个对象分配一个this关键字.在代码中使用关键字可以使代码更优雅.下面我就列举一下this关键字常见的几种场景. 1.this代表当前对象调用成员变量和方法,也是用的最多的地 ...
- Oracle大数据表的分表处理
1.首先给大数据表创建rownum序列号 --增加序列号字段 alter table TEST add xlh number; --填充序列号 update TEST set xlh = rownum ...
- 一款简易的CSS3扁平化风格联系表单
CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...
- Jedis使用过程中踩过的那些坑
1. 一个 大坑:若实例化 JedisShardInfo 时不设置节点名称(name属性),那么当Redis节点列表的顺序发生变化时,会发生“ 键 rehash 现象” 使用BTrace追踪redis ...