Javascript学习者看懂的几个例子

02月 20, 2008 on 11:05 pm | In js |

1.关于prototype:这里prototype是javascript的一个特性，不是那个有名的prototype框架:

  1. <script type="text/javascript">
  2. var string="hello world";
  3. try{
  4.   alert(string.phone());
  5. }catch(e){alert(e);}
  6. String.prototype.phone=function()
  7. {
  8.   return "159-10957151";
  9. }
  10.  
  11. alert(string.phone());
  12. </script>

2.关于变量作用域,和IE,firefox对js的不同处理，这里有几个例子，有几个是原来从别处看到的记的笔记，有的是我自己挖掘出来的.
2.1

  1. <script type="text/javascript">
  2.   var deep_thought = {
  3.    the_answer: 42,
  4.    ask_question: function () {
  5.     return this.the_answer;
  6.    }
  7.   };
  8.  
  9.   var the_meaning = deep_thought.ask_question();
  10.   alert(the_meaning);
  11. </script>

2.2

  1. <script type="text/javascript">
  2.   function test_this() {
  3.    return this;
  4.   }
  5.   var i_wonder_what_this_is = test_this();
  6.   alert(i_wonder_what_this_is);
  7.   // result: [object window];
  8. </script>

2.3:

  1. <script type="text/javascript">
  2.   function click_handler() {
  3.    alert(this); // 弹出 window 对象
  4.   }
  5. </script>
  6.  ...
  7. <button id='thebutton' onclick='click_handler()'>Click me!</button>

2.4

  1. <script type="text/javascript">
  2.   function click_handler(obj) {
  3.    alert(obj);
  4.    //result:[object HTMLButtonElement]
  5.   }
  6. </script>
  7.  ...
  8. <button id='thebutton' onclick='click_handler(this)'>Click me!</button>

2.5

  1. <button id='thebutton' onclick='click_handler(this)'>Click me!</button>
  2. <script type="text/javascript">
  3.  function BigComputer(answer) {
  4.   this.the_answer = answer;
  5.   this.ask_question = function () {
  6.    alert(this.the_answer);
  7.   }
  8.  }
  9.  
  10.  function addhandler() {
  11.   var deep_thought = new BigComputer(42),
  12.    the_button = document.getElementById('thebutton');
  13.    the_button.onclick = deep_thought.ask_question;
  14.  }
  15.  
  16.  window.onload = addhandler;
  17.  
  18.  //result [undefined]
  19. </script>
  20.  ...

2.6

  1. <button id='thebutton' onclick='click_handler(this)'>Click me!</button>
  2. <script type="text/javascript">
  3.  function BigComputer(answer) {
  4.   var self=this;
  5.   self.the_answer = answer;
  6.   self.ask_question = function () {
  7.    alert(self.the_answer);
  8.   }
  9.  }
  10.  
  11.  function addhandler() {
  12.   var deep_thought = new BigComputer(42),
  13.    the_button = document.getElementById('thebutton');
  14.    the_button.onclick = deep_thought.ask_question;
  15.  }
  16.  window.onload = addhandler;
  17.  //result [42]
  18. </script>
  19.  ...

2.7

  1. <button id='thebutton' onclick='click_handler(this)'>Click me!</button>
  2. <script type="text/javascript">
  3. function btn_click(){
  4.   alert(this);
  5. }
  6.  
  7.  function addhandler() {
  8.    the_button = document.getElementById('thebutton');
  9.    the_button.onclick = btn_click;
  10.  }
  11.  
  12.  window.onload = addhandler;
  13.  
  14.  //result [undefined]
  15. </script>
  16.  ...

2.8

  1. <button id='thebutton' onclick='click_handler(this)'>Click me!</button>
  2. <script type="text/javascript">
  3. function real_func()
  4. {
  5.   alert(this);
  6. }
  7. function btn_click(){
  8.   setTimeout(real_func,100);
  9. }
  10.  
  11.  function addhandler() {
  12.    the_button = document.getElementById('thebutton');
  13.    the_button.onclick = btn_click;
  14.  }
  15.  
  16.  window.onload = addhandler;
  17.  
  18.  //result [undefined]
  19. </script>
  20.  ...

2.9

  1. <button id='thebutton' onclick='click_handler(this)'>Click me!</button>
  2. <script type="text/javascript">
  3.  Function.prototype.bind = function(obj) {
  4.   var method = this,
  5.    temp = function() {
  6.     return method.apply(obj, arguments);
  7.    };
  8.  
  9.   return temp;
  10.  }
  11. var  real_func=function()
  12. {
  13.   alert(this);
  14. }
  15. function btn_click(){
  16.   setTimeout( real_func.bind(this),100);
  17. }
  18.  function addhandler() {
  19.    the_button = document.getElementById('thebutton');
  20.    the_button.onclick = btn_click;
  21.  }
  22.  window.onload = addhandler;
  23.  //result [undefined]
  24. </script>
  25.  ...

2.10

  1. <script>
  2.   //** variables need to be defined
  3.   alert(document);          // [object HTMLdocument]
  4.   alert(window.document);   // [object HTMLdocument]
  5.  
  6.  
  7.   alert(window.face);      //pretty
  8.   var face="pretty";
  9.   alert(face);             //pretty
  10.   alert(window.face);      //pretty
  11.   alert(window.sock);      //undefined
  12.   alert(sock);              // ERROR: sock not defined
  13.  
  14. </script>

2.11

  1. <script type="text/javascript">
  2. function method()
  3. {
  4.   var window={};
  5.   alert(window.location);
  6. }
  7.   alert(window.location);
  8.   method();
  9.   alert(window.location);
  10. </script>

2.12

  1. <script type="text/javascript">
  2.    var window={};//ERROR:非法赋值!
  3.    // this works in IE,but throw an Exception in firefox
  4.    alert(window.location);
  5. </script>

2.13

  1. <script type="text/javascript">
  2.   /** 这是一段很让人恼火的代码
  3.   可以禁用alert
  4.   */
  5.   window.alert("hello world");
  6.   window.alert=function(str){
  7.       document.write(str);
  8.   };
  9.   alert("hello world");
  10.   window.alert("hello world");
  11. </script>

2.14:

  1. 注意这三个html文件的结果有什么不同.
  2. a.html:
  3. <script type="text/javascript">
  4. alert(sock);
  5. function sock()
  6. {
  7.   alert("function sock executed!");
  8. }
  9. alert(sock);
  10. </script>
  11. b.html:
  12. <script type="text/javascript">
  13. alert(sock);
  14. var sock=function()
  15. {
  16.   alert("function sock executed!");
  17. }
  18. alert(sock);
  19. </script>
  20. c.html:
  21. <script type="text/javascript">
  22. // 这里并不弹出"undefined"
  23. // 有点偏心啊!
  24. alert(sock);
  25. </script>

2.15
看看IE,firefox下分别运行有何不同:

  1. <script type="text/javascript">
  2. Object.prototype.hello=function(){
  3.   alert("hello");
  4. }
  5. window.hello();
  6. </script>

1条评论 »

评论 RSS Feed。 TrackBack URI

  1. 测试你的这些案例，对我很有用，但是可惜的是你2.7至2.10得到的结果和我测试的结果不同。

    评论 由 Lunatic Sun — 02月 21, 2008 #

发表评论

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress with Pool theme design by Borja Fernandez.
Entries and comments feeds. Valid XHTML and CSS. ^Top^