箭头函数、普通函数this指向

// "use strict";

        // 全局

        // 普通函数

        // 严格模式下 undefined

        // 非严格模式下 window

        // 箭头函数

        // 严格模式下 window

        // 非严格模式下 window

        //

        // function show() {

        //     console.log(this);

        // }

        // show();

        // const show = () => {

        //     console.log(this);

        // }

        // show();

 

        // -------------------------------------------------------------------------------------------------------

        // 方法中

        // 普通函数

        // 严格模式下  当前方法属于谁 this就是谁 当前是 arr数组

        // 非严格模式下 当前方法属于谁 this就是谁 当前是 arr数组

        // var arr = [1, 23, 4, 5];

        // arr.onTest = function () {

        //     console.log(this);

        // }

        // arr.onTest();

        // 箭头函数

        // 严格模式下 window

        // 非严格模式下 window

        // var arr = [1, 23, 4, 5];

        // arr.onTest = () => {

        //     console.log(this);

        // }

        // arr.onTest();

        // -------------------------------------------------------------------------------------------------------

        // 事件中

        // 普通函数

        // 严格模式下  当前发生事件的元素

        // 非严格模式下 当前发生事件的元素

        // document.onclick = function () {

        //     console.log(this);

        // }

        // 箭头函数

        // 严格模式下 window

        // 非严格模式下 window

        // document.onclick = () => {

        //     console.log(this);

        // }

        // arr.onTest();

        // -------------------------------------------------------------------------------------------------------

        // "use strict";

        // 定时器中

        // 普通函数

        // 严格模式下  window

        // 非严格模式下 window

        // setTimeout(() => {

        //     console.log(this);

        // }, 100);

        // 箭头函数

        // 严格模式下 window

        // 非严格模式下 window

        // setTimeout(() => {

        //     console.log(this);

        // }, 100);

        // -------------------------------------------------------------------------------------------------------

        // "use strict";

        // new

        // 普通函数

        // 严格模式下  当前空对象

        // 非严格模式下 当前空对象

        // function Person() {

        //     console.log(this);

        // }

        // new Person();

        // 箭头函数

        // 严格模式下 报错 箭头函数中不存在

        // ** 箭头函数本身就没有this，所以就不会存在什么构造函数了

        // ** 也就是说箭头函数本身不能使用new

        // 非严格模式下 报错 箭头函数中不存在

        // const Person = () => {

        //     console.log(this);

        // }

        // new Person();

        // -------------------------------------------------------------------------------------------------------

        // 箭头函数 有外层函数嵌套,因为箭头函数就没有自己的this

        // 所以对于箭头函数来说一般用的就是自己外层块的this以及this指向

        // function Test() {

        //     setTimeout(_ => {

        //         console.log(`id:${this.id}`);

        //     }, 100)

        // }

        // var a = 999

        // Test.call({ id: 99999999996 });  //id:99999999996

        // -------------------------------------------------------------------------------------------------------

        // 普通函数 不会根据父级的块this指向进行改变

        // 所以普通函数的this指向，只会跟当前的this指向有关系

        // 当前的this指向就是window  var a=12 就在window上边

        // function Test() {

        //     setTimeout(function () {

        //         console.log('id:', this.id);

        //     }, 100);

        // }

        // var id = 21;

        // Test.call({ id: 42 });  // 21

        // -------------------------------------------------------------------------------------------------------

 

        // const cat = {

        //     lives: 9,

        //     jumps: () => {

        //         this.lives--;

        //         console.log(`this:${this},this.lives:${this.lives}`);

        //     }

        // }

        // cat.jumps();

        // 当前执行结果  this:[object Window],this.lives:NaN

        // -------------------------------------------------------------------------------------------------------

 

        // 原因是箭头函数虽然是对象的属性，但是定义该箭头函数时是在全局的上下文环境，对象不是一个作用域，

        // 所以定义时的this就指向全局对象或者这样解释，定义cat的时候，cat是没有this的，

        // 所以在定义里面的箭头函数的时候this自然就指向了全局对象

        // 箭头函数作为回调函数

        // var handler = {

        //     id: '123456',

        //     init: function () {

        //         // document.addEventListener('click',

        //         //     event => this.doSomething(event.type), false);

        //         // document.onclick = () => {

        //         //     function _() {

        //         //         console.log(this.id, this);

        //         //     }

        //         //     _();

        //         // }

        //         // document.onclick = function () {

        //         //     this.doSomething();

        //         // }.bind(this);

        //     },

        //     doSomething: function (type) {

        //         console.log('Handling ' + type + ' for ' + this.id);

        //     }

        // };

        // handler.init()

        // init函数执行的时候 this指向就是当前对象

        // this.doSomething() 调用时this 一直就是当前对象

        //如果父级是箭头函数 this指向就是当前对象就可以调用到 当前 doSomething 这个方法

        // 但如果父级是普通函数，this指向就会发生改变 就不会调用 doSomething 这个方法

        // -------------------------------------------------------------------------------------------------------

 

        // function foo() {

        //     return () => {

        //         return () => {

        //             return () => {

        //                 console.log('id:', this.id);

        //                 // 所有的箭头函数都没有自己的this，指向的都是foo函数的this

        //             };

        //         };

        //     };

        // }

        // // 其实内部的箭头函数并不是一开始就定义的，而是执行外层函数的时候才定义了箭头函数，这时候外层的foo已经绑定好了this

        // // 箭头函数的this指向只会跟最外层的this指向有关

        // var f = foo.call({ id: 1 });

        // var t1 = f.call({ id: 2 })()(); // id: 1

        // var t2 = f().call({ id: 3 })(); // id: 1

        // var t3 = f()().call({ id: 4 }); // id: 1