JavaScript代码复用模式详解


Posted in Javascript onNovember 07, 2014

代码复用及其原则

代码复用,顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用,从而构建新的程序。在谈及代码复用的时候,我们首先可以想到的是继承性。代码复用的原则是:

优先使用对象组合,而不是类继承

在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和修改它们。

但在js中,我们可以使用构造函数和new操作符来实例化一个对象,这与其他使用类的编程语言在语法上有其相似之处。

例如:

var trigkit4 = new Person();

js在调用构造函数Person时似乎看起来是一个类,但其实际上仍然是一个函数,这让我们产生了一些假定在类的基础上的开发思路和继承模式,我们可以称之为“类式继承模式”。

传统的继承模式是需要class关键字的,我们假定以上的类式继承模式为现代继承模式,这是一种不需要以类的方式考虑的模式。

类式继承模式

看下面两个构造函数Parent()Child()的例子:

<script type="text/javascript">
    function Parent(name){
        this.name = name || 'Allen';
    }
    Parent.prototype.say = function(){
        return this.name;
    }
    function Child(name){}
    //用Parent构造函数创建一个对象,并将该对象赋值给Child原型以实现继承
    function inherit(C,P){
        C.prototype = new P();//原型属性应该指向一个对象,而不是函数
    }
    //调用声明的继承函数
    inherit(Child,Parent);
</script>

当使用new Child()语句创建一个对象时,它会通过原型从Parent()实例获取它的功能,比如:

var kid = new Child();
kid.say();
//Allen

原型链

讨论一下类式继承模式下原型链的工作原理,我们将对象看做是内存中某处的块,该内存块包含数据以及指向其他块的引用。当用new Parent()语句创建一个对象时,就会创建如下图左边的这样一个块,这个块保存了name属性,如果想访问say()方法,我们可以通过指向构造函数Parent()prototype(原型)属性的隐式链接__proto__,便可访问右边区块Parent.prototype

JavaScript代码复用模式详解

那么,当使用var kid = new Child()创建新对象时会发生什么?如下图:

JavaScript代码复用模式详解

使用new Child()语句所创建的对象除了隐式链接__proto__外,它几乎是空的。这种情况下,__proto__指向了在inherit()函数中使用new Parent()语句所创建的对象

当执行kid.say()时,由于最左下角的区块对象并没有say()方法,因此他将通过原型链查询中间的区块对象,然而,中间的区块对象也没有say()方法,因此他又顺着原型链查询到最右边的区块对象,而该对象正好有say()方法。完了吗?

执行到这里的时候并没有完,在say()方法中引用了this.name,this指向构造函数所创建的对象,在这里,它指向了new Child()这个区块,然而,new Child()中并没有name属性,为此,将查询中间区块,而中间区块正好有name属性,至此,原型链的查询完毕。

更详细的讨论请查看我这篇文章:javascript学习笔记(五)原型和原型链详解

共享原型

本模式的法则在于:可复用的成员应该转移到原型中而不是放置在this中。因此,处于继承的目的,任何值得继承的东西都应该放在原型中实现。所以,可以将子对象的原型与父对象的原型设置为相同即可,如下示例所示:

function inherit(C,P){
    C.prototype = P.prototype;
}

JavaScript代码复用模式详解

子对象和父对象共享同一个原型,并且可以同等的访问say()方法。然而,子对象并没有继承name属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例:

<script type="text/javascript">
    //要继承的对象
    var parent = {
        name : "Jack"  //这里不能有分号哦
    };
    //新对象
    var child = Object(parent);
    alert(child.name);//Jack
</script>

在原型模式中,并不需要使用对象字面量来创建父对象。如下代码所示,可以使用构造函数来创建父对象,这样做的话,自身的属性和构造函数的原型的属性都将被继承。

<script type="text/javascript">
    //父构造函数
    function Person(){
        this.name = "trigkit4";
    }
    //添加到原型的属性
    Person.prototype.getName = function(){
        return this.name;
    };
    //创建一个新的Person类对象
    var obj = new Person();
    //继承
    var kid = Object(obj);
    alert(kid.getName());//trigkit4
</script>

本模式中,可以选择仅继承现有构造函数的原型对象。对象继承自对象,而不论父对象是如何创建的,如下实例:

<script type="text/javascript">
    //父构造函数
    function Person(){
        this.name = "trigkit4";
    }
    //添加到原型的属性
    Person.prototype.getName = function(){
        return this.name;
    };
    //创建一个新的Person类对象
    var obj = new Person();
    //继承
    var kid = Object(Person.prototype);
    console.log(typeof kid.getName);//function,因为它在原型中
    console.log(typeof kid.name);//undefined,因为只有该原型是继承的
</script>
Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
JavaScript中的style.cssText使用教程
Nov 06 #Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 #Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 #Javascript
javascript解析json实例详解
Nov 05 #Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 #Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 #Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
Javascript中replace()小结
2015/09/30 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python实现简单ftp客户端的方法
2015/06/28 Python
简单了解什么是神经网络
2017/12/23 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
django使用admin站点上传图片的实例
2019/07/28 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
公司前台辞职报告
2014/01/19 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers