理解this 的用法

2017-06-14 本文已影响0人微风玉米

进入了JavaScript 学习，在函数和对象中会经常遇到this 关键字。虽然大多数情况下，可以猜测出this 是指向当前对象，但是遇到了某些例子，就会感到混乱，不明所以。如下例子：

// 例子一 
var obj = {};
var foo1 = function (){
  console.log(this.x = 10); 
  function foo2(){
    console.log(this.y = 20) 
  }
  foo2()
}

// 这样调用时this 分别指向什么？
foo1()

// 这样调用时this 又分别指向什么？
obj.method = foo1
obj.method();

所以为减少上面这种迷糊时刻，接下来会对this 知识点进行梳理。

一、函数直接调用

这种情况，代码在严格模式和非严格模式下，this 的值会有所差异。但在平时接触中，多是非严格模式，所以这里是以非严格模式为前提。

函数被直接调用，那么this 代表全局对象，即 window 对象。因此，这种情况下对于this 的赋值会被绑定到全局对象上，成为全局属性，要慎用。

// 例子二
function demo(){
  console.log(this === window)
}
demo() // true

由此可知，例子一 中foo1 被直接调用后，函数中的两个 this 都是指向 window 对象，并在window 上分别创建了 x 、y 全局属性，属性值分别为10 、20。

二、对象方法中的 this

当this 出现在对象的方法中时，this 就是调用这个方法的对象。

// 例子三
var o = {
  name: 'Michael',
  f: function(){
    this.name = 'Peter';
    console.log(this === o)
  }
}
o.f() // true
console.log(o.name) // Peter

由此可知，例子一 在 obj.method(); 调用method 方法后，第一个this 指向的是obj 对象，并在obj对象上创建了x 属性，属性值为10 ；然而其中内部函数foo2 的this 却指向window 对象，并覆盖了已经存在的全局属性y ，属性值为20 。例子一可能不够清楚，所以在举一个例子:

// 例子四
var o = {
  gender: 'male',
  f: function foo1(){
    this.gender = 'female';
    function foo2(){
      this.gender = 'male or female';
    }
    foo2();
  }
}
o.f()
console.log(o.gender) // female
console.log(window.gender) // male or female

所以为了解决这种this 前后不一的问题，大多程序员使用变量替换的方法，而且该变量一般命名为 that，这个方法参考自深入浅出 JavaScript 中的 this.

// 例子五
var o = {
  gender: 'male',
  f: function foo1(){
    var that = this
    function foo2(){
      that.gender = 'male or female';
    }
    foo2();
  }
}
o.f()
console.log(o.gender) // male or female

就近原则

this 的绑定只受最靠近的成员引用的影响。

// 例子六
var o = {
  name: 'Michael',
  gender: 'male'
}
function foo(){
  this.gender = 'female';
}
o.obj={
  name: 'Peter',
  gender: 'male',
  f: foo
}
o.obj.f() 
o.gender //male
o.obj.gender //female

由此可见例子六的this 指向的是o.obj 。

原型中的this

如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，表现得好像是这个方法就存在于这个对象上一样。具体可参见MDN--this
getter 与 setter 中的this

作为getter或setter函数都会绑定 this 到从设置属性或得到属性的那个对象。具体参见MDN

三、作为构造函数调用

通过构造函数生成一个新对象，那么this 就是这个新对象。

// 例子七
function foo(){this.xxx = 'yyy'};
var demo = new foo();
demo.xxx // "yyy"

构造器返回的默认值是一个this引用的对象，也可以手动设置返回其他的值，如果手动设置的值是一个对象，那么就返回这个对象；如果返回值不是一个对象，那么就返回this。

//例子八
function foo(){
  this.xxx = 'yyy';
  return {xxx: 'zzz'}
}
var demo = new foo();
demo.xxx // "zzz"

function foo1(){
  this.xxx = 'yyy';
  return xxx = 'zzz';
}
var demo1 = new foo1();
demo1.xxx // "yyy"

四、使用call 和 apply 调用

call 和 apply 是函数对象的方法，可以用句点预算符调用这两种方法。这两种方法都可以用于指定this 绑定的对象。call 和 apply 第一个参数都是 this 要绑定的对象，不同的是call 方法后面可以接无数个参数，而apply 后面只能再接一个数组，数组里面装着参数。

//例子九
var obj = {
  age: null,
  foo: function(x, y, z){
    this.age = x + y + z;
  }
}
var o = {
  age: '' 
}
var x = 'I ', y = 'Don\'t ', z = 'know.'
obj.foo.call(o,x, y, z); //或者写成 obj.foo.apply(o,[x,y,z])
obj.age //null
o.age  //"I Don't know."

使用call 和 apply 方法时要注意，如果传入的this 的值不是一个对象，那么JavaScript 会内部将其转化为一个对象。比如传入数字，就会使用new Number() 构造函数，将其转换为对象；比如传入字符串，就使用new String() 构造函数，将其转化。如果传入的this 的值是undefined 或 null，那么这个this 就绑定到window 对象上。

//例子十
var obj = {
  age: null,
  foo: function(x, y, z){
    this.age = x + y + z;
  }
}
var x = 'I ', y = 'Don\'t ', z = 'know.'
obj.foo.call(undefined,x, y, z);
obj.age //null
window.age //"I Don't know."

var o = {
  name: 'Michael',
  f: function(name){
    this.name = name;
    return this
  }
}
console.log(o.f.call(0, 'Peter')); //Number {name: "Peter", [[PrimitiveValue]]: 0}

五、Function.prototype.bind

这个方法会创建一个新函数，新函数的函数体和函数作用域是同调用这个方法的函数相同，而在这个新函数中，this 被永久的绑定到了bind 的第一个参数上，就算call 调用传入this 也不会作用。

//例子十一
var obj = {
  name: 'Michael',
  foo: function(newName){
    this.name = newName;
  }
}
var o1 = {
  name: null
}
var o2 = {
  name: 'none'
}
var g = obj.foo.bind(o1, 'Peter');
g.call(o2,'Lisa')
o1.name //"Peter"
o2.name //"none"

六、DOM事件处理函数中的 this

当函数被用作事件处理函数时，它的this指向触发事件的元素

下面的this 指向window，this

<button onclick="(function(){console.log(this.xx = 30);console.log(this===window)})()" id="firstButton">
  click me
</button>
<!-- 这里的变量xx 被绑定到window 对象上 -->

<script>
  function demo(){
    console.log(this.aa = 60);
    console.log(this === window);
  }
</script>
<button onclick="demo()">
  click me to fresh 
</button>
<!-- 这里的变量aa 被绑定到window 对象上 -->

下面的this 指向文档元素

<button onclick="console.log(this)" id="secondButton">
  click me again
</button>
<!-- 这里的变量yy 被绑定到secondButton 文档元素上，因为这里的this 在外层代码上 -->

<button onclick="(function(obj){console.log(obj.xx = 30);console.log(obj)})(this)" id="firstButton">
  give me five
</button>
<!-- 这里的变量xx 被绑定到firstButton 文档元素上，因为这里的this 在外层代码上  -->

<button id="thirdButton">
  click me last time
</button>
<script>
  var button3=document.querySelector("#thirdButton");
  button3.onclick=function(){
    console.log(this.zz=50)
    console.log(this)
  }
</script>
<!-- 这里的变量zz 被绑定到了thirdButton 文档元素上 -->