【Javascript】Prototype源码浅析—Number部分

Prototype在原生对象的基础上扩展,分别是 Object,Function,String,Number,Array,Date,前面分析了 Object,Function,String,还剩下Number,Array,Date。

Number部分方法比较少,一共有8个:

toColorPart: 将 Number 对象转换为具有两位数字的十六进制形式
succ:  返回当前 Number 对象的下一个值,即当前值加一         
times: 采用 Ruby 的风格来封装一个标准的 [0...n] 循环
toPaddedString:将当前 Number 对象转换为字符串,如果转换后的字符串长度小于 length 指定的值,则用 0 在左边补足其余的位数 
abs:   返回当前 Number 对象的绝对值。        
round: 返回当前 Number 对象四舍五入后的整数值。
ceil:  返回大于等于当前 Number 对象的最小整数值。
floor: 返回小于等于当前 Number 对象的最大整数值。

其中一个重要的方法是toPaddedString。Number对象重写了toString方法:

1
NumberObject.toString(radix)

radix 可选。规定表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值。

1
2
3
4
function toPaddedString(length,radix){
var string = this.toString(radix || 10);//先将数字转换成相应的进制
return '0'.times(length - string.length) + string;//times方法在String中扩展的,将一个字符重复n遍
}

有了这个方法,就有一个比较有用的延伸就是toColorPart,可用于CSS中的颜色转换:

1
2
3
function toColorPart() {
return this.toPaddedString(2, 16);
}

既然是CSS颜色转换,因此数字就要求在[0-255]范围内。

1
console.log((10).toColorPart());//0a

有一个和String中同名的方法succ,作用也差不多,String中是按照字符表来递加的,Number中是按照自然数的顺序来的。

1
2
3
4
function succ() {
return this + 1;
}
console.log((10).succ());//11

从这个方法出发,来一个简单的0-n的数组

1
2
3
4
5
6
7
8
function range(){
var ret = [0];
for(var i = 0; i < this - 1; i++){
ret.push(i.succ());
}
return ret;
}
console.log((10).range());//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

暂时用这个range函数来得到times函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    function times(iterator, context){
this.range().forEach(iterator, context);//源码中使用的是R()方法
return this;
}
var s = '';
(5).times(function(item){
s += item;
});
console.log(s);//01234
```

除去上面几个方法,其他的方法就是将Math的静态方法扩展到Number对象上【说法不准确,意会··=。=】

```javascript
function abs() {
return Math.abs(this);
}
function round() {
return Math.round(this);
}
function ceil() {
return Math.ceil(this);
}
function floor() {
return Math.floor(this);
}

【Javascript】改造alert的引发的争论

今天在群里讨论alert的问题,说到了alert的改造,虽然说改造原生方法不是好做法,但是既然提到了就可以讨论下,所以我按照他们的讨论给出了下面的一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
var _alert = window.alert;
window.alert = function(param,isDebug){
if(isDebug){
console.log(param);
}else{
_alert(param);
}
}
alert('x');
alert('x',true);
alert('x');
alert('x',true);

于是开始反驳我,大致的论点集中在下面的一段上面:

1
2
_alert = window.alert;
window.alert = function(){}

反方论点:这么写之后,_alert与window.alert应该还是一致的,因为大家都知道函数名称保存的只是引用而已。

当时被弄糊涂了,难道价值观被颠覆了?后来仔细想了一会儿,发现貌似被忽悠了。函数变量名保存的是引用没错,可是这个例子和引用的关系不是这么讲的吧···

要说明函数的引用关系,应该是这个例子:

1
2
3
4
var a = [1,2,3];
var b = a;
a.push(4);
console.log(a,b);//[1,2,3,4],[1,2,3,4]

后来回想一下,问题的最终原因还是值类型和引用类型被忽悠了,于是分析一下。先看下面的例子:

1
2
3
var a = 1;
var b = a;
console.log(a,b);

