javascript优化--09模式(代码复用)02

原型继承 ://现代无类继承模式

  • 基本代码:

    var parent = {
    	name : "Papa"
    }
    var child = object(parent);
    
    function object(o) {
    	function F() {};
    	F.prototype = o;
    	return new F();
    }
    

    选择继承的时候可以考虑,传入实例还是构造函数原型; 

    var child = object(parent);
    var child = object(Parent.prototype);  
  • ECMA5中的实现: Object.create();
    var child = Object.create(parent, {
    	age: {value :2}
    });

通过复制属性实现继承

  • 浅复制:

    function extend(parent, child) {
    	var i;
    	child = child || {};
    	for(i in parent) {
    		if(parent.hasOwnProperty(i)) {
    			child[i] = parent[i];
    		}
    	}
    	return child;
    }
    

    问题:如果属性是对象的话,会仍然造成影响;  

  • 深复制:

    function extendDeep(parent, child) {
    	var i,
    		toStr = Object.prototype.toString,
    		astr = ‘[object Array]‘;
    	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;
    }
    
  • 混合:从多个对象中复制出任意成员,并将这些成员组成一个新的对象;
    function mix() {
    	var arg, prop, child = {};
    	for(arg = 0; arg < arguments.length; arg += 1) {
    		for(prop in arguments[arg]) {
    			if(arguments[arg].hasOwnProperty(prop)) {
    				child[prop] = arguments[arg][prop];
    			}
    		}
    	}
    	return child;
    }
    
    var cake = mix(
    {eggs: 2, large: true},
    {butter: 1, salted: true},
    {flour: ‘3 cups‘},
    {sugar: ‘sure!‘}
    );
    

借用方法:重用一些方法,但不想形成继承关系;  

  • 利用apply/call;
  • 利用bind;
时间: 2024-11-20 09:28:12

javascript优化--09模式(代码复用)02的相关文章

javascript优化--06模式(对象)

命名空间模式: 优点:可以解决命名混乱和第三方冲突: 缺点:长嵌套导致更长的查询时间:更多的字符: 通用命名空间函数: var MYAPP = MYAPP || {}; MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'); parent = MYAPP; if(parts[0] === 'MYAPP') { parts = parts.slice(1); } for(var i = 0; i < pa

javascript优化--12模式(DOM和浏览器模式)

注意分离: 通过将CSS关闭来测试页面是否仍然可用,内容是否依然可读: 将JavaScript关闭来测试页面仍然可以执行正常功能:所有连接是否正常工作:所有的表单是否可以正常工作: 不使用内联处理器(onclick之类)和内联样式属性,因为这些不属于内容层: 使用语义上有意义的HTML元素: DOM脚本: DOM访问: //DOM访问的代价是昂贵的 避免在循环中使用DOM访问: 在可能的情况下使用selector API; 在HTML容器中重复使用时,缓存重复的次数: 将DOM引用分配给局部变量

javascript优化--05模式

回调模式: 基本例子: var findNodes = function (callback) { ...................... if (typeof callback !== 'function') { callback = false; } ................ while(i) { i --; ............ if(callback) { callback(found) } ............ } } 回调方法是对象方法的时候: var find

深入理解JavaScript系列(45):代码复用模式(避免篇)

介绍 任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量避免使用这些模式,因为或多或少有带来一些问题:第二排是推荐篇,指的是推荐大家使用的模式,一般不会有什么问题. 模式1:默认模式 代码复用大家常用的默认模式,往往是有问题的,该模式使用Parent()的构造函数创建一个对象,并且将该对象赋值给Child()的原型.我们看一下代码: function i

javascript代码复用模式(二)

前面说到,javascript的代码复用模式,可分为类式继承和非类式继承(现代继承).这篇就继续类式继承. 类式继承模式-借用构造函数 使用借用构造函数的方法,可以从子构造函数得到父构造函数传任意数量的参数.这个模式借用了父构造函数,它传递子对象以绑定到this,并转发任意数量的参数: function Child(a,b,c,d){ Parent.apply(this,arguments); } 在这种方式中,只能继承在父构造函数中添加到this的属性,并不能继承添加到原型中的成员. 使用借用

javascript代码复用模式

原文链接:http://www.faceye.net/search/143351.html 代码复用有一个著名的原则,是GoF提出的:优先使用对象组合,而不是类继承.在中,并没有类的概念,所以代码的复用,也并不局限于类式继承.javascript中创建对象的方法很多,有构造函数,可以使用new创建对象,并且可以动态的修改对象.javascript的非类式继承(可称为现代继承模式)复用方法也很多,例如,利用其它对象组合成所需要的对象,对象混入技术,借用和复用所需要的方法. 类式继承模式-默认模式

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

介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { function F() { } F.prototype = o; return new F(); } // 要继承的父对象 var parent = { name: "Papa" }; // 新对象 var child = object(parent); // 测试 console.log(c

javascript 模式(1)——代码复用

程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合.本节将会讲解多种继承模式以实现代码复用. 继承复用-默认模式 继承复用-apply函数 继承复用-临时构造 继承复用之默认模式: 每个javascript对象都和另一个对象 相关联,而这个对象就是原型(prototype),而原型又可以链接到其他原型行程原型链,如果当前对象不存在类似方法则会沿原型链查找,直到查找为止.继承的默

JavaScript模式读书笔记 第6章 代码复用模式

主要使用代码继承来完成复用. 1,使用类式继承. -1,类式继承:按照类的方式来实现继承,即所谓的类式. -2,类式继承:通过构造函数(child)获取来自parent的属性,从而创建对象. <script> //parent function Parent(name){ this.name = name || 'Adam'; } Parent.prototype.say = function(){   return this.name; } //child function Child(na