Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Javascript this pointer_javascript skills

Javascript this pointer_javascript skills

WBOY
Release： 2016-05-16 18:48:56
Original
950 people have browsed it

前言

Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript 可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错，进而用错的特性。特别是对于接触静态语言比较久了的同志来说更是如此。

示例说明

我们先来看一个最简单的示例：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> name = <span class="str">"Kevin Yang"</span>;
  <span class="kwrd">function</span> sayHi(){
    alert(<span class="str">"你好，我的名字叫"</span> + name);
  }
  sayHi();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

这段代码很简单，我们定义了一个全局字符串对象name和函数对象sayHi。运行会弹出一个打招呼的对话框，“你好，我的名字叫Kevin Yang”。

我们把这段代码稍微改一改：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> name = <span class="str">"Kevin Yang"</span>;
  <span class="kwrd">function</span> sayHi(){
    alert(<span class="str">"你好，我的名字叫"</span> + <span class="kwrd">this</span>.name);
  }
  sayHi();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。运行结果和上面一摸一样。这说明this.name引用的也还是全局的name对象。

开头我们不是说了，函数也是普通的对象，可以将其当作一个普通变量使用。我们再把上面的代码改一改：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> name = <span class="str">"Kevin Yang"</span>;
  <span class="kwrd">function</span> sayHi(){
    alert(<span class="str">"你好，我的名字叫"</span> + <span class="kwrd">this</span>.name);
  }
  <span class="kwrd">var</span> person = {};
  person.sayHello = sayHi;
  person.sayHello();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

这一次，我们又创建了一个全局对象person，并将sayHi函数对象赋给person对象的sayHello属性。运行结果如下：

image

这一次打招呼的内容就有点无厘头了，我们发现this.name已经变成undefined了。这说明，在sayHello函数内部执行时已经找不着this.name对象了。如果我们重新定义person对象，在其上面加上一个name属性又会怎么样呢？

<span class="kwrd">var</span> person = {name:<span class="str">"Marry"</span>};
Copy after login

运行代码发现打招呼的“人”变了：

image

是不是看出点道道了呢？

判别this指针的指导性原则

在Javascript里面，this指针代表的是执行当前代码的对象的所有者。

在上面的示例中我们可以看到，第一次，我们定义了一个全局函数对象sayHi并执行了这个函数，函数内部使用了this关键字，那么执行this这行代码的对象是sayHi（一切皆对象的体现），sayHi是被定义在全局作用域中。其实在Javascript中所谓的全局对象，无非是定义在 window这个根对象下的一个属性而已。因此，sayHi的所有者是window对象。也就是说，在全局作用域下，你可以通过直接使用name去引用这个对象，你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name了。

再来看第二个this的示例。我们定义了一个person的对象，并定义了它的sayHello属性，使其指向sayHi全局对象。那么这个时候，当我们运行person.sayHello的时候，this所在的代码所属对象就是sayHello了（其实准确来说，sayHi和sayHello是只不过类似两个指针，指向的对象实际上是同一个），而sayHello对象的所有者就是person了。第一次，person里面没有name属性，因此弹出的对话框就是this.name引用的就是undefined对象（Javascript中所有只声明而没有定义的变量全都指向undefined对象）；而第二次我们在定义person的时候加了name属性了，那么this.name指向的自然就是我们定义的字符串了。

理解了上面所说的之后，我们将上面最后一段示例改造成面向对象式的代码。

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> name = <span class="str">"Kevin Yang"</span>;
  <span class="kwrd">function</span> sayHi(){
    alert(<span class="str">"你好，我的名字叫"</span> + <span class="kwrd">this</span>.name);
  }
  <span class="kwrd">function</span> Person(name){
    <span class="kwrd">this</span>.name = name;
  }
  Person.prototype.sayHello = sayHi;
  <span class="kwrd">var</span> marry = <span class="kwrd">new</span> Person(<span class="str">"Marry"</span>);  
  marry.sayHello();
  <span class="kwrd">var</span> kevin = <span class="kwrd">new</span> Person(<span class="str">"Kevin"</span>);
  kevin.sayHello();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

在上面这段代码中，我们定义了一个Person的“类”（实际上还是一个对象），然后在这个类的原型（类原型相当于C++中的静态成员变量的概念）中定义了sayHello属性，使其指向全局的sayHi对象。运行代码我们可以看到，marry和kevin都成功的向我们打了声“招呼”。

在这段代码中有两点需要思考的，一个是new我们很熟悉，但是在这里new到底做了什么操作呢？另外一个是，这里执行sayHello的时候，this指针为什么能够正确的指向marry和kevin对象呢？

