javascript 面向对象封装与继承


Posted in Javascript onNovember 27, 2014

整理一下js面向对象中的封装和继承。

1.封装

js中封装有很多种实现方式,这里列出常用的几种。

1.1 原始模式生成对象

直接将我们的成员写入对象中,用函数返回。 缺点:很难看出是一个模式出来的实例。

代码:

       function Stu(name, score) {

            return {

                name: name,

                score: score

            }

        }

        var stu1 = Stu("张三", 80);

        var stu2 = Stu("李四", 90);

        console.log(stu1.name); // 张三

1.2 生成构造模式对象

js帮我们提供了一个使用构造函数生成对象的模式,¨所谓“构造函数”,其实就是一个普通函数,但是内部使用了this变量。当使用new关键字对构造函数生成实例后,this变量则会绑定在实例对象上。

直接上代码:

      function Stu(name, score) {

            this.name = name,

            this.score = score

        }

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李四", 90);

        console.log(stu1.name + "/" + stu2.score); // 张三  90

        console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true  true

        console.log((stu1 instanceof Stu) + "/" + (stu2 instanceof Stu)); // true  true

不难看出js的构造函数生成对象和C#用class生成对象如出一辙,都是用模板定义对象成员通过new关键字实例化。

用C#代码生成同样的Stu对象

Class Stu

{
public string name;

public double score;                    

}

ok,到这儿基本的对象有了。 那么现在我们需要一个所有对象都公用的方法,而且只让这个方法创建一次。(不随着对象new而重复创建)

怎么办呢? 大家都知道在C#中我们可以用静态成员。那么在js中怎么做呢?

1.3 Prototype模式

在js中,每一个构造函数都有一个prototype属性,这个对象的所有属性和方法,都会被构造函数的实例继承。那么我们直接给prototype添加成员就相当于在C#中声明静态成员了。

代码:

      function Stu(name, score) {

            this.name = name,

            this.score = score

        }

        Stu.prototype.type='学生';

        Stu.prototype.log = function (s) {

            console.log(s);

        }

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李四", 90);

        console.log(stu1.type + "/" + stu2.type); // 学生 学生

        stu1.log('hello');  // hello

        console.log(stu1.log == stu2.log);  // true

封装就讲到这儿了,下面我们来看看js中继承又是如何实现的?

2.继承

2.1 构造函数绑定

在子函数中直接调用 call或apply方法,将父对象的构造函数绑定在子对象上。
 

   function Stu(name, score) {

            Grade.apply(this, arguments);

            //Grade.call(this, arguments);

            this.name = name,

            this.score = score

        }

        function Grade() {

            this.code = "初中";

            this.ask = function () {

                console.log("大家好");

            }

        }

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李四", 90);

        console.log(stu1.code); // 初中

        stu1.ask(); // 大家好

这里的apply做了两件事情,把第一个参数this给Grade构造函数(调用者),然后再执行Grade里的代码。就相当于将Grade中用this定义的成员在Stu中再执行一遍。

2.2 通过prototype继承

先看代码

代码:

    function Stu(name, score) {

            this.name = name,

            this.score = score

        }

        function Grade() {

            this.code = "初中";

        }

        Stu.prototype = new Grade();

        Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李四", 90);

        console.log(Stu.prototype.constructor); // 自己的构造函数

        console.log(stu1.code); // 初中

前面说过prototype就相当于C#中的静态成员,所以我们就把父类的所有成员都变成自己的静态成员来实现继承。

通过prototype继承有一个缺点:所有继承的成员都是静态的,那么怎么继承对象成员呢?

2.3 拷贝继承

把父对象的所有属性和方法,拷贝进子对象,实现继承。

代码:

    function Stu(name, score) {

            this.name = name,

            this.score = score

        }

        function Grade() {}

        Grade.prototype.code = "初中";

    }

        //函数封装

        function extend(C, P) {

            var p = P.prototype;

            var c = C.prototype;

            for (var i in p) {

                c[i] = p[i];

            }

        }

        extend(Stu, Grade);

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李四", 90);

        stu1.code='高中';

        console.log(stu1.code); // 高中

        console.log(stu2.code); // 初中

        console.log(Stu.prototype.constructor);

        console.log(Grade.prototype.constructor)

    js面向对象的整理就写到这了,这个东西也不是一成不变的,使用的时候根据自己的需求做改动。  有句话说的很好,合适的才是最好的。

这里只针对封装和继承进行了分析,后续我们再做一些其他方面的文章,让小伙伴们更加深入的了解javascript面向对象编程。当然都是个人的一些理解,如有遗漏,请联系我。

Javascript 相关文章推荐
js字符编码函数区别分析
Dec 28 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
require.js的用法详解
Oct 20 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
JavaScript变量声明详解
Nov 27 #Javascript
js脚本实现数据去重
Nov 27 #Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 #Javascript
javascript几个易错点记录
Nov 26 #Javascript
You might like
php入门教程 精简版
2009/12/13 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP文件与目录操作示例
2016/12/24 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python匿名函数的使用方法解析
2019/10/10 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
生产车间标语
2014/06/11 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书