标题: 别再为了this发愁了：JS中的this机制 [打印本页]

---

作者: yuyang911220    时间: 2017-4-23 20:06     标题: 别再为了this发愁了：JS中的this机制

题记：JavaScript中有很多令人困惑的地方，或者叫做机制。但是，就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等，而这其中就包括颇让人费解的this机制。不管是新手还是老手，不仔细深抠一下还真闹不明白this倒地咋回事捏。今天，我们就一起看一下this倒地咋回事，别再为了this发愁了。
1、this是啥?
简言之，this是JavaScript语言中定义的众多关键字之一，它的特殊在于它自动定义于每一个函数域内，但是this倒地指引啥东西却让很多人张二摸不着头脑。这里我们留个小悬念，希望看完这篇文章了你能回答出来this到底指引个甚。
2、this有啥用?
那边观众又该问了，既然this这么难以理解，那么为个甚还要用它呢?我们来看个例子：

• function identify() {
• 
  
•     return this.name.toUpperCase();
• 
  
• }
• 
  
• function sayHello() {
• 
  
•     var greeting = "Hello, I'm " + identify.call( this );
• 
  
•     console.log( greeting );
• 
  
• }
• 
  
• var person1= {
• 
  
•     name: "Kyle"
  
• 
  
• };
• 
  
• var person2= {
• 
  
•     name: "Reader"
  
• 
  
• };
• 
  
• identify.call( person1); // KYLE
• 
  
• identify.call( person2); // READER
• 
  
• sayHello.call( person1); // Hello, I'm KYLE
• 
  
• sayHello.call( person2); // Hello, I'm READER

这段代码很简单，我们定义了两个函数，分别为identify和sayHello。并且在不同的对象环境下执行了它们，达到了复用的效果，而不用为了在不同的对象环境下执行而必须针对不同的对象环境写对应的函数了。简言之，this给函数带来了复用。那边客官又问了，我不用this一样可以实现，如：

• function identify(context) {
• 
  
•     return context.name.toUpperCase();
• 
  
• }
• 
  
• function sayHello(context) {
• 
  
•     var greeting = "Hello, I'm " + identify( context);
• 
  
•     console.log( greeting );
• 
  
• }
• 
  
• var person1= {
• 
  
•     name: "Kyle"
  
• 
  
• };
• 
  
• var person2= {
• 
  
•     name: "Reader"
  
• 
  
• };
• 
  
• identify( person1); // KYLE
• 
  
• identify( person2); // READER
• 
  
• sayHello( person1); // Hello, I'm KYLE
• 
  
• sayHello( person2); // Hello, I'm READER

仔细一看，这位客官给出的解决方法的确也达到了类似的效果。赞一个!我想说的是，随着代码的增加，函数嵌套、各级调用等变得越来越复杂，那么传递一个对象的引用将变得越来越不明智，它会把你的代码弄得非常乱，甚至你自己都无法理解清楚。而this机制提供了一个更加优雅而灵便的方案，传递一个隐式的对象引用让代码变得更加简洁和复用。好了，知道了this的用处，那么再看看我们对它的误解。
3、关于this的误解
相信很多童鞋是学过其它语言的，在很多编程语言中都有this的机制，惯性思维把其它语言里对它的理解带到了JavaScript中。同时，由于this这个单词的理解导致了我们产生了对它各种各样的误解。所以，开始前，我们先澄清下对它的误解。
3.1 误解一：this引用function本身
我们都知道，在函数里引用函数可以达到递归和给函数属性赋值的效果。而这在很多应用场景下显得非常有用。所以，很多人都误以为this就是指引function本身。例如：

• function fn(num) {
• 
  
•     console.log( "fn: " + num );
• 
  
•     // count用于记录fn的被调用次数
• 
  
•     this.count++;
• 
  
• }
• 
  
• fn.count = 0;
• 
  
• var i;
• 
  
• for (i=0; i<10; i++) {
• 
  
•     if (i > 5) {
• 
  
•         fn( i );
• 
  
•     }
• 
  
• }
• 
  
• // fn: 6
• 
  
• // fn: 7
• 
  
• // fn: 8
• 
  
• // fn: 9
• 
  
• 
  
• 
  
• console.log( fn.count ); // 0 -- 耶？咋不是4捏？
  

上面我们想要记录fn被调用的次数，可是明显fn被调用了四次但count仍然为0。咋回事捏?这里简单解释下，fn里第4行的自增隐式的创建了一个全局变量count，由于初始值为undefined，所以每一次自增其实依然不是一个数字，你在全局环境下打印count(window.count)输出的应该是NaN。而第6行定义的函数熟悉变量count依然没变，还是0。如果对这个执行结果不清楚的，欢迎去看我前些天的那篇博文(聊一下JS中的作用域scope和闭包closure  scope和closure)，在这里你只需要知道，this引用的是function这种理解是错误的就行。
这边就会又有人问了，既然this不是引用function，那么我要实现递归函数，该咋引用呢?这里简单回答下介个问题，两种方法：①函数体内用函数名来引用函数本身②函数体内使用arguments.callee来引用函数(不推荐)。那么既然第二种方法不推荐，匿名函数咋引用呢?用第一种，并且给匿名函数一个函数名即可(推荐)。
3.2 误解二：this引用的是function的词法作用域
这种误解欺骗的人可能更多一些。首先，澄清一下，this并没有引用function的词法作用域。的确JS的引擎内对词法作用域的实现的确像是一个对象，拥有属性和函数，但是这仅仅是JS引擎的一种实现，对代码来说是不可见的，也就是说词法作用域“对象”在JS代码中取不到。(关于词法作用域，如果不理解，可以参考之前的一篇博文《聊一下JS中的作用域scope和闭包closure  scope和closure》)。看个错误的例子：

• function fn1() {
• 
  
•     var a = 2;
• 
  
•     this.fn2();//以为this引用的是fn1的词法作用域
• 
  
• }
• 
  
• function fn2() {
• 
  
•     console.log( this.a );
• 
  
• }
• 
  
• fn1(); //ReferenceError

上面的代码明显没有执行出想要的结果，从而可以看到this并没有引用函数的词法作用域。甚至，可以肯定的说，这个例子里fn2可以在fn1里正确执行都是偶然的(理解了词法作用域你就知道为什么这里执行不报错了)。

---

欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)

Powered by Discuz! 7.0.0