开启严格模式"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

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);

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

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

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

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

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

6、new构造函数中的this，是当前类的实例

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

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

9.关于this的练习题

第一题

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 =>"东方淼淼"
})();

第二题

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

第三题

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

第四题

let obj = {
    fn: (function () {
        return function () {
            console.log(this);
        }
    })()
};
// obj.fn=fn=function() { console.log(this); }
obj.fn(); //this->obj
let fn = obj.fn;
fn(); //this->window/undefined 

第五题

var fullName = 'language'; //window.fullName='language';
var obj = {
    fullName: 'javascript',
    prop: {
        getFullName: function () {
            return this.fullName;
        }
    }
};
console.log(obj.prop.getFullName());
// this->obj.prop   obj.prop.fullName=>undefined
var test = obj.prop.getFullName;
console.log(test());
// this->window   window.fullName=>'language'

第六题

var name = 'window';
var Tom = {
    name: "Tom",
    show: function () {
        // this->window
        console.log(this.name);
    },
    wait: function () {
        // this->Tom
        var fun = this.show;
        fun();
    }
};
Tom.wait(); //'window' 

第七题

window.val = 1;
var json = {
    val: 10,
    dbl: function () {
        this.val *= 2;
    }
}
json.dbl();
// this->json  json.val *= 2 => json.val=20
var dbl = json.dbl;
dbl();
//this->window  window.val *= 2 => window.val=2
json.dbl.call(window);
//this->window  window.val *= 2 => window.val=4
alert(window.val + json.val); //“24” 

第八题

(function () {
    var val = 1; //2
    var json = {
        val: 10,
        dbl: function () {
            val *= 2;
        }
    };
    json.dbl();
    alert(json.val + val); //“12”
})();

第九题

var x = 2;
var y = {
    x: 3,
    z: (function (x) {
        this.x *= x;
        x += 2;
        return function (n) {
            this.x *= n;
            x += 3;
            console.log(x);
        }
    })(x)
    // y.x 会报错：因为开辟堆内存，存储键值对过程中，把自执行函数执行的，但是此时，键值对还没有存放完成，堆内存的地址还没有和y关联在一起呢  y->undefined
};
var m = y.z;
m(4);
y.z(5);
console.log(x, y.x);