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 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
React组件refs的使用详解
Feb 09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP实现的json类实例
2015/07/28 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
关于vue面试题汇总
2018/03/20 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
简单介绍python封装的基本知识
2019/08/10 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
.net笔试题
2014/03/03 面试题
升国旗仪式主持词
2014/03/19 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
学者《孟子》名人名言
2019/08/09 职场文书