Table of Contents

this指向的规则

1.默认绑定

默认绑定就是什么都匹配不到的情况下，非严格模式this绑定到全局对象window或者global,严格模式绑定到undefined;

2.隐式绑定

隐式绑定就是函数作为对象的属性，通过对象属性的方式调用，这个时候this绑定到对象;

3.显示绑定

显示绑定就是通过apply和call调用的方式;

4.new绑定

new绑定就是通过new操作符时将this绑定到当前新创建的对象中，它们的匹配有限是是从小到大的。

this指向常见例子

1.

function a(){
    var user = "追梦子";
    console.log(this.user);
    console.log(this);
}
a();

输出:
undefined
Window

相当于window.a();

全局执行环境，默认绑定

2.

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
o.fn();

输出
追梦子

因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁

3.

var o = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a);
        }
    }
}
o.b.fn();

输出:
undefined

这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对像

4.

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a);
            console.log(this);
        }
    }
}
var j = o.b.fn;
j();

输出：
undefined
window

虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行,只是将函数引用赋值给了j，所以最终指向的是window

5.

function fn()
{
    this.user = '追梦子';
    return {};
}
var a = new fn;
console.log(a.user);

输出：
undefined

6.

function fn()
{
    this.user = '追梦子';
    return function(){};
}
var a = new fn;
console.log(a.user);

输出：
undefined

7.

function fn()
{
    this.user = '追梦子';
    return 1;
}
var a = new fn;
console.log(a.user);

输出：
追梦子

8.

function fn()
{
    this.user = '追梦子';
    return undefined;
}
var a = new fn;
console.log(a.user);

//追梦子

5-8：

　　如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

this碰到return时除了null外，其他对象都会返回undefined。

9.一道面试题

var length = 10;
  function fn() {
    console.log(this.length)
  };
  var obj = {
    length: 5,
    method: function(fn) {
      fn();
      arguments[0]();
      fn.call(obj, 12);
    }
  };
  obj.method(fn, 1);

输出
10 2 5
fn();//没有显式的指定它的调用对象,所以这里的this指向window，对应第一条规则
arguments[0]();//对象方法的关联数组形式调用，这里的arguments是一个类数组，这里指 obj.method(fn, 1)的参数个数。对应第二条规则
fn.call(obj, 12);//绑定到了obj上，对应第三条规则

结合了 https://www.cnblogs.com/pssp/p/5216085.html 的内容

Tags: js, this