开启严格模式”use strict”

1）在全局的THIS，this就是window{GO}

console.log(this);

2）块级上级文中没有自己的THIS,

遇到的THIS是宿主环境中的{上级上下文}

3）THIS都是指:函数执行，产生的私有上下文中的THIS 规律如下

THIS:函数的执行主体“谁把它执行的”，和函数在哪创建以及在哪执行都没啥关系！！以后遇到this 冷静总结规律

@1 给当前元素的某一个事件行为绑定方法，当事件行为触发，浏览器会帮我们把绑定的方法执行，此时方法中的this是当前操作的元素本身

 document.body.onclick = function () {
    // this->body
    console.log(this);//body元素
};

@2)函数执行的时候，看它前面有没有点，

1.如果没有就是window（在非严格模式下）this=>window，在严格模式下就是undefined->undefined

2.如果有，点前面是谁，this就是谁

//保证fn不被之后更改 所以用const
 const fn=function fn(){
    console.log(this);
 }
let obj={
  name:"OBG",
    //fn:fn;// ES6语法中，如果属性名和属性值的变量名字相同，我们可以像以下这样简写
    fn
}
//函数执行才能确定this 步骤里有初始化this

fn();//this=>window
obj.fn();//this=>obj

let arr = [10, 20],
push = arr.push;
push(); //this->undefined 因为前面没有.
arr.push(); //this->arr
arr.__proto__.push(); //this->arr.__proto__
Array.prototype.push(); //this->Array.prototype

思考题

i=2 i=i2 i=2+3 i=i5

let x = 3,
    obj = {
        x: 5
    };
obj.fn = (function () {
    this.x *= ++x;
    return function (y) {
        this.x *= (++x) + y;
        console.log(x);
    }
})();
let fn = obj.fn;
obj.fn(6);
fn(4);
console.log(obj.x, x, window.x);

自执行函数里面的this是在非严格模式下是window，严格模式下是undefined

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

 "use strict";
(function(){
  console.log(this);// undefined
})();

回调函数中的this是在非严格模式下是window，严格模式下是undefined

除非在触发回调函数执行的时候，我们自己(或者浏览器)做过一些特殊的处理，更改过其this…

setTimeout(function (){
   console.log(this);
}, 1000);

new构造函数中的this，是当前类的实例https://www.yuque.com/go/doc/44299274

箭头函数中的this是其上级上下文中的THIS

通过bind、call、apply可以改变this的指向

https://www.yuque.com/go/doc/44584151

【this 练习题】

1）

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

(function(){
  this.fn(); //自执行函数里的this是window =>"珠峰培训"
})();

2) 说出里面的this

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

function fn(){
  //这里的this
  //是window
  console.log(this);
}
 box.onclick=function(){
    console.dir(this); //this是当前元素
    fn();
 }

3）

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)