Javascript中的this绑定介绍,javascript变量功用域在分裂浏览器的拍卖

永利皇宫402

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

而this的具体值则取决于其调用模式。
* 方法调用模式:this被绑定到该对象。
* 函数调用模式:this被绑定到全局对象,网页的情况下绑定到window
* 构造器调用模式:this被绑定到新生成的对象。
* 事件处理调用模式分两种情况:参照
* this被绑定到全局对象

<script type=”text/javascript”>
var string=”hello world”;
try{
  alert(string.phone());
}catch(e){alert(e);}
String.prototype.phone=function()
{
  return “159-10957151”;
}
 
alert(string.phone());
</script>

复制代码 代码如下:

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

<script type=”text/javascript”>
function click_handler() {
alert(this); // alerts the window object
}
</script>

<button id=’thebutton’ onclick=’click_handler()’>Click
me!</button>

2.1

* this被绑定到DOM对象

<script type=”text/javascript”>
  var deep_thought = {
   the_answer: 42,
   ask_question: function () {
    return this.the_answer;
   }
  };
 
  var the_meaning = deep_thought.ask_question();
永利皇宫402,  alert(the_meaning);
</script>

复制代码 代码如下:

2.2

<script type=”text/javascript”>
function click_handler() {
alert(this); // alerts the button DOM node
}
function addhandler() {
document.getElementById(‘thebutton’).onclick = click_handler;
}
window.onload = addhandler;
</script>

<button id=’thebutton’>Click me!</button>

<script type=”text/javascript”>
  function test_this() {
   return this;
  }
  var i_wonder_what_this_is = test_this();
  alert(i_wonder_what_this_is);
  // result: [object window];
</script>

由于函数调用的上下文的变化导致了this的不确定性。为了更好的明确this上下文,可以使用call和apply两个方法来明确化this绑定的值。
call和apply的区别仅仅在于参数上的区别:call接受任意参数列表,apply接受一个参数数组对象。这也使得apply可以接受arguments作为其第二参数。

2.3:

复制代码 代码如下:

<script type=”text/javascript”>
  function click_handler() {
   alert(this); // 弹出 window 对象
  }
</script>
 …
<button id=’thebutton’ onclick=’click_handler()’>Click
me!</button>

func.call(obj1,var1,var2,var3)
func.apply(obj1, [var1,var2,var3])
func.apply(obj1, arguments)

2.4

但是call和apply方式都是立即执行的,如果需要后来使用的话,就不能满足条件,如下例,其中13行和14行无论是否使用call都无法得到我们需要的值(42)。

<script type=”text/javascript”>
  function click_handler(obj) {
   alert(obj);
   //result:[object HTMLButtonElement]
  }
</script>
 …
<button id=’thebutton’ onclick=’click_handler(this)’>Click
me!</button>

复制代码 代码如下:

2.5

<script type=”text/javascript”>
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById(‘thebutton’);
//the_button.onclick = deep_thought.ask_question;
the_button.onclick = deep_thought.ask_question.call(deep_thought);
}
window.onload = addhandler;
</script>

<button id=’thebutton’ onclick=’click_handler(this)’>Click
me!</button>
<script type=”text/javascript”>
 function BigComputer(answer) {
  this.the_answer = answer;
  this.ask_question = function () {
   alert(this.the_answer);
  }
 }
 
 function addhandler() {
  var deep_thought = new BigComputer(42),
   the_button = document.getElementById(‘thebutton’);
   the_button.onclick = deep_thought.ask_question;
 }
 window.onload = addhandler;
 //result [undefined]
</script>
 …

这个时候就是bind方法大显身手的时候(该方法已经在ECMA-262第五版已经加入),最早出现在Prototype框架中(未确认过)。bind和call,apply一样,也是变更函数执行的上下文,也即函数执行时this的值。不同的在于,它返回一个函数引用以供后续使用,其简单实现如下:

