Day [1] — this：存在于物件 — JS之浸猪笼系列

太想要放梗图ㄌ.....

this = 这个。

如果对this的理解到这里，很棒 您跟我一样完全看不懂this呢！

接下来就从猪脑浸猪笼ㄉ角度来看 this是啥米吧...

---

关于 this的资讯会分成4-5篇用对我来说最简单方式去理解＆介绍，分别是：

Day [1] — this：存在于物件 ＝ 主要讲指向 instance（物件实体）

Day [2] — this：作用域 ＝ 主要讲 this 和作用域的关係

Day [3] — this：建构物件 ＝ 主要讲 this 和 new

Day [4] — this：指定物件 ＝ 主要讲 this 和 .call() / .apply() / .bind()

Day [5] — this：可能总结一下还没想好

---

What ‘s THIS ???

this 是 JavaScript里的关键字。this 是 执行函式时，自动生成的内部物件。this 随着执行的函式场合不同，会指向不同值。多数情况下，this 代表呼叫函式的物件。

---

Day [1] — this：存在于物件

当 this 在函数运行的时候自动指向 instance（物件实体） 的属性。

这时候应该已经有人想说 instance（物件实体） 是啥了，
反正我还要写30天，请期待一下后续的文章谢谢。

//来个範例吧！var a = 123;function jaygu() {   console.log(this.a);}jaygu();  // 123

『 ㄟ？那我直接呼叫 a 不也一样？干嘛用this？』

客倌且慢，我们再往下看：

//来个範例吧！function jaygu(){console.log(this.a);}//jaygu 函式会运行出 this.a的结果var obj = {}; //这是一个空物件obj.a = 123; //在空物件里带入 a = 123 这个值obj.b = jaygu; //在空物件里带入 b = jaygu 这个函式obj.b(); //当我们呼叫 obj.b 就印出 123 //解析一下//你知道这里的 this 指向得是什么了吗？//当我们呼叫 obj.b(); 的时候，//会自动去找到 obj.b = jaygu; 这个函式，//而这个函式会执行 console.log(this.a); ，//this 就自动去指向在 var(全域变数) obj中的 a，//而 obj.a = 123;，//故最后 obj.b(); 会印出 123//所以这里的 this 指向的就是 obj 

---

等等，你说 "指向" ，所以... this不是一个固定的东西？

这样说也对！简单来说，在这个範例中 this 就是一个指向物件实体的功能。

来个複数物件的範例：

//来个範例吧！var getName = function(){  return pet1.petName;};var pet1 = {  petName: "汪汪",  getName: getName};var pet2 = {  petName: "猫",  getName: getName};console.log( pet1.getName() );console.log( pet2.getName() );//以上两个例子都会回传 "汪汪", //因为我们让 getName = function(){ return pet1.petName;};

接着将 this 代入看看：

var getName = function(){  return this.petName;};var pet1 = {  petName: "汪汪",  getName: getName};var pet2 = {  petName: "猫",  getName: getName};console.log( pet1.getName() ); //这里会回传 "汪汪"，因为 this 指向 pet1console.log( pet2.getName() ); //这里会回传 "猫"，因为 this 指向 pet2

从这边的範例我们可以很简单的知道， this 会由于呼叫的物件不同，执行结果也不同。
在上面的範例中 this 就分别指向了 pet1 和 pet2。

---

回到最上面的问题：『 ㄟ？那我直接呼叫 a 不也一样？干嘛用this？』

记得在开头我们提到 this 的中文就是 “这个” 吗？

在上面的範例中，我们能将 这个(this) 视作一个代名词，
意思就是指 我能用 这个(this) 指向我想表达的物件。

最后送上一张符合章节meme

希望大家看ㄌ欢喜 & 30Days后的我觉得自己很棒！d(`･∀･)b

也请各位前辈们不吝给予批评和指教，或4给我一点鼓励 or meme 哇ㄟ揪欢喜！

---

引用及参考资讯

What's THIS in JavaScript ? [上]

浅谈 JavaScript 头号难题 this：绝对不完整，但保证好懂

this 的值到底是什么？一次说清楚

浅谈 JavaScript 头号难题 this：绝对不完整，但保证好懂

JavaScript深入之从ECMAScript规范解读this · Issue #7 · mqyqingfeng/Blog