首页 ›存档› 技术 › 查看内容

学习 | JS中的this机制

2018-3-30 13:00 |来自: 互联网 237 0

摘要: 题记 JavaScript中有很多令人困惑的地方，或者叫做机制。但是，就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等，而这其中就包括颇让人费解的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

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：【职场你最大】20个必会的JavaScript面试题，我已收藏！下一篇：【直播课】Node.js速成之道,高手训练营

学习 | JS中的this机制

相关分类