首页 > 代码库 > Javascript 进阶 面向对象编程 继承的一个例子

Javascript 进阶 面向对象编程 继承的一个例子

2024-07-07 11:57:18   228人阅读

Javascript的难点就是面向对象编程，上一篇介绍了Javascript的两种继承方式：Javascript 进阶 继承，这篇使用一个例子来展示js如何面向对象编程，以及如何基于类实现继承。

1、利用面向对象的写法，实现下面这个功能，实时更新数据的一个例子：



2、使用对上面类的继承，完成下面的效果：


好了，不多说，js的训练全靠敲，所以如果觉得面向对象不是很扎实，可以照着敲一个，如果觉得很扎实了，提供了效果图，可以自己写试试。

1、第一个效果图代码：

/**
 * Created with JetBrains WebStorm.
 * User: zhy
 * Date: 14-6-7
 * Time: 下午4:55
 * To change this template use File | Settings | File Templates.
 */
/**
 * @param id
 * @param value
 * @param parentEle 父元素
 * @constructor
 */
function PlaceFieldEditor(id, value, parentEle)
{
    this.id = id;
    this.value = http://www.mamicode.com/value;>
引入到页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src=http://www.mamicode.com/"jquery-1.8.3.js"></script>>嗯，代码就不详细说了，都比较简单，使用了jQuery，如果不喜欢可以使用原生js，本人比较喜欢把jQuery当作js的工具使用。

2、第二个效果图的js代码：
/**
 * Created with JetBrains WebStorm.
 * User: zhy
 * Date: 14-6-7
 * Time: 下午5:34
 * To change this template use File | Settings | File Templates.
 */
function PlaceAreaEditor(id, value, parentEle)
{
    PlaceAreaEditor.superClass.constructor.call(this, id, value, parentEle);
}

extend(PlaceAreaEditor, PlaceFieldEditor);

PlaceAreaEditor.prototype.initElements = function ()
{
    this.txtEle = $("<span/>");
    this.txtEle.text(this.value);

    this.textEle = $("<textarea style='width:315px;height:70px;' />");
    this.textEle.text(this.value);

    this.btnWapper = $("<div style='display: block;'/>");
    this.saveBtn = $("<input type='button' value=http://www.mamicode.com/'保存'/>");>
写了PlaceAreaEditor继承了PlaceFieldEditor，然后复写了initElements方法，改变了text为textarea。
extend的方法，上一篇博客已经介绍过：
/**
 * @param subClass  子类
 * @param superClass   父类
 */
function extend(subClass, superClass)
{
    var F = function ()
    {
    };
    F.prototype = superClass.prototype;
    //子类的prototype指向F的_proto_ ， _proto_又指向父类的prototype
    subClass.prototype = new F();
    //在子类上存储一个指向父类的prototype的属性，便于子类的构造方法中与父类的名称解耦 使用subClass.superClass.constructor.call代替superClass.call
    subClass.superClass = superClass.prototype;
}

最后页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src=http://www.mamicode.com/"jquery-1.8.3.js"></script>>


好了，结束~~ 上面的例子是根据孔浩老师的例子修改的，感谢孔浩老师，孔老师地址：www.konghao.org。孔老师录制了很多Java相关视频，有兴趣的可以去他网站学习！

代码或者讲解有任何问题，欢迎留言指出。


联系
我们