当前位置:  编程技术>WEB前端
本页文章导读:
    ▪javascript中的继承[四] 总结(《Object-Oriented JavaScript》第六章)      前面两章中提到的实现继承的方法,都是《Object-Oriented JavaScript》第六章提及的,书中最后也做了总结:In this chapter you learned quite a few ways (patterns) for implementing inheritance.The different types can roughl.........
    ▪mod Mod 可信赖的现代前端构建工具 安装与使用      Mod 是可信赖的现代前端构建工具, 旨在快速构建健壮且高性能的Web应用程序 是腾讯开源的一个前端构建工具,不错哦! 现在开始构建之旅吧 1. 安装 node.js  下载Node.js官方Windows版程.........
    ▪Json字符串与Json对象互转       1>jQuery插件支持的转换方式:     $.parseJSON( jsonstr );     //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox,chrome,opera,s.........

[1]javascript中的继承[四] 总结(《Object-Oriented JavaScript》第六章)
    来源:    发布时间: 2013-11-19

前面两章中提到的实现继承的方法,都是《Object-Oriented JavaScript》第六章提及的,书中最后也做了总结:

In this chapter you learned quite a few ways (patterns) for implementing inheritance.

The different types can roughly be divided into:

  • Patterns that work with constructors
  • Patterns that work with objects
  • You can also classify the patterns based on whether they:

  • Use the prototype
  • Copy properties
  • Do both (copy properties of the prototype)
  •      第六章介绍了一些继承的方法,分为两模式:

            基于构造函数生成对象的模式

            直接继承对象的模式

        也可以按照另一种思路分类:

            使用了原型prototype

            复制属性

            复制原型的属性

     

    可以说,这是实现继承的最核心的内容,实践中常常交错在一起。回顾下前文介绍的基本继承方式:

    //构造函数 使用原型链
    Coder.prototype = new Person("无名");

    //构造函数 共享原型链
    Coder.prototype = Person.prototype;

    //构造函数 使用原型链 只继承原型属性方法
    function extend(Child,Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    }

    //构造函数 使用原型链 复制原型属性
    function extend2(Child,Parent){
    var p = Parent.prototype;
    var c = Child.prototype;
    for(var i in p){
    c[i] = p[i];
    }
    }

    //继承对象 复制属性
    function extendCopy(p, c){
    var c = c || {};
    for(var i in p){
    c[i]=p[i];
    }
    return c;
    }

    //继承对象 深复制
    function deepCopy(){}

    //继承对象 使用原型链
    function object(o){
    function F(){};
    F.prototype = o;
    return new F();
    }

    //继承对象 使用原型链 复制属性
    function objectPlus(o, stuff){}

    //继承对象 复制属性
    function multi(){}

     

    遗留的一些事情

    1.之前的文章中出现以下代码

    function Person(name){
    this.name = name;
    }
    Person.prototype.sayHello = function(){
    alert(this.name);
    };

    function Coder(name,language){
       this.language = language;
    this.name = name;
    }

    Coder.prototype = new Person("无名");
    Coder.prototype.constructor = Coder;
    Coder.prototype.code = function(){
    alert("i am a "+this.language+" coder");
    };

    我们改造下这段代码,主要解决子类调用父类的构造函数中初始化代码,自行对比优缺点:

    function Person(name){
    this.name = name;
    }
    Person.prototype.sayHello = function(){
    alert(this.name);
    };

    function Coder(name,language){
    Person.apply(this,arguments);
       this.language = language;
    }

    extend2(Coder,Person);
    Coder.prototype.code = function(){
    alert("i am a "+this.language+" coder");
    };

    通过 Person.apply(this,arguments)调用父类的构造方法,extend2继承父类的原型方法,最后再扩展原型方法。

    如果扩展的原型方法很多,我想你一定有办法知道如果通过之前的基础方法,写出一个新的符合你自己要求的继承机制。

    我们完全可以写一个 extend3(Coder,Person,stuff)的方法~如果你有需要这么做的话。

    2.几个函数操作

    obj instanceof F // 判断对象obj是否是F的实例

    F.prototype.isPrototypeOf(obj)//作用同上

    obj.constructor // 返回obj的构造函数 

    obj.hasOwnProperty('属性名') // 判断obj是否有属于自己的属性,而不是他所指原型的属性

     

    这几个操作帮助理解原型链、继承过程,在实践中也有很重要的作用。

    3.关于 子“类”调用父"类"的方法、属性

    有三个类 Shape TwoDShape Triangle 形状、2D形状、三角形,他们继承关系。

    对象实例需要实现一种方法:toString() 不仅要输出自己的类名,还要输出祖辈的类名。

    如何实现呢?

    由于继承的实现方式挺多的,而且子“类”的这种需求千变万化,如何有效控制,文章(本人能力有限)一句话说不清楚,《o-o》中也只是穿插地说了一下。

    基本的一种思路是 在 Parent加一个静态属性uber指向Child.prototype

    function extend(Child,Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;

    Child.uber = Parent.prototype;}

    function Shape(){};
    Shape.ptototype.name = "shape";
    Shape.prototype.toString = function(){
    var result = [];
    if(this.constructor.uber){
    result[result.length] = this.constructor.uber.toString();
    }
    result[result.length] = this.name;
    return result.join(', ');
    };

    function TwoDShape(){};
    extend(TwoDShape,Shape);
    TwoDshape.prototype.name = "2dShape";

    function Triangle(side, height){
    this.side =
        
    [2]mod Mod 可信赖的现代前端构建工具 安装与使用
        来源: 互联网  发布时间: 2013-11-19

    Mod 是可信赖的现代前端构建工具, 旨在快速构建健壮且高性能的Web应用程序

    是腾讯开源的一个前端构建工具,不错哦!


    现在开始构建之旅吧


    1. 安装 node.js

     下载Node.js官方Windows版程序:
       http://nodejs.org/#download

    下来后点击安装即可

    2. 安装 npm 

      下载npm源码:

       https://github.com/isaacs/npm/tags

        最新版本在Windows平台下都有问题,如果你也遇到了,那么请下载这个版本:

       https://github.com/isaacs/npm/zipball/v1.0.104 

     最新的node.js 已经将npm加入,如果安装的是最新的node.js 那么第二步就可以越过了哈!

    3. 安装 modjs

     npm install modjs -g

    cmd 后,敲入mod,看到下面的界面,恭喜你,你已经安装成功!






    作者:frank0417 发表于2013-3-27 15:47:34 原文链接
    阅读:7 评论:0 查看评论

        
    [3]Json字符串与Json对象互转
        来源: 互联网  发布时间: 2013-11-19
    1>jQuery插件支持的转换方式:
        $.parseJSON( jsonstr );     //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

    2>浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:
        JSON.parse(jsonstr);        //可以将json字符串转换成json对象
        JSON.stringify(jsonobj);    //可以将json对象转换成json对符串
        注:ie8(兼容模式),ie7和ie6没有JSON对象,推荐采用JSON官方的方式,引入json.js。

    3>Javascript支持的转换方式:
        eval('(' + jsonstr + ')');     //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
        注:ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象,但不推荐这些方式,这种方式不安全eval会执行json串中的表达式。

    4>JSON官方的转换方式:
        http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;
    可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

    作者:bbirdsky 发表于2013-3-27 14:47:06 原文链接
    阅读:77 评论:0 查看评论

        
    最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不...
    ▪IE里button设置border:none属性无效解决方法
    ▪border:none与border:0使用区别
    ▪html清除浮动的6种方法示例
    ▪三个不常见的 HTML5 实用新特性简介
    ▪css代码优化的12个技巧
    ▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
    ▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ▪小技巧处理div内容溢出
    ▪html小技巧之td,div标签里内容不换行
    ▪纯CSS实现鼠标放上去改变文字内容
    ▪li中插入img图片间有空隙的解决方案
    ▪CSS3中Transition属性详解以及示例分享
    ▪父div高度不能自适应子div高度的解决方案
    ▪告别AJAX实现无刷新提交表单
    ▪从零学CSS系列之文本属性
    ▪HTML 标签
    ▪CSS3+Js实现响应式导航条
    ▪CSS3实例分享之多重背景的实现(Multiple background...
    ▪用css截取字符的几种方法详解(css排版隐藏溢...
    ▪页面遮罩层,并且阻止页面body滚动。bootstrap...
    ▪CSS可以做的几个令你叹为观止的实例分享
    ▪详细分析css float 属性以及position:absolute 的区...
    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
    ▪CSS小例子(只显示下划线的文本框,像文字一...
    ▪可以给img元素设置背景图
    ▪不通过JavaScript实现的自动滚动视差效果
    ▪div+CSS 兼容小摘
    ▪CSS的inherit与auto使用分析
     


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3