今天做了群友发的一个链接, 关于js 的一些题目的. 这样的题目常常有很多陷阱在里面,等着别人去踩. 很不幸,洒家踩了, 还蛮悲剧.
http://perfectionkills.com/javascript-quiz/
下面是我关于这些题目的,一些关于自己的理解. 如果有什么不同的意见或者见解,欢迎拍砖.
(function(){
return typeof arguments;
})();
这个题目比较简单, 只要大家不觉得 arguments 是 array ,就可以了.
返回是 object.
var f = function g(){ return 23; };
typeof g();
翻翻 aiming 的书,会发现里面对function 的解释, 以及几种创建方式有比较完全的描叙的, 这个陷阱,在下面的多个题目中有出现. 小心.
返回是 undefined.
(function(x){
delete x;
return x;
})(1);
Javascript 的delete, 删除的不是引入或者指向的对象. 而是对象本身.
/*
资料
delete 运算符
从对象中删除一个属性，或从数组中删除一个元素。
delete expression
expression 参数是一个有效的 JScript 表达式，通常是一个属性名或数组元素
所以,这里的形参的改变, 与他是没关系的.
*/
关于delete的具体解析，有园友给出了那个题目部分原本的解释，粗心了没去看，呵呵
http://perfectionkills.com/understanding-delete/
返回 1.
var y = 1, x = y = typeof x;
x;
这个部分有个小陷阱. 呵呵.
x= undefined , 大家知道. 然后 typeof x, 实际上也就是 typeof "undefined". 呵呵
返回的,当然是 string 了.
(function f(f){
return typeof f();
})(function(){ return 1; });
恩, 陷阱又来拉.哈哈. 此f 是什么呢? 于形参是没关系的，而且,你也取不到的.
所以, 形参没任何改变.
所以, 返回 number .
var foo = {
bar: function() { return this.baz; },
baz: 1
};
(function(){
return typeof arguments[0]();
})(foo.bar);
这个地方. 主要是考虑的 this的上下文. 传入的是 foo.bar,而非他的父级.
所以, 返回 undefined .
var foo = {
bar: function(){ return this.baz; },
baz: 1
}
typeof (f = foo.bar)();
有了上面那个题目, 这个题目也就可以理解了.
所以, 返回 undefined .
var f = (function f(){ return "1"; }, function g(){ return 2; })();
typeof f;
这里, 考究的是 () 的返回. () 是返回最后一个.
返回 Number.
var x = 1;
if (function f(){}) {
x += typeof f;
}
x;
if 里的东西,是肯定可以执行的.因为他是一个实际的存在(object). 非null|underfined的对象,在if下都是可以继续的 . 但是, 和上面的都是一样的原理, f ,却是不存在的.
所以 返回 1undefined.
var x = [typeof x, typeof y][1];
typeof typeof x;
这里 ,typeof y ,undefined. 然后, typeof typeof undefined => vtypeof "undefined"
返回 "string".
(function(foo){
return typeof foo.bar;
})({ foo: { bar: 1 } });
呵呵, 这里是个小陷阱, 如果看得太快了容易进去的哦.
简单的描叙下, var fo = {foo:{bar:1}}; function(foo){})(fo);
return typeof foo.bar ==> return typeof fo.bar
所以返回 "undefined".
(function f(){
function f(){ return 1; }
return f();
function f(){ return 2; }
})();
这个题目, 是关于编译器对function的解析了. 于return 没关系. 当他把return 只看成一个string的时候, 编译器已经解析过了所有的function . 与var f = function(){} 这样的是不同的.
所以, 会返回 2.
function f(){ return f; }
new f() instanceof f;
这个地方理解不够, 瓶子给出的解释貌似看得过去
new f() 得到的是f 的本身, 而不是一个new的对象, 因此,不是f 的实例.
所以, 返回 false.
with (function(x, undefined){}) length;
关于 with 这块, 如果我把 with也看成一个function(和想像alert一样).
那这个length, 就是with的形参长度了.
返回 2.
好了. 看来很多关于js的问题, 其实还是需要梳理下的. aiming 大大的书,关于这部分的讲解很给力. 可以让人绕过一些陷阱和问题.剩下的就是一些自己的测试了.
这些题目并不能够完全的反映出一个人的js能力, 但是至少能够让人知道编译器是怎么样去处理js的
解释得不正确的地方, 欢迎拍砖, 洒家会根据情况修复的
:-)
因为一些业务要求,有这样的需求:
a. 需要通过一个函数a new 另一个函数b.
b. new 后的新函数,是放在一个对象c里.
c. 有关b 的所有操作,都必须通过对象c 才可以.
这样的需求,是为了保证我所操作的对象,都能够在能够掌握的范围内,并且不会脱离一些控制.
其实做到 c 那一步的时候, 基本上大家就能够想到, 我们会用 caller . 但是, caller 怎么样获得他具体的对象? 因为他是放在 c 里面了的.
经过尝试, 我给出了这样的一种折中方式
a 是构造器
a 必须通过 c 才能够被创建
a 被创建后的对象是放在 list 中的.
只能够通过调用 list 的子集,才能够调用a 被创建的对象, 否则不可以 .
代码
var list = {};
function c(name){
var s0 = new a(name);
s0 && (list[name] = s0);
}
function a(name){
if(a.caller != c){
return {
f:false,g:false
}
}
this.name = name;
}
a.prototype = {
f : function(){
var p = this;
p.g();
},
g : function(){
var p = this;
if(list[p.name].g.caller != list[p.name].f){
alert("no");
return;
}
alert("yes");
}
}
c("hehe");
list["hehe"].g();
list["hehe"].f();
var b = new a("yes");
for(var i in b){
alert(b[i]);
}
var list = {};
function c(name){
var s0 = new a(name);
s0 && (list[name] = s0);
}
function a(name){
if(a.caller != c){
return {
f:false,g:false
}
}
this.name = name;
}
a.prototype = {
f : function(){
var p = this;
p.g();
},
g : function(){
var p = this;
if(list[p.name].g.caller != list[p.name].f){
alert("no");
return;
}
alert("yes");
}
}
c("hehe");
list["hehe"].g();
list["hehe"].f();
var b = new a("yes");
for(var i in b){
alert(b[i]);
}
我这里, 为了保证私自创建的 a 对象是不被许可的, 所以一开始,就更改了 a 里的子类. 由于a是一开始就是做为原形的存在, 所以修改他的子类后, 他的属性就不存在了.
这样, 我们做了一个简单的, 模拟私有的尝试. 呵呵.
前阵子写代码的时候,遇到前面人留下的jquery . 一直不会jquery, 硬着头皮,上了. 发现里面有一个很有意思的 函数 live
jquery的 live 这一函数让我初始觉得很神奇.
比如
<div id="c">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
我用 jquery 的live ,绑定了 c 下的 li , 给了每个 li 一个onclick.
这样. 就算我 增加一个 li ,新的li 也拥有 onclick 这个属性的. 多么美好的 函数, 他居然可以无视 dom 是否改变,仍然给他的子级绑定函数. 这样一来, 在很多开发上, 将不需要老是对一些对象进行重复的判断,绑定, 无疑将会大大的增加其效率. 那么,他是怎么去实现这个的? (不好意思,我还是没去看jquery的源码, 因为感觉自己的研究,会更深刻),我那几天一直 去想着追究 怎么去判断 dom 是否已经被改变. 恩, 也许他是判断 dom 已经改变, 然后才重新给dom 下的子级重新绑定. 尽管如此, 如果能够达到相应的功能,那样也不错了.
为此还找到了一些 DOMAttrModified
DOMNodeInserted
DOMNodeRemoved 这样的方式 判断 dom 是否改变.
但是, jquery 的live 有一个重要的特点. 也是这个方式最大的缺陷, 那就是, 判断是否改变,本来就是一个过程. 也就是, 他需要先判断一次 dom 是否已经改变, 然后才决定是否重新绑定方法或者事件. 而 jquery 的live 显然没有这个缺陷 . 就算是用源生的 js 直接把 dom 的子级给删除了, 然后再绑定. 也仍然是可行的. 仍然是具备的. 也就是说, 从一开始,我去判断dom是否改变然后再判断 是否给重新绑定事件这一条路,本身, 就走岔了.
既然那样的话,其实,我还可以直接绑定父对象,然后根据 srcElement || target 来断父对象的子对象, 完成这个判定的
代码如下
给父级本身绑定
1 <!doctype html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <div id="c" style="width:100px;height;20px;margin:10px 20px;border:1px red solid;">
8 <li>1</li>
9 <li>2</li>
10 </div>
11 <script type="text/javascript">
12 var d = document,c = d.getElementById("c");
13 c.onclick = function(event){
14 var evt = event || window.event, es = evt.target || evt.srcElement;
15 if(/li/gi.test(es.nodeName)){
16 alert("yes");
17 }
18 }
19 setTimeout(function(){
20 c.innerHTML = "";
21 setTimeout(function(){
22 d.getElementById("c").innerHTML = "<li>1</li><li>2</li>lor: #000000;">";
23
24 },2000);
25 },2000);
26 </script>
27 </body>
28 </html>
29
这样看来 完全是可以实现了吧. 就算修改他的子级操作, 这样也是可行的了. 不管怎么样, 这样是可以实现的.
可是 javascript设计模式2 群里 的 番茄 , 还不死心, 他说,如果删除了 父级, 然后在重新建立一个和原来一样的父级和子级 , 那我刚刚的想法, 就失去功能拉. 而live 却是可以实现的.
真的是这样的吗?
然后我想到了用直接绑定, 给 c (依然是上面的例子) 直接绑定, 我做了下面的实现
直接绑定测试
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="c" style="width:100px;height;20px;margin:10px 20px;border:1px red solid;">a</div>
<script type="text/javascript">
var d = document,c = d.getElementById("c");
c.onclick = function(){
alert("yes");
}
setTimeout(function(){
d.body.removeChild(c);
setTimeout(function(){
var c = d.createElement("div");
c.id = "c",c.style.cssText = "width:100px;height;20px;margin:10px 20px;border:1px red solid;",
c.innerHTML = "a",
d.body.appendChild(c);
},2000);
},2000);
</script>
</body>
</html>
很显然, 他失败了. 再次点击的时候, 他已经失去了那个功能,那怕是使用 attachEvent 和 addEventListener .也无济于事的.
很显然, 这样的处理也是不厚道的. 那么,既然是这样的话,我能否给绑定到这个 对象的 父级 上去. 或者说是 总的父 级上去. document . 我来根据 document 来判断这个,这样总可以了吧, 就象上面根据 父级来判断子级一样的
我给出了下面的测试方式
绑定document
1 <!doctype html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <div id="c" style="width:100px;height;20px;margin:10px 20px;border:1px red solid;">a</div>
8 <script type="text/javascript">
9 var d = document,addEventHandler = [,].length == 2 ? function(element,evtName, callback){
10 element.attachEvent('on' + evtName, callback) ;
11 } : function(element,evtName, callback,useCapture){
12 element.addEventListener(evtName, callback,useCapture);
13 }
14 addEventHandler(document,"click",function(event){
15 var evt = event || window.event,c = evt.target || evt.srcElement;
16 if(c.id == "c"){
17 alert("yes");
18 }
19 },false);
20 setTimeout(function(){
21 d.body.removeChild(document.getElementById("c"));
22 setTimeout(function(){
23 var div = d.createElement("div");
24 div.id = "c";
25 div.style.cssText = "width:100px;height;20px;margin:10px 20px;border:1px red solid;"
26 div.innerHTML = "a";
27 d.body.appendChild(div);
28 },2000);
29 },3000);
30 </script>
31 </body>
32 </html>
33
最近做项目,用到了一个要求,要求修复以前jquery 的一个Tip的兼容问题(真想不到,jquery 也会遇到这个问题啊). 结果自己写了一个
代码
<!DOCTYPE>
<html xmlns="http:www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN" >
<head>
<title>Tip </title>
<style type="text/css">
html,body{margin:0;padding:0;border:0;}
</style>
</head>
<body>
<a href='javascript:Tip("yes");'>yes</a>
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
<script type="text/javascript">
var TipIE = [,].length == 2,showTip = (function(){
function itemDelay(o,b,e,callback){
var st = +new Date(),p,speed = 350,it = setInterval(function(){
p = (+new Date() - st)/speed;
if(p >= 1) o.style["top"] = e+"px",callback && callback(),clearInterval(it);
o.style["top"] = b + (e - b)*((-Math.cos(Math.PI*p)/2)+0.5)+"px";
},10);
}
return function(){
var d = document,db = d.body,
dd = d.documentElement,o = d.getElementById("tips"),
m = Math,scrH = TipIE ? m.max(dd.scrollTop,db.scrollTop) : 0;
if(!o) return;
o.rTime ound-color: #f5f5f5; color: #000000;">&& clearTimeout(o.rTime);
itemDelay(o,-62,scrH,function(){
o.cTime ound-color: #f5f5f5; color: #000000;">= setInterval(function(){
scrH = TipIE ? m.max(dd.scrollTop,db.scrollTop) : 0,
o.style.top = scrH +"px";
},10),
o.rTime = setTimeout(function(){
clearInterval(o.cTime),
scrH = TipIE ? m.max(dd.scrollTop,db.scrollTop) : 0,
itemDelay(o,scrH,-63,function(){
clearTimeout(o.rTime);
},450)
},3000);
},450);
}
})(),createTip = function(){
var d = document,db = d.body,dd = d.documentElement,o = d.createElement("div");
o.id = "tips",o.innerHTML = "<div></div><div></div>";
var os0 = o.children[0].style,os1 = o.children[1].style;
o.style.cssText = "height:60px;\
width:100%;\
z-index:1020;\
left:0;\
top:-62px;\
overflow:hidden;\
border-bottom:2px red solid;"+(TipIE?"position:absolute;":"position:fixed;");
os0.cssText = "position:absolute;\
left:0;\
top:0;\
z-index:1;\
overflow:hidden;\
width:100%;\
height:60px;\
background:#fff;\
filter:alpha(opacity=70);\
opacity:0.7;",
os1.cssText = "position:absolute;\
left:0;\
top:0;\
z-index:2;\
padding:20px 0 0;\
overflow:hidden;\
width:100%;\
height:40px;\
text-align:center;";
db.appendChild(o);
return o;
}
,Tip = function(){
var arg = arguments,d = document,db = d.body,
dd = d.documentElement,o = d.getElementById("tips");
if(arg.length < 1) return;
if(!o) o = createTip();
o.rtime && clearTimeout(o.rtime);
showTip(),o.children[1].innerHTML = '<p><img src="html/img/loader.gif" alt="Loading..." '+([,].length!=2?'style="margin:-13px 0 0 0;align:middle;"':'')+' align="middle" /> <span>'+arg[0]+'</span></p></div>';
}
Tip("ni hao");
</script>
</body>
</html>