我们来把上面定义“类”和实例化类对象的操作重新“翻译”一下：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> name = <span class="str">"Kevin Yang"</span>;
  <span class="kwrd">function</span> sayHi(){
    alert(<span class="str">"你好，我的名字叫"</span> + <span class="kwrd">this</span>.name);
  }
  <span class="kwrd">function</span> Person(name){
    <span class="kwrd">var</span> <span class="kwrd">this</span>;
    <span class="kwrd">this</span>.name = name;
    <span class="kwrd">return</span> <span class="kwrd">this</span>;
  }
  Person.prototype.sayHello = sayHi;
  <span class="kwrd">var</span> marry = Person(<span class="str">"Marry"</span>);  
  marry.sayHello();
  <span class="kwrd">var</span> kevin = Person(<span class="str">"Kevin"</span>);
  kevin.sayHello();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

当然这段代码并不能正确执行，但是它可以帮助你更好的理解这个过程。

当我们使用new关键字实例化一个“类”对象的时候，Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name，实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你，于是就有 marry变量得到的对象的name为“Marry”，而kevin变量得到的对象的name属性确实“Kevin”。

容易误用的情况

理解了this指针后，我们再来看看一些很容易误用this指针的情况。

示例1——内联式绑定Dom元素的事件处理函数

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">function</span> sayHi(){
    alert(<span class="str">"当前点击的元素是"</span> + <span class="kwrd">this</span>.tagName);
  }  
<span class="html">script</span><span class="kwrd">></span>
<span class="kwrd"><</SPAN><SPAN class=html>input</SPAN> <SPAN class=attr>id</SPAN><SPAN class=kwrd>="btnTest"</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="button"</SPAN> <SPAN class=attr>value</SPAN><SPAN class=kwrd>="点击我"</SPAN> <SPAN class=attr>onclick</SPAN><SPAN class=kwrd>="sayHi()"</SPAN><SPAN class=kwrd>></span>
Copy after login

在此例代码中，我们绑定了button的点击事件，期望在弹出的对话框中打印出点击元素的标签名。但运行结果却是：

image

也就是this指针并不是指向input元素。这是因为当使用内联式绑定Dom元素的事件处理函数时，实际上相当于执行了以下代码：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>  
  document.getElementById(<span class="str">"btnTest"</span>).onclick = <span class="kwrd">function</span>(){
    sayHi();
  }
<span class="html">script</span><span class="kwrd">></span>
Copy after login

在这种情况下sayHi函数对象的所有权并没有发生转移，还是属于window所有。用上面的指导原则一套我们就很好理解为什么this.tagName是undefined了。

那么如果我们要引用元素本身怎么办呢？

我们知道，onclick函数是属于btnTest元素的，那么在此函数内部，this指针正是指向此Dom对象，于是我们只需要把this作为参数传入sayHi即可。

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">function</span> sayHi(el){
    alert(<span class="str">"当前点击的元素是"</span> + el.tagName);
  }
<span class="html">script</span><span class="kwrd">></span>
<span class="kwrd"><</SPAN><SPAN class=html>input</SPAN> <SPAN class=attr>id</SPAN><SPAN class=kwrd>="btnTest"</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="button"</SPAN> <SPAN class=attr>value</SPAN><SPAN class=kwrd>="点击我"</SPAN> <SPAN class=attr>onclick</SPAN><SPAN class=kwrd>="sayHi(this)"</SPAN><SPAN class=kwrd>></span>
Copy after login

等价代码如下：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span> 
  document.getElementById(<span class="str">"btnTest"</span>).onclick = <span class="kwrd">function</span>(){
    sayHi(<span class="kwrd">this</span>);
  }
<span class="html">script</span><span class="kwrd">></span>
Copy after login

示例2——临时变量导致的this指针丢失

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> Utility = {
    decode:<span class="kwrd">function</span>(str){
      <span class="kwrd">return</span> unescape(str);
    },
    getCookie:<span class="kwrd">function</span>(key){
      <span class="rem">// ... 省略提取cookie字符串的代码</span>
      <span class="kwrd">var</span> value = <span class="str">"i%27m%20a%20cookie"</span>;
      <span class="kwrd">return</span> <span class="kwrd">this</span>.decode(value);
    }
  };
  alert(Utility.getCookie(<span class="str">"identity"</span>))
<span class="html">script</span><span class="kwrd">></span>
Copy after login

我们在写稍微有点规模的Js库的时候，一般都会自己封装一个Utility的类，然后将一些常用的函数作为Utility类的属性，如客户端经常会用到的getCookie函数和解码函数。如果每个函数都是彼此独立的，那么还好办，问题是，函数之间有时候会相互引用。例如上面的getCookie函数，会对从document.cookie中提取到的字符串进行decode之后再返回。如果我们通过Utility.getCookie去调用的话，那么没有问题，我们知道，getCookie内部的this指针指向的还是Utility对象，而Utility对象时包含decode属性的。代码可以成功执行。

但是有个人不小心这样使用Utility对象呢？

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">function</span> showUserIdentity(){
    <span class="rem">// 保存getCookie函数到一个局部变量，因为下面会经常用到</span>
    <span class="kwrd">var</span> getCookie = Utility.getCookie;
    alert(getCookie(<span class="str">"identity"</span>));
  }
  showUserIdentity();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

