this白话文

this 执行主体：谁让这个函数执行了
特殊情况：全局下的this是window

事件绑定中对应的函数的this是 绑定的那个元素
函数执行，里边的this是谁就看执行前边有没有点，点前边是谁，执行主体就是谁

自执行函数中的this就是window
箭头函数中没有this和arguments这两个关键字；他是把这两个关键字当作普通变量去对待了；

定时器里的this是window 但当定时器中的函数为箭头函数时遵循箭头函数的规则

this的五种情况总结：

1、在时间绑定中：

给当前元素的某事件行为绑定方法，事件行为触发，此时方法中的this是当前操作元素本身

2、普通方法执行看‘.’

2.1、方法执行前看前面有没有点，如果有，点前边是谁，this就是谁，如果没有，this就是window，（或者严格模式下的undefined）

2.2、自执行的函数一般是window，严格模式下是undefined

2.3、回调函数：一般说是window，除非在执行回调函数【内部方法】做了特殊处理

3、构造函数执行（new执行）

构造函数中的this是当前类的实例

4、箭头函数中（含块级上下文）没有自己的this，所用的this是上级上下文【宿主环境】的this，

箭头函数好用但不能滥用，不涉及this随便用

5、基于Function.prototype上的call、bind、apply强制改变this指向

1、全局下指的是window

console.log(this);

2、函数调用的情况

函数执行就看函数前有没有点，如果有，点前边是谁，this就是谁，如果没有，this就是window，或者严格模式下的undefined

//'use strict'//严格模式下
function fn(){
  console.log(this)
}
fn();//这里的this就是window，在严格模式下就是undefined

var obj={
  name:"li",
  fn:fn,
}

obj.fn();//这里的this就是obj

自执行的函数一般是window，严格模式下是undefined

//'use strict';
(function () {
      console.log(this)//window
})()

回调函数：一般来说是window，除非在执行回调函数【内部方法】做了特殊处理

<body>
  <div id="box">11111</div>
  <script>
    box.onclick = function () {
      console.log(this)
    }
  </script>
</body>

定时器：一般来说指的是window，但是若里边函数为箭头函数，则按照箭头函数的规则

setTimeout(function (){
   console.log(this);//this指的是window
}, 1000);

setTimeout(()=>{
	console.log(this);//this指的是上一级上下文的this
})

THIS练习题

1、

var name="珠峰培训";
function fn(){
   console.log(this.name)
}
var obj={
  name:"你好世界",
  fn:fn
}
obj.fn();
fn();

(function(){
  this.fn();
})();

答案：你好世界珠峰培训珠峰培训

2、

var a = 10;
function foo () {
  console.log(this.a)
}
foo();

答案：10

3、

var a = 10;
function foo () {
  console.log('this1', this)
  console.log(window.a)
  console.log(this.a)
}
console.log(window.foo)
console.log('this2', this)
foo();

答案：函数 window window 10 10

4、

let a = 10
const b = 20

function foo () {
  console.log(this.a)
  console.log(this.b)
}
foo();
console.log(window.a)

答案：undefined undefined undefined

5、

var a = 1
function foo () {
  var a = 2
  console.log(this)
  console.log(this.a)
}

foo()

答案：window 1

6、

var obj1 = {
  a: 1
}
var obj2 = {
  a: 2,
  foo1: function () {
    console.log(this.a)
  },
  foo2: function () {
    setTimeout(function () {
      console.log(this)
      console.log(this.a)
    }, 0)
  }
}
var a = 3

obj2.foo1()
obj2.foo2()

答案：2 window 3

7、

let obj={
  name:"li",
  fn:(function(n){
       // 这里的this
       console.log(this);
       return function(){
          // 这里的this
          console.log(this);
       }
  })(10),
}
obj.fn();

答案：window 对象obj

8、

function fn(){
  // 这里的this
  console.log(this);
}
box.onclick=function(){
    console.log(this);
    fn()
}

答案：box元素 window

9、

var num=10;
var obj={num:20};
obj.fn=(function(num){
   this.num=num*3;
   num++;
   return function(n){
       this.num+=n;
       num++;
       console.log(num);
   }
})(obj.num);
var fn=obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num)

答案：22 23 65 30

10、

var obj = {
  name: 'obj',
  foo1: () => {
    console.log(this.name)
  },
  foo2: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var name = 'window'
obj.foo1()
obj.foo2()()

答案：window obj obj

11、

var name = 'window'
var obj1 = {
	name: 'obj1',
	foo: function () {
		console.log(this.name)
	}
}

var obj2 = {
	name: 'obj2',
	foo: () => {
		console.log(this.name)
	}
}

obj1.foo()
obj2.foo()

答案：obj1 window

12、

var name = 'window'
var obj1 = {
  name: 'obj1',
  foo: function () {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj2 = {
  name: 'obj2',
  foo: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var obj3 = {
  name: 'obj3',
  foo: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj4 = {
  name: 'obj4',
  foo: () => {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}

obj1.foo()()
obj2.foo()()
obj3.foo()()
obj4.foo()()

答案：

obj1.foo()() // 'obj1' 'window'
obj2.foo()() // 'obj2' 'obj2'
obj3.foo()() // 'window' 'window'
obj4.foo()() // 'window' 'window'

第十三章 This