在这个例子中a,b完全只是一个名字而已,没有其他的作用。不论要不要,那个1都是真实存在的(假如可以无端产生一个变量1,那么1在被回收之前,无论有没有名字,都是存在的),此时的情况是:

1

继续上面的例子:

1
2
3
4
var a = 1;
var b = a;
a = 2;
console.log(a,b);

1

上面是Number类型的情况,下面换做一个引用类型的,比如Array。

1
2
3
var a = [1,2,3];
var b = a;
console.log(a,b);

1
继续:

1
2
3
4
var a = [1,2,3];
var b = a;
a.push(4);
console.log(a,b);

1

这就是引用传递,在整个过程中,变量名本身还是a,b没有变化,但是他们引用的东西发生了变化。

此时a与b之间没有半毛钱的关系,他们是通过[1,2,3,4]存在一丝形式上的相同性,而不是b与[1,2,3,4]通过a有联系,这一点才是引用传递要注意的。此时a===b为true。

下面换一个操作:

1
2
3
4
var a = [1,2,3];
var b = a;
a = [1,2,3];
console.log(a,b);

此时,虽然a,b各自保存的还是引用类型数据,但是a与b本来就半毛钱的关系都没有,所以此时a换个内容,与b的关系就完全没有了,连通过最初[1,2,3]获得的相同性都没有了,此时a===b为false。对应下面的图:

1

继续操作a:

1
2
3
4
5
var a = [1,2,3];
var b = a;
a = [1,2,3];
a.push(4);
console.log(a,b);

1

所以,“引用”引用的内存中的值,而非那个变量名。

回到开头的例子中:

1
2
3
4
5
6
7
8
var _alert = window.alert;
window.alert = function(param,isDebug){
if(isDebug){
console.log(param);
}else{
_alert(param);
}
}

在执行var _alert = window.alert;的时候,三者的关系是:

1

执行:

1
2
3
window.alert = function(param,isDebug){
//
}

1

所以最初讨论的时候,一开始就错了,因为_alert引用的不是window.alert,而是window.alert所引用的那个函数,不论是_alert还是window.alert,都只是一个名字而已,两者没有半毛钱的关系,最终的枢纽还是真实存在的内存中的那个变量。

然后另外一个问题就是关于才浏览器控制台测试代码的问题。

我们讨论的时候,先运行了一段测试代码:

1
2
3
var _alert = window.alert;
window.alert = function(){};
console.log(_alert === window.alert);

然后我们又在相同的控制台里面运行了我在开头给出的那一段代码,所以在同一个窗口里面,控制台的环境并没有刷新,测试代码的效果还在,所以alert已经混乱了。

要完全测试的话,最好还是每次都新开一个窗口测试。

错误之处请大牛指教~

【Javascript】Prototype源码浅析—String部分(三)之HTML字符串处理

HTML处理	stripTags    |  escapeHTML      |  unescapeHTML 	 
JSON处理	unfilterJSON |  isJSON          |  evalJSON     |  parseJSON
脚本处理	stripScripts |  extractScripts  |  evalScripts

现在,String部分转入具体的关联应用,分别对应 HTML字符串,JSON字符串和HTML中的脚本字符串。

【乱入一句,有关JSON的一点东西,可以看看http://www.cnblogs.com/TomXu/archive/2012/01/11/2311956.html

下面分别叙述:

一、HTML字符串

stripTags  :移除字符串中所有的 HTML 标签。
escapeHTML : 将 HTML 特殊字符转换为它们的等价实体。(&对应&amp; <对应&lt; >对应&gt; )
unescapeHTML :移除字符串中的标签,并将用实体表示的 HTML 特殊字符转换为它们的正常形式。(escapeHTML 的逆操作)

stripTags 中的一段正则

/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi

用来匹配标签中的内容,注意不能换行,不过换行的话就有语法错误了。

【这个方法唯一需要注意的位置是,stripTags会移除