这个时候运行代码会抛出异常“this.decode is not a function”。运用上面我们讲到的指导原则，很好理解，因为此时Utility.getCookie对象被赋给了临时变量getCookie，而临时变量是属于window对象的——只不过外界不能直接引用，只对Javascript引擎可见——于是在getCookie函数内部的this指针指向的就是window对象了，而window对象没有定义一个decode的函数对象，因此就会抛出这样的异常来。

这个问题是由于引入了临时变量导致的this指针的转移。解决此问题的办法有几个：

  • 不引入临时变量，每次使用均使用Utility.getCookie进行调用
  • getCookie函数内部使用Utility.decode显式引用decode对象而不通过this指针隐式引用（如果Utility是一个实例化的对象，也即是通过new生成的，那么此法不可用）
  • 使用Funtion.apply或者Function.call函数指定this指针

前面两种都比较好理解，第三种需要提一下。正是因为this指针的指向很容易被转移丢失，因此Javascript提供了两个类似的函数apply和call来允许函数在调用时重新显式的指定this指针。

修正代码如下：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">function</span> showUserIdentity(){
    <span class="rem">// 保存getCookie函数到一个局部变量，因为下面会经常用到</span>
    <span class="kwrd">var</span> getCookie = Utility.getCookie;
    alert(getCookie.call(Utility,<span class="str">"identity"</span>));
    alert(getCookie.apply(Utility,[<span class="str">"identity"</span>]));
  }
  showUserIdentity();
<span class="html">script</span><span class="kwrd">></span>
Copy after login

call和apply只有语法上的差异，没有功能上的差别。

示例3——函数传参时导致的this指针丢失

我们先来看一段问题代码：

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> person = {
    name:<span class="str">"Kevin Yang"</span>,
    sayHi:<span class="kwrd">function</span>(){
      alert(<span class="str">"你好，我是"</span>+<span class="kwrd">this</span>.name);
    }
  }
  setTimeout(person.sayHi,5000);
<span class="html">script</span><span class="kwrd">></span>
Copy after login

这段代码期望在访客进入页面5秒钟之后向访客打声招呼。setTimeout函数接收一个函数作为参数，并在指定的触发时刻执行这个函数。可是，当我们等了5秒钟之后，弹出的对话框显示的this.name却是undefined。

其实这个问题和上一个示例中的问题是类似的，都是因为临时变量而导致的问题。当我们执行函数的时候，如果函数带有参数，那么这个时候Javascript引擎会创建一个临时变量，并将传入的参数复制（注意，Javascript里面都是值传递的，没有引用传递的概念）给此临时变量。也就是说，整个过程就跟上面我们定义了一个getCookie的临时变量，再将Utility.getCookie赋值给这个临时变量一样。只不过在这个示例中，容易忽视临时变量导致的bug。

函数对象传参

对于函数作为参数传递导致的this指针丢失的问题，目前很多框架都已经有方法解决了。

Prototype的解决方案——传参之前使用bind方法将函数封装起来，并返回封装后的对象

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> person = {
    name:<span class="str">"Kevin Yang"</span>,
    sayHi:<span class="kwrd">function</span>(){
      alert(<span class="str">"你好，我是"</span>+<span class="kwrd">this</span>.name);
    }
  }
  <span class="kwrd">var</span> boundFunc = person.sayHi.bind(person,person.sayHi);
  setTimeout(boundFunc,5000);
<span class="html">script</span><span class="kwrd">></span>
Copy after login

bind方法的实现其实是用到了Javascript又一个高级特性——闭包。我们来看一下源代码：

<span class="kwrd">function</span> bind(){
  <span class="kwrd">if</span> (arguments.length < 2 && arguments[0] === undefined) 
    <span class="kwrd">return</span> <span class="kwrd">this</span>;
  <span class="kwrd">var</span> __method = <span class="kwrd">this</span>, args = $A(arguments), <span class="kwrd">object</span> = args.shift();
  <span class="kwrd">return</span> <span class="kwrd">function</span>(){
    <span class="kwrd">return</span> __method.apply(<span class="kwrd">object</span>, args.concat($A(arguments)));
  }
}
Copy after login

首先将this指针存入函数内部临时变量，然后在返回的函数对象中引用此临时变量从而形成闭包。

微软的Ajax库提供的方案——构建委托对象

<span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></span>
  <span class="kwrd">var</span> person = {
    name:<span class="str">"Kevin Yang"</span>,
    sayHi:<span class="kwrd">function</span>(){
      alert(<span class="str">"你好，我是"</span>+<span class="kwrd">this</span>.name);
    }
  }  
  <span class="kwrd">var</span> boundFunc = Function.createDelegate(person,person.sayHi);
  setTimeout(boundFunc,5000);
<span class="html">script</span><span class="kwrd">></span>
Copy after login

其实本质上和prototype的方式是一样的。

著名的Extjs库的解决方案采用的手法和微软是一样的。

Related labels：
javascript this pointer
source：php.cn
Previous article：jQuery interlaced color change supports keyboard up and down keys, press Enter to select value_jquery Next article：javascript progress bar implementation code_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template