JavaScript中this的指向

我们先说一个最简单的this在全局指向的是什么呢？

这个问题很简单在浏览器中测试this，全局指向的是window，不过在开发过程中this很少在全局使用，一般都是在函数内的

this有几种绑定规则？

绑定一：默认绑定

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

 foo()//window

// 2.案例二:
function foo1() {
  console.log(this)
}

function foo2() {
  console.log(this)
  foo1()
}

function foo3() {
  console.log(this)
  foo2()
}

foo3()//window

// 3.案例三:
var obj = {
  name: "why",
  foo: function() {
    console.log(this)
  }
}

var bar = obj.foo
bar() // window

绑定二：隐式绑定

// 1.案例一:
var obj = {
  name: "why",
  foo: foo
}

obj.foo() // obj对象

// 2.案例二:
var obj = {
  age: "哈哈哈",
  eating: function () {
    console.log(this + "在吃东西")
  },
  running: function () {
    console.log(this + "在跑步")
  }
}

obj.eating()//obj对象
obj.running()//obj对象

var fn = obj.eating
fn()
//window,为什么是window呢因为把obj.eating这个函数赋值给了fn，fn在全局调用的所以指向的是window

// 3.案例三:
var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this)
  }
}

var obj2 = {
  name: "obj2",
  bar: obj1.foo
}

obj2.bar()//obj2对象

绑定三：显示绑定

function foo() {
  console.log("函数被调用了", this)
}

//1.foo直接调用和call/apply调用的不同在于this绑定的不同
//foo直接调用指向的是全局对象(window)
foo()
var obj = {
  name: "obj",
  // age:foo//可以简写这一步
}

//call/apply是可以指定this的绑定对象
foo.call(obj)//obj对象
foo.apply(obj)//obj对象
foo.apply("aaaa")//aaaa


// 2.call和apply有什么区别?
function sum(num1, num2, num3) {
  console.log(num1 + num2 + num3, this)
}

sum.call("call", 20, 30, 40)//传递参数后面可以传无限个数值，都是用逗号分割
sum.apply("apply", [20, 30, 40])//传递参数用数组接收，一样可以传无限个数值，用逗号分割

// 3.call和apply在执行函数时,是可以明确的绑定this, 这个绑定规则称之为显示绑定

绑定四：new绑定

// 我们通过一个new关键字调用一个函数时(构造器), 这个时候this是在调用这个构造器时创建出来的对象
// this = 创建出来的对象
// 这个绑定过程就是new 绑定

function Person(name, age) {
  this.name = name
  this.age = age
}

var p1 = new Person("哈哈哈", 18)
console.log(p1.name, p1.age)//哈哈哈，18

var p2 = new Person("呵呵呵", 30)
console.log(p2.name, p2.age)//呵呵呵，30

这些的案例可以给我们什么样的启示呢？

1.函数在调用时，JavaScript会默认给this绑定一个值；

2.this的绑定和定义的位置（编写的位置）没有关系；

3.this的绑定和调用方式以及调用的位置有关系；

4.this是在运行时被绑定的;

最后说一下默认绑定和显示绑定bind冲突: 优先级(显示绑定)