前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >悟透JavaScript

悟透JavaScript

作者头像
张子阳
发布2018-09-30 10:03:02
4040
发布2018-09-30 10:03:02
举报
文章被收录于专栏:分布式系统和大数据处理

悟透JavaScript

2015-4-22 张子阳 推荐: 3 难度: 3

这本书分为了三个部分,第一部分“JavaScript真经”主要讲解JavaScript的一些核心概念,主要是数据类型、函数、原型、对象。并通过在JavaScript模拟类和继承的概念,讲解了这些概念;第二部分“手谈JavaScript”主要讲解了DOM,并实现了一个围棋的范例;第三部分“点化AJax” 主要讲述了Ajax的实现,以及跨域进行Ajax调用,并结合Asp.Net实现了单点登录。

整体来看,书的第一部分价值最高,理清了很多概念,作者也是因为将第一部分发表博客后获得广泛好评才写了全书。书中反复用佛祖、菩提、真经之类来对写程序和代码进行类比,推测作者可能平时会关注这方面的内容,但作为读者来说,则感觉有些拖沓,不够清爽明快。

下面摘录了书中的一些要点。

JavaScript真经

甘露模型:这个模型主要是将JavaScript的类定义、继承,模拟成C#的语言的形势,看上去显得更加优雅一些。

代码语言:txt
复制
// 根类object定义
function object() { }

// 判断对象是否属于某类型
object.prototype.isA = function (aType) {
    var self = this.Type;
    while (self) {
        if (self == aType) return true;
        self = self.Base;
    }
    return false;
}

object.prototype.base = function () {
    var Base = this.Type.Base;

    if (!Base.Base) {   //已经是顶级了
        Base.apply(this, arguments);    // 直接调用基类构造函数
    } else {
        this.base = MakeBase(Base);     // 覆写this.base
        Base.apply(this, arguments);    // 调用基类构造函数
        delete this.base;               // 删除覆写的base属性
    }

    function MakeBase(Type) {
        var Base = Type.Base;
        if (!Base.Base) return Base;
        return function () {
            this.base = MakeBase(Base);
            Base.apply(this, arguments);
        }
    }
}

// 定义类
function Class(){
    var aDefine = arguments[arguments.length - 1];
    if(!aDefine) return;
    
    var aBase = arguments.length > 1?arguments[0]:object; // 解析基类
    
    function prototype_(){}     // 构造prototype的临时函数,用于挂接原型链
    
    prototype_.prototype = aBase.prototype;
    
    var aPrototype = new prototype_();
    
    // 复制类定义到当前类的prototype
    for(var member in aDefine){
        if(member != "Create"){ // 构造函数不用复制
            aPrototype[member] = aDefine[member];
        }
    }

    if (aDefine.toString != Object.prototype.toString)
        aPrototype.toString = aDefine.toString;
    if (aDefine.toLocaleString != Object.prototype.toLocaleString)
        aPrototype.toLocaleString = aDefine.toLocaleString;
    if (aDefine.valueOf != Object.prototype.valueOf)
        aPrototype.valueOf = aDefine.valueOf;

    // 如果有构造函数
    var aType;
    if (aDefine.Create) {
        aType = aDefine.Create;
    } else {
        aType = function () {
            this.base.apply(this, arguments);   // 调用基类构造函数
        };
    }

    aType.prototype = aPrototype;
    aType.Base = aBase;         // 设置类型关系,便于追溯
    aType.prototype.Type = aType;    // 为此类对象扩展一个Type属性
    
    return aType;
}

// 使用示例
var Person = Class({
    Create: function (name, age) {
        this.base();    // 调用上层构造函数
        this.name = name;
        this.age = age;
    },
    SayHello: function () {
        alert("Hello, I'm " + this.name + ", age " + this.age +".");
    },
    toString: function () {
        return this.name;
    }
});

var Employee = Class(Person, {
    Create: function (name, age, salary) {
        this.base(name, age);
        this.salary = salary;
    },
    ShowMeTheMoney: function () {
        alert(this + ", $" + this.salary);
    }
});

var BillGates = new Person("Bill Gates", 53);
var SteveJobs = new Employee("Steve Jobs", 59, 123);
alert(BillGates);
BillGates.SayHello();
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();

// 用BillGate的类型建littleBill
var littleBill = new BillGates.Type("Little Bill", 6);
littleBill.SayHello();

alert(BillGates.isA(Person));   // true
alert(BillGates.isA(Employee)); // false
alert(SteveJobs.isA(Person));  // true

手谈JavaScript

这部分通过一个围棋的范例讲述了DOM、播放音乐、事件等内容,有点儿偏讲代码,个人觉得意义不大,有一些经验的开发人员都能够实现。

感谢阅读,希望这篇文章能给你带来帮助!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-4-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 悟透JavaScript
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档