JavaScript
Q&A:
Q1:js判断对象的类型,typeof,constructor区别?
A1:javascript,判断对象的类型,typeof,constructor
用typeof操作符判断对象类型:(红色文字,是上面一句代码的执行结果)
用对象的构造函数属性(constructor),来判断对象的类型:
区别:
constructor判断对象的类型,会比typeof更精确,constructor能获取一些复杂对象的类型,typeof做不到。
下面有一段程序示例:
代码示例:
<script type="text/javascript" charset="utf-8"> var s='a string'; var arr=[]; var obj=new Object(); if(typeof s=='string'){ console.log( "typeof s=='string' true"); //true } //打开浏览器的控制台,可以看到此代码的输出 console.log( 's.constructor==String :'+ (s.constructor==String) ); console.log( 'arr.constructor==Array :'+ (arr.constructor==Array) ); console.log( 'obj.constructor==Object :'+ (obj.constructor==Object) ); //复杂类型的对象,判断其类型 function User(name , age){ this.name=name; this.age=age; } var u=new User(); console.log( 'typeof u :'+typeof u ); //输出object //显然,使用typeof判断复杂类型的对象,就失效了,但使用constructor就可以获取其真实类型 console.log( 'u.constructor.name :'+u.constructor.name ); </script>
链接:
JS alert()、confirm()、prompt()的区别
说说alert()的那些事儿-------javascript
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
几乎每个人学习javascript(以下简称JS)都是先接触到的这个 alert()的吧,但是,说实话,我们又对它了解多少呢? 其实通过这个alert();能看到的东西还真的不少。 1,JS阻塞。 2,浏览器显示页面的方式。 3,JS函数劫持。 4,函数回调、alert对话框模拟。 一、JS阻塞 问题: 之前做一个项目,点击一个链接,从页面a跳转到页面b,然后在页面b通过后台加载一些数据,并通过JS写到页面上。这时候呢,就有一个问题,页面老是跳转不过去,总是在页面a卡住,然后一直到b页面的JS执行完才跳转过去,并显示b页面。 解决方式: 这时候alert出场了,在页面b加一个alert,以上问题立马解决,可以看到页面很快的跳转。 为什么会这样? 因为alert之后,alert下面的代码会停止执行,并且浏览器会根据情况更新和渲染页面,这就牵扯到一个问题,JS的运行机制。JS是单线程的,也就是所谓的没有线程,所以前面的代码没有执行完,后面的就无法执行,要想执行后面的,就得让前面的先暂停。所以 alert后,你不点击确认,后面就无法操作, 不能用alert怎么解决? 要想不用alert解决就要了解一下浏览器的显示方式 二、浏览器显示页面的方式 加载代码和文件: 浏览器是按照从上到下的顺寻来解析显示页面的,首先是<head></head>然后是<body></body>一步一步来解析HTML的,在这个顺序的过程中,如果有JS或者CSS文件的调用,浏览器就会先根据路径把这些文件下载下来,并把这些代码"看"一遍,看完之后有可能执行一部分,也有可能接着往下解析HTML。然后等所有的一切DOM准备妥当,页面就该渲染CSS效果的渲染效果,该添加事件的添加事件。这就是一个整体的顺序。 执行: 浏览器遇到可执行的代码就会执行,无论是HTML还是CSS或者JS,所以说HTML里面,顺序很重要,如果浏览器遇到大量的JS要“看”,或者执行,那么页面下面的东西就不会执行,这不是因为JS阻塞,而是因为目前的大部分浏览器都是单线程的执行方式,所以alert一出现,JS没法往下执行了,浏览器也没法往下执行了,之前已经被浏览器解析过的部分就会显示出来,这也是我alert之后能看到页面立即跳转的原因(我当时JS都放在body后面), 新的解决方式: 知道了上面的原因,我们就可以去想办法解决问题,我的页面不能跳转的原因很明显是因为浏览器在加载数据,导致页面看上去无响应,没有跳转,因此,必须让浏览器页面完全加载完毕后,再去执行JS,这时候就要用到onload事件。然而,不同的浏览器对onload的解释也不统一,这时候查了些资料发现这么一段代码(感谢作者,虽然我不知道原作者是谁): function loadScript(url, callback){ var script = document.createElement ("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } 使用方法如下: loadScript("script1.js", function(){ loadScript("script2.js", function(){ loadScript("script3.js", function(){ alert("All files are loaded!"); }); }); }); 大家都能看明白,我就不多说了,但是这时候呢,IE8还是没法跳转过去,其他浏览器或许是高版本的原因都可以了,我就想了,能不能搞一个alert然后提示一下自动关闭,查了半天,发现完全不可以,效果是可以模拟出来,代码如下(网上有很多,这只是其中一个,这不是重点,重点是它不能达到阻塞效果,我这里只是拿来举例,这是JS加CSS版本的,): JS+CSS版本 *{ padding:0; margin:0; font-size:12px;} #bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=60); width:100%; height:100%;position:absolute; top:0; left:0} #info{height:0px; width:0px;top:50%; left:50%;position:absolute; line-height:1.7} #center{background:#fff;border:1px solid #217AC1; width:300px; height:100px; position:absolute; margin:-50px -150px;} #center strong{ display:block; padding:2px 5px; background:#EBF4FC; color:#519FEE;} #center p{padding:10px; text-align:center; color:#1C6FB8;} </style> </head> <body> <span id="boxs"></span> <script> function boxs(v){ window.scrollTo(0,0); var bo = document.getElementsByTagName('body')[0]; var ht = document.getElementsByTagName('html')[0]; var boht = document.getElementById('boxs'); boht.innerHTML = ''; bo.style.height='auto'; bo.style.overflow='auto'; ht.style.height='auto'; if(v == 1){ bo.style.height='100%'; bo.style.overflow='hidden'; ht.style.height='100%'; boht.innerHTML = '<div id="bg"></div><div id="info"><div id="center"><strong>信息提示:</strong><p><a href="javascript:boxs(0);">关了我吧!</a></p></div></div>'; } } boxs(1); </script> <a href="javascript:boxs(1);">点这里弹出</a> 模态窗口版本 window.showModalDialog('xxx.html'); 这个是模态窗口,能达到效果,但是很丑,几乎不可能运用到实际项目当中,于是另一个想法 三、JS函数劫持 举例如下: var _alert = alert; window.alert = function(s) { if (confirm("是否要弹窗,\"" + s + "\"?")) { _alert(s); } } 参见:浅谈javascript函数劫持 大概意思就是我们以前说的重写,覆盖啊,重构啊,什么的,通过这种方法能不能实现阻塞浏览器,然后再自动关闭呢,我试了几次,没成功,不知道有高手能解决不 四、模态窗口,函数回调 (未完待续...)
end