深入理解JavaScript系列(46):代码复用模式(推荐篇)详解

介绍

本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用。

模式1:原型继承

原型继承是让父对象作为子对象的原型,从而达到继承的目的:

代码如下:

F.prototype = o; return new F(); }

// 要继承的父对象 var parent = { name: "Papa" };

// 新对象 var child = object(parent);

// 测试 console.log(child.name); // "Papa"

// 父构造函数 function Person() { // an "own" property this.name = "Adam"; } // 给原型添加属性 Person.prototype.getName = function () { return this.name; }; // 创建新person var papa = new Person(); // 继承 var kid = object(papa); console.log(kid.getName()); // "Adam"

// 父构造函数 function Person() { // an "own" property this.name = "Adam"; } // 给原型添加属性 Person.prototype.getName = function () { return this.name; }; // 继承 var kid = object(Person.prototype); console.log(typeof kid.getName); // "function",因为是在原型里定义的 console.log(typeof kid.name); // "undefined",因为只继承了原型

同时,ECMAScript5也提供了类似的一个方法叫做Object.create用于继承对象,用法如下:

代码如下:
功能 */ var child = Object.create(parent);

var child = Object.create(parent,{ age: { value: 2} // ECMA5 descriptor }); console.log(child.hasOwnProperty("age")); // true

而且,也可以更细粒度地在第二个参数上定义属性

代码如下:

// 接着,创建包含属性的配置设置 // 属性设置为可写,可枚举,可配置 var config = { writable: true, enumerable: true, configurable: true };

// 通常使用Object.defineProperty()来添加属性(ECMAScript5支持) // 现在,为了方便,我们自定义一个封装函数 var defineProp = function (obj,key,value) { config.value = value; Object.defineProperty(obj,config); }

defineProp(man,'car','Delorean'); defineProp(man,'dob','1981'); defineProp(man,'beard',false);

所以,继承就这么可以做了:

代码如下:
但是有个地方需要注意,就是Object.create(null)创建的对象的原型为undefined,也就是没有toString和valueOf方法,所以alert(man);的时候会出错,但alert(man.car);是没问题的。

模式2:复制所有属性进行继承

这种方式的继承就是将父对象里所有的属性都复制到子对象上,一般子对象可以使用父对象的数据。

先来看一个浅拷贝的例子:

代码如下:

var dad = { name: "Adam" }; var kid = extend(dad); console.log(kid.name); // "Adam"

var dad = { counts: [1,2,3], reads: { paper: true } }; var kid = extend(dad); kid.counts.push(4); console.log(dad.counts.toString()); // "1,3,4" console.log(dad.reads === kid.reads); // true

代码的最后一行,你可以发现dad和kid的reads是一样的,也就是他们使用的是同一个引用,这也就是浅拷贝带来的问题。

我们再来看一下深拷贝:

代码如下:

child = child || {};

for (i in parent) { if (parent.hasOwnProperty(i)) { if (typeof parent[i] === 'object') { child[i] = (toStr.call(parent[i]) === astr) ? [] : {}; extendDeep(parent[i],child[i]); } else { child[i] = parent[i]; } } } return child; }

var dad = { counts: [1, reads: { paper: true } }; var kid = extendDeep(dad);

kid.counts.push(4); console.log(kid.counts.toString()); // "1,4" console.log(dad.counts.toString()); // "1,3"

console.log(dad.reads === kid.reads); // false kid.reads.paper = false;

深拷贝以后,两个值就不相等了,bingo!

模式3:混合(mix-in)

混入就是将一个对象的一个或多个(或全部)属性(或方法)复制到另外一个对象,我们举一个例子:

代码如下:

var cake = mix( { eggs: 2,large: true }, { butter: 1,salted: true }, { flour: '3 cups' }, { sugar: 'sure!' } );

console.dir(cake);

mix函数将所传入的所有参数的子属性都复制到child对象里,以便产生一个新对象。

那如何我们只想混入部分属性呢?该个如何做?其实我们可以使用多余的参数来定义需要混入的属性,例如mix(child,parent,method1,method2)这样就可以只将parent里的method1和method2混入到child里。上代码

代码如下:

// Mixin var Mixin = function () { }; Mixin.prototype = { driveForward: function () { console.log('drive forward'); }, driveBackward: function () { console.log('drive backward'); } };

// 定义的2个参数分别是被混入的对象(reciving)和从哪里混入的对象(giving) function augment(receivingObj,givingObj) { // 如果提供了指定的方法名称的话,也就是参数多余3个 if (arguments[2]) { for (var i = 2,len = arguments.length; i < len; i++) { receivingObj.prototype[arguments[i]] = givingObj.prototype[arguments[i]]; } } // 如果不指定第3个参数,或者更多参数,就混入所有的方法 else { for (var methodName in givingObj.prototype) { // 检查receiving对象内部不包含要混入的名字,如何包含就不混入了 if (!receivingObj.prototype[methodName]) { receivingObj.prototype[methodName] = givingObj.prototype[methodName]; } } } }

// 给Car混入属性,但是值混入'driveForward' 和 'driveBackward'*/ augment(Car,Mixin,'driveForward','driveBackward');

// 创建新对象Car var vehicle = new Car({ model: 'Ford Escort',colour: 'blue' });

// 测试是否成功得到混入的方法 vehicle.driveForward(); vehicle.driveBackward();

方法使用起来就比较灵活了。

模式4:借用方法

一个对象借用另外一个对象的一个或两个方法,而这两个对象之间不会有什么直接联系。不用多解释,直接用代码解释吧:

代码如下:

// 测试 console.log(one.say('hi')); // "hi,object"

var two = { name: 'another object' };

console.log(one.say.apply(two,['hello'])); // "hello,another object"

// 将say赋值给一个变量,this将指向到全局变量 var say = one.say; console.log(say('hoho')); // "hoho,undefined"

// 传入一个回调函数callback var yetanother = { name: 'Yet another object', method: function (callback) { return callback('Hola'); } }; console.log(yetanother.method(one.say)); // "Holla,undefined"

function bind(o,m) { return function () { return m.apply(o,[].slice.call(arguments)); }; }

var twosay = bind(two,one.say); console.log(twosay('yo')); // "yo,another object"

// ECMAScript 5给Function.prototype添加了一个bind()方法,以便很容易使用apply()和call()。

if (typeof Function.prototype.bind === 'undefined') { Function.prototype.bind = function (thisArg) { var fn = this, slice = Array.prototype.slice, args = slice.call(arguments,1); return function () { return fn.apply(thisArg,args.concat(slice.call(arguments))); }; }; }

var twosay2 = one.say.bind(two); console.log(twosay2('Bonjour')); // "Bonjour,another object"

var twosay3 = one.say.bind(two,'Enchanté'); console.log(twosay3()); // "Enchanté,another object"

总结

就不用总结了吧。

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...