2.6

复制代码 代码如下:

<button id=’thebutton’ onclick=’click_handler(this)’>Click
me!</button>
<script type=”text/javascript”>
 function BigComputer(answer) {
  var self=this;
  self.the_answer = answer;
  self.ask_question = function () {
   alert(self.the_answer);
  }
 }
 
 function addhandler() {
  var deep_thought = new BigComputer(42),
   the_button = document.getElementById(‘thebutton’);
   the_button.onclick = deep_thought.ask_question;
 }
 window.onload = addhandler;
 //result [42]
</script>
 …

Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}

2.7

具体实现上利用闭包特性,返回来的函数引用在执行的时候,可以访问创建该函数引用时的method和object两个参数,而不是使用this,this在执行的时候会重新被绑定,而不是原来的method这个值。

<button id=’thebutton’ onclick=’click_handler(this)’>Click
me!</button>
<script type=”text/javascript”>
function btn_click(){
  alert(this);
}
 
 function addhandler() {
   the_button = document.getElementById(‘thebutton’);
   the_button.onclick = btn_click;
 }
 
 window.onload = addhandler;
 
 //result [undefined]
</script>
 …

*
方法调用模式:this被绑定到该对象。 *
函数调用模式:this被绑定到全局对象,网页的情况下绑定到…

2.8

<button id=’thebutton’ onclick=’click_handler(this)’>Click
me!</button>
<script type=”text/javascript”>
function real_func()
{
  alert(this);
}
function btn_click(){
  setTimeout(real_func,100);
}
 
 function addhandler() {
   the_button = document.getElementById(‘thebutton’);
   the_button.onclick = btn_click;
 }
 
 window.onload = addhandler;
 
 //result [undefined]
</script>
 …

2.9

<button id=’thebutton’ onclick=’click_handler(this)’>Click
me!</button>
<script type=”text/javascript”>
 Function.prototype.bind = function(obj) {
  var method = this,
   temp = function() {
    return method.apply(obj, arguments);
   };
 
  return temp;
 }
var  real_func=function()
{
  alert(this);
}
function btn_click(){
  setTimeout( real_func.bind(this),100);
}
 function addhandler() {
   the_button = document.getElementById(‘thebutton’);
   the_button.onclick = btn_click;
 }
 window.onload = addhandler;
 //result [undefined]
</script>
 …

2.10

<script>
  //** variables need to be defined
  alert(document);          // [object HTMLdocument]
  alert(window.document);   // [object HTMLdocument]
 
  alert(window.face);      //pretty
  var face=”pretty”;
  alert(face);             //pretty
  alert(window.face);      //pretty
  alert(window.sock);      //undefined
  alert(sock);              // ERROR: sock not defined
</script>

2.11

<script type=”text/javascript”>
function method()
{
  var window={};
  alert(window.location);
}
  alert(window.location);
  method();
  alert(window.location);
</script>

2.12

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

2.13

<script type=”text/javascript”>
  /** 这是一段很让人恼火的代码
  可以禁用alert
  */
  window.alert(“hello world”);
  window.alert=function(str){
      document.write(str);
  };
  alert(“hello world”);
  window.alert(“hello world”);
</script>

2.14:

注意这三个html文件的结果有什么不同.
a.html:
<script type=”text/javascript”>
alert(sock);
function sock()
{
  alert(“function sock executed!”);
}
alert(sock);
</script>
b.html:
<script type=”text/javascript”>
alert(sock);
var sock=function()
{
  alert(“function sock executed!”);
}
alert(sock);
</script>
c.html:
<script type=”text/javascript”>
// 这里并不弹出”undefined”
// 有点偏心啊!
alert(sock);
</script>

2.15

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

<script type=”text/javascript”>
Object.prototype.hello=function(){
  alert(“hello”);
}
window.hello();
</script>

:
script type=text/javascript var string=hello world; try{
alert(string.phone())…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图