JavaScript语言精粹 笔记03

继承
伪类
对象说明符
原型
函数化
部件

继承

JS不是基于类的,而是基于原型的,这意味着对象直接从其他对象继承。

1 伪类

JS提供了一套丰富的代码重用模式,它可以模拟那些基于类的模式,因为JS实际上没有类,所以把模拟的类称为伪类。
我们可以定义一个构造器并扩充它的原型:

var Mammal = function (name) {
    this.name = name;
};
Mammal.prototype.get_name = function ( ) {
    return this.name;
};
Mammal.prototype.says = function ( ) {
    return this.saying || ‘‘;
};

现在可以构造一个实例:

var myMammal = new Mammal(‘Herb the Mammal‘);
var name = myMammal.get_name( ); // ‘Herb the Mammal‘

可以构造另一个伪类来继承Mammal:

var Cat = function (name) {
    this.name = name;
    this.saying = ‘meow‘;
};
// 替换Cat.prototype 为一个新的 Mammal 实例
Cat.prototype = new Mammal( );
// 扩充新原型对象,添加purr和get_name方法
Cat.prototype.purr = function (n) {
    var i, s = ‘‘;
    for (i = 0; i < n; i += 1) {
        if (s) {
            s += ‘-‘;
        }
        s += ‘r‘;
    }
    return s;
};
Cat.prototype.get_name = function ( ) {
    return this.says( ) + ‘ ‘ + this.name +‘ ‘ + this.says( );
};
var myCat = new Cat(‘Henrietta‘);
var says = myCat.says( ); // ‘meow‘
var purr = myCat.purr(5); // ‘r-r-r-r-r‘
var name = myCat.get_name( ); // ‘meow Henrietta meow‘

2 对象说明符

有时候构造器要接受一大串的参数。这可能是令人烦恼的,因为要记住参数的顺序可能非常困难。例如:

var myObject = maker(f,l,s,c);

不如这么写:

var myObject = maker({
    first:f,
    last:l,
    state:s,
    city:c
});

现在多个参数可以按任何顺序排列,如果构造器会聪明地使用默认值,一些参数可以忽略掉,并且代码也更容易阅读。

3 原型

在一个纯粹的原型模式中,我们会摒弃类,转而专注于对象。基于原型的继承相比基于类的继承在概念上更为简单:一个新对象可以继承一个旧对象的属性。可以构造一个有用对象,接着构造更多和那个对象相似的对象。

用对象字面量构建一个有用的对象:

var myMammal = {
    name : ‘Herb the Mammal‘,
    get_name : function ( ) {
        return this.name;
    },
    says : function ( ) {
        return this.saying || ‘‘;
    }
};

为Object增加一个create方法,用来创建新的实例

