this指向什么呢?

在浏览器中测试就是指向window

console.log(this) //window

var name="洋洋"
console.log(this.name)//洋洋
console.log(window.name)//洋洋
 

所有的函数在被调用时,都会创造一个执行上下文
这个上下文都记录着函数的调用栈,AO对象
this也是其中的一条记录

this到底指向什么呢

1.函数在调用时,JavaScript会默认给this绑定一个值;
2.this的绑定和定义的位置(编写的位置)没有关系
3.this的绑定和调用方式以及调用的位置有关系
4.this是在运行时被绑定的
我们来看一段代码

// this指向什么, 跟函数所处的位置是没有关系的
// 跟函数被调用的方式是有关系

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

// 1.直接调用这个函数
foo()

// 2.创建一个对象, 对象中的函数指向foo
var obj = {
  name: 'why',
  foo: foo
}

obj.foo()

// 3.apply调用
foo.apply("abc")


这里3种调用同一个函数的this 出现在3种不同的情况,为什么往下看。
其实this绑定是由规则的这里我来划分下

  1. 绑定一:默认绑定
  2. 绑定二:隐式绑定
  3. 绑定三:显示绑定

规则一:默认绑定

// 默认绑定: 独立函数调用
传统的绑定window
 1.案例一:
 function foo() {
   console.log(this)
 }

 foo()// window

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

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

规则二:隐式绑定

通过某个对象发起的函数对象,跟他使用的位置有关,跟他定义的地方无关

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

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

obj2.bar()//{name:obj2,bar:function} 其实这里的this就是obj2函数


显示绑定

必须在调用的对象内部有一个对函数的引用
如果没有这样的引用,在进行调用时,会报找不到该函数的错误
正是通过这个引用,间接的将this绑定到了这个对象上
其实就是通过call、apply、bind 三个方法来显示绑定
.call和apply在执行函数时,是可以明确的绑定this, 这个绑定规则称之为显示绑定

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

// 1.foo直接调用和call/apply调用的不同在于this绑定的不同
// foo直接调用指向的是全局对象(window)
foo()

var obj = {
  name: "obj",

}

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

bing则是将绑定的值传递给一个变量,想使用这个绑定的时候不需要创建多个值

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

// foo.call("aaa")
// foo.call("aaa")
// foo.call("aaa")
// foo.call("aaa")

// 默认绑定和显示绑定bind冲突: 优先级(显示绑定)

var newFoo = foo.bind("aaa")

newFoo()
newFoo()
newFoo()
newFoo()
newFoo()
newFoo()

后续补充~~~

Q.E.D.