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 指向 pet1

console.log( pet2.getName() ); 
//这里会回传 "猫"，因为 this 指向 pet2

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