if (typeof Object.create !== ‘function‘) {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

定制一个新实例:

var myCat = Object.create(myMammal);
myCat.name = ‘Henrietta‘;
myCat.saying = ‘meow‘;
myCat.purr = function (n) {
    var i, s = ‘‘;
    for (i = 0; i < n; i += 1) {
        if (s) {
            s += ‘-‘;
        }
        s += ‘r‘;
    }
    return s;
};
myCat.get_name = function ( ) {
    return this.says( ) + ‘ ‘ + this.name + ‘ ‘ + this.says( );
};

这是一种“差异化继承”。通过定制一个新的对象,我们指明了它与所基于的基本对象的区别。

4 函数化

函数化模式有很大的灵活性,能够更好的封装和隐藏信息。

构造一个产生对象的函数,给它起的名字以一个小写字母开头,因为它并不需要使用new前缀。该函数包括4个步骤:

  • 1.它创建一个新对象。有很多的方法去构造一个对象。它可以构造一个对象字面量,或者它可以和new 前缀连用去调用一个构造函数,或者它可以使用Object.beget方法去构造一个已经存在的对象的新实例,或者它可以调用任意一个返回一个对象的函数。
  • 2.它选择性的定义私有实例变量和方法。这些就是函数中通过var语句定义的普通变量。
  • 3.它给这个新对象扩充方法。这些方法荣有特权去访问参数,以及第二步中通过var语句定义的变量。
  • 4.它返回一个新对象。

如下是一个函数化构造器的伪代码:

var constructor = function (spec, my) {
    var that, 其他私有实例变量;
    my = my || {};
  把共享的变量和函数添加到my中
    that = 一个新对象
  添加给that的特权方法
    return that;
};

5 部件

可以从一套部件中组合出对象来。例如:构造一个能够添加简单事件处理特性到任何对象上的函数。它会给对象添加一个on方法、一个fire方法和一个私有的事件注册表对象:

var eventuality = function (that) {
    var registry = {};

    that.fire = function (event) {

// 在一个对象上触发一个事件。该事件可以是一个包含事件名称的字符串,或者是一个拥有包含事件名称的type属性的对象。//通过‘on’方法注册的事件处理程序中匹配事件名称的函数将被调用。

        var array,
            func,
            handler,
            i,
            type = typeof event === ‘string‘ ? event : event.type;

// 如果这个事件存在一组事件处理程序,那么就遍历它们并按顺序依次执行。

        if (registry.hasOwnProperty(type)) {
            array = registry[type];
            for (i = 0; i < array.length; i += 1) {
                handler = array[i];

//每个处理程序包含一个方法和一组可选参数。//如果该方法是一个字符串形式的名字,那么就寻找到该函数。

                func = handler.method;
                if (typeof func === ‘string‘) {
                    func = this[func];
                }

// 调用一个处理程序,如果该条目包含参数,那么传递它们过去。否则,传递该事件对象。

                func.apply(this,handler.parameters || [event]);
            }
        }
        return this;
    };

    that.on = function (type, method, parameters) {

// 注册一个事件,构造一条处理程序条目,将它插入到处理程序数组中。// 如果这种类型的事件还不存在,就构建一个。
        var handler = {
            method: method,
            parameters: parameters
        };
        if (registry.hasOwnProperty(type)) {
            registry[type].push(handler);
        } else {
            registry[type] = [handler];
        }
        return this;
    };
    return that;
};
   

我们可以在任何单独对象上调用eventuality,授予它事件处理方法。我们也可以赶在that被返回前在一个构造器函数中调用它。

eventuality(that);

用这种方式,一个构造器函数可以从一套部件中组装出对象来。

参考:《JavaScript语言精粹》Douglas Crockford著    赵泽欣 鄢学鹍 译

转载请注明出处:

作者:JesseLZJ
出处:http://jesselzj.cnblogs.com

时间: 09-06

JavaScript语言精粹 笔记03的相关文章

javascript语言精粹----笔记【转载】

javascript语言精粹----笔记 1.6种值会为假(==false),分别是false,null,undefined,' ',0,NaN 2.typeof有6种值,分别是'number','string','boolean','undefined','function','object';其中typeof(null),结果是'object' 3.number类型总是64位浮点数,两个整数相除也可能出现非整数结果 4.如果第一个运算数的值为假,那么运算符&&产生它的第一个运算数的值.

JavaScript语言精粹笔记

JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取其精华去其糟粕.当你知道要做什么的时候,它还能表现的更好,编程时一件相对困难的事情,绝不应该在懵懂的状态下开始编程之旅. JS中的注意为//或者/*content*/,注释一定要精确地描述代码,不然没有用的注释比没有注释更糟糕. JS中的代码块不会创建新的作用域,因此变量应该被定义在函数的头部,而不

javascript 语言精粹 笔记推荐。。

http://www.cnblogs.com/Cohlint/archive/2012/11/26/2788790.html 这篇javascript 语言精粹 学习笔记不错..不过看上去就是读书笔记,没有深入研究某个点..比如闭包..我还是不懂噢.. 比如17条:“add_the_handles 函数目的是给每个时间处理器一个唯一值(i).它未能达到目的是因为事件处理器函数绑定了变量i,而不是函数在构造时的变量i的值.” 这是原书的翻译过来的理解,但是感觉还是很艰涩,不太理解. 闭包这个变量作

JavaScript语言精粹 笔记01

内容比较简单,只是从头梳理一下JS的知识 语法空白标识符数字字符串语句 对象对象字面量检索更新引用原型反射枚举删除减少全局变量污染  语法 1 空白 空白可能表现为格式化字符或注释的形式.空白通常没有意义,但是偶尔必须用它来分割字符序列,否则它们就会被合并成一个单一的符号.例如: var that = this; var 和that之间的空格是不能去掉的,其他的空格都可以被移除. JS提供两种注释: /* */ // 建议使用//,因为/* */中要注释的内容可能包括字符 */ 而报错,例如:

JavaScript语言精粹 笔记02

函数函数对象函数字面量调用参数返回异常给类型增加方法递归作用域闭包回调模块级联套用记忆   函数 1 函数对象 在JS中函数就是对象.对象是“名/值”对的集合并拥有一个连接到原型对象的隐藏连接.对象字面量产生的对象连接到Object.prototype.函数对象连接到Function.prototype(该原型本身连接到Object.prototype).每个函数在创建时附有两个附加的隐藏属性:函数上下文和实现函数行为的代码. 因为函数是对象,所以它可以像任何其他的值一样被使用.函数可以存放在变

JavaScript语言精粹 笔记06 方法

JS包含了少量可用在标准类型上的标准方法. ArrayFunctionNumberObjectRegExpString Array array.concat(item...) concat方法返回一个新数组,它包含array的浅复制并将1个或多个参数item附加在其后.如果参数item是一个数组,那么他的每个元素会被本别添加. var a = ['a', 'b', 'c']; var b = ['x', 'y', 'z']; var c = a.concat(b, true); // c 是 [

JavaScript语言精粹 笔记05 正则表达式

正则表达式 正则表达式以方法的形式被用于对字符串中的信息进行查找.替换画图提取操作.可处理正则表达式的方法有:regexp.exec, regexp.test,string.match, string.replace, string.search, 和string.split. 结构 有两个方法来创建一个RegExp对象.优先方法是使用正则表达式字面量.正则表达式被包围在一对斜杠中.有3个标志能在RegExp中设置,分别为g.i.m. // 构造一个匹配JavaScript字符串的正则表达式对象

JavaScript语言精粹 笔记04 数组

数组1 数组字面量2 长度3 删除4 列举5 混淆的地方6 方法7 维度 数组1 数组字面量 var empty = []; var numbers = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; empty[1] // undefined numbers[1] // 'one' empty.length // 0 numbers.length // 10 数组字面量可以出

JavaScript语言精粹读书笔记- JavaScript对象

JavaScript 对象 除了数字.字符串.布尔值.null.undefined(都不可变)这5种简单类型,其他都是对象. JavaScript中的对象是可变的键控集合(keyed collections). 对象是属性的容器,其中每个属性都拥有名字和值. JavaScript中的对象是无类别的(class-free)的.它对新属性的名字和值没有约束. JavaScript包括一个原型链特性,允许对象继承另一对象的属性. 对象的检索: stooge[“first-name”]或者stooge.