专题汇总【this】

this： 函数执行的主体，谁把函数执行的，谁就是函数的执行主体（和函数在哪里定义，在哪里执行的，没有直接的关系）

JS的非严格模式下
1、给元素的某一个事件绑定方法，事件触发，方法执行，绑定的方法中的this就是当前操作的这个DOM元素。

oBox = onclick = function(){
//=>当绑定的方法执行，方法中的this是oBox。
//=》如何让绑定的方法执行：
//1、手动点击oBox，经由浏览器触发点击事件
//2、oBox.onclick();
}
--------------------------------
//=>在IE678下，如果使用的是DOM2事件绑定，方法执行的时候，里面的this不是当前元素而是window

oBox.attachEvent('onclick',function(){
//=>this:window
})

2、自执行函数执行，方法中的this一般都是window

var obj = {
    fn: (function () {
    //=>this:window
        return function () {
        }
    })()
};


~function () {
    //=>this:window
}();

3、方法执行的时候，看方法名之前是否有点，有点的话，点前面是谁就是谁，没有的话，this就是window。

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

//=>数组通过原型查找机制，把Array.prototype上的slice方法找到，并且让方法执行，执行过程中实现数组的按索引查找机制。
[].slice();//=>this:[];
[].__proto__slice();//=>this:[].__proto__
Array.prototype.slice();//=>this:Array.prototype

4、在构造函数执行的时候，函数体中的this都是当前类的实例

function Fn() {
    //=>this:当前Fn的实例（当前案例中的f）；而this.xxx=xxx都是给当前实例设置的私有属性；
    this.xxx=xxx;
}
var f = new Fn();

5、使用Function.prototype上提供的call，apply，bind实现this改变

var obj = {name:'fuckMe'};
function fn(num1,num2) {
    this.total = num1+num2;
}
//=>call基础语法的应用
//fn(10,20);//=>obj中并没有fn这个属性，属性值是undefined，它不能作为函数执行，所以会报错：TypeError（undefined is not a function）
//=>fn.call(obj,10,20)//=>首先让fn中的this指向传递的第一个参数obj，然后执行fn这个属性：此时fn中的this—》obj num1->10 num2->20
fn.call();//=>fn中的this:window,num1=num2=undefined,这样写和fn（）没区别

fn.call(null);
fn.call(undefined);//=>第一个参数不管写的是null还是undefined都代表没有指向的this，所以函数中的this任然是window

-------------------------

//apply的语法和作用和call基本上完全类似，只有一个区别
fn.call(obj,10,20);
//<=>
fn.apply(obj,[10,20]);//=>apply方法调用的时候，第一个参数是this指向，第二个参数是一个数组，数组中包含了所有需要给函数传递的实参（语法要求是写成一个数组，但是和call一样也是一项项的给形参赋值的）

之前总结的所有this情况，遇到call，都以call和apply为主。

~function () {
    //=>this:obj
}.call(obj);

Array.prototype.slice.call(arguments);//=>slice中的this：arguments

var obj = {name:'fuckMe'};
function fn(num1,num2) {
    this.total = num1+num2;
}
//=>bind的用法
fn.call(obj,10,20);//=>改变fn中的this，而且把fn立即执行了。但是bind不是，bind只有在

6、在ES6中，新增加了箭头函数，箭头函数中没有执行主体，箭头函数中的this会继承它宿主环境中的this

var obj = {
//=>this:obj
    fn:function(){
        setTimeout(function(){
//=>this:window,不管在哪里执行，定时器中的this都是window
        },1000)
    }
}；
obj.fn();
//=>现在我想让定时器里面的this也变成obj
//=>方法一
 setTimeout(function(){
//=>this:是
        }.bind(this)1000);
//=》方法二
        var _this = this;
        setTimeout(function(){
//=>_this.name = 'xxx';
        },1000);
//=>方法三
setTimeout(()=>{
//=>this:obj 箭头函数中的this继承宿主环境中的this
},1000);

JS严格模式下的this情况

"use strict";//=>代码第一行加上这句话，就开启了JS中的严格模式

function fn(){
    "use strict";
//=>当前作用域中使用严格模式（也需要处于当前作用域第一行）
}

非严格模式下不明确执行主体，浏览器认为执行主体默认是window（this一般都是window）；但是在严格模式下，执行主体不明确，this是undefined

"use strict"
~function(){
//=>this:undefined
}();

fn();//=>this:undefined
window.fn();//=>this:window
fn.call();//=>this:this:undefined
fn.call(null/undefined);//=>this:null/undefined