this指向问题

this指向

1.默认绑定

什么情况下使用默认绑定呢？独立函数调用。

独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用

// 1.案例一：
function foo() {
    console.log(this);
}

// 独立函数调用
foo() //window

// 2.案例二：
function test1() {
    console.log(this); //window
    test2()
}

function test2() {
    console.log(this); //window
    test3()
}

function test3() {
    console.log(this); //window
}

// 独立函数调用
test1() 


// 3.案例三：
function foo(func) {
    func()
}

var obj = {
    name: '司命玄水',
    bar: function () {
        console.log(this);
    }
}
// 独立函数调用
foo(obj.bar)  //window

2.隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的：

也就是它的调用位置中，是通过某个对象发起的函数调用。

// 通过对象调用
// 案例一：
function foo() {
    console.log(this);  //obj对象
}

var obj = {
    name: '司命玄水',
    foo: foo
}

obj.foo()

// 案例二：
function foo() {
    console.log(this);
}

var obj1 = {
    name: 'obj1',
    foo: foo
}

var obj2 = {
    name: 'obj2',
    obj1: obj1
}

obj2.obj1.foo()  //obj1对象

// 案例三：
function foo() {
    console.log(this);
}

var obj1 = {
    name: 'obj1',
    foo:foo
}

// 将obj1的foo赋值给bar
var bar = obj1.foo
bar()  //此时通过独立函数调用，打印window

3.显式绑定

隐式绑定有一个前提条件：

• 必须在调用的对象内部有一个对函数的引用（比如一个属性）；
• 如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
• 正是通过这个引用，间接的将this绑定到了这个对象上；

如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？

• JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。

• 它们两个的区别这里不再展开；

• 其实非常简单，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；

• 这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。

• 在调用这个函数时，会将this绑定到这个传入的对象上。

• 因为上面的过程，我们明确的绑定了this指向的对象，所以称之为 显示绑定

  // 对象显式绑定
  function foo() {
      console.log(this);
  }
  foo.call(window) //window
  foo.call({age:18}) //{age:18}
  foo.call(123) //Number对象 {123}
  
  // 函数显式绑定
  function foo() {
      console.log(this);
  }
  var obj = {
      age: 18
  }
  
  // 只有bind可以这样进行函数调用
  var bar = foo.bind(obj)
  bar()  //obj对象
  

4.new绑定

• JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。
• 使用new关键字来调用函数是，会执行如下的操作：
  1.创建一个全新的对象；
  2.这个新对象会被执行prototype连接；
  3.这个新对象会绑定到函数调用的this上（this的绑定在这个步 骤完成）；
  4.如果函数没有返回其他对象，表达式会返回这个新对象

// 创建Person
function Person(age) {
    console.log(this); //Person {}
    this.age = age
}

var p = new Person(18)
console.log(p);  //Person {age: 18}

5.规则优先级

• 1.默认规则的优先级最低 p 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this

• 2.显示绑定优先级高于隐式绑定 p 代码测试

• 3.new绑定优先级高于隐式绑定 p 代码测试

• 4.new绑定优先级高于bind ，

• new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高

• new绑定可以和bind一起使用，new绑定优先级更高

6.this规则之外：忽略显示绑定

我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。
（ 如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则： this规则之外 – 忽略显示绑定

function foo() {
    console.log(this);
}

var obj = {
    age: 18
}

foo.call(obj)  //obj对象
foo.call(null)  //window
foo.call(undefined)  //window

var bar = foo.bind(null)
bar() //window

7.this规则之外 - 间接函数引用

• 还有一种情况是，创建一个函数的 间接引用，这种情况使用默认绑定规则。

• 赋值(obj2.foo = obj1.foo)的结果是foo函数； foo函数被直接调用，那么是默认绑定

  function foo() {
      console.log(this);
  }
  
  var obj1 = {
      name: 'obj1',
      foo: foo
  }
  
  var obj2 = {
      name: 'obj2'
  }
  
  obj1.foo();  //obj1对象
  // 上面一行必须加分号，不然就会把下面的作为函数调用，
  // 并报错VM146:15 Uncaught TypeError: obj1.foo(...) is not a function
  (obj2.foo = obj1.foo)()  //window
  

8.this规则之外 – ES6箭头函数

• 箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this

  var obj = {
      data: [],
      getData: function () {
          setTimeout(() =>{
              console.log(this);
              // 模拟获取到的数据
              var res = ['abc',123,456]
              this.data.push(...res)
          },1000)
      }
  }
  obj.getData() // obj对象
  
  var obj = {
      data: [],
      getData: () => {
          setTimeout(() =>{
              console.log(this);
          },1000)
      }
  }
  obj.getData()  //window