箭头函数及this指向问题

Posted 2021-01-30 lujunan

function sy() {
                x = 511
                console.log(‘sy是个萌妹‘)
            }
            let fc = new sy();
            //箭头函数是匿名函数，不能作为构造函数，不能使用new,但是上面的普通的函数是可以的 构造函数首字母一般大写     var array = new Array();
            //构造函数和实例化对象 ：https://www.cnblogs.com/mylove103104/p/4590715.html
            //https://www.cnblogs.com/Home-Yzz/p/8495826.html
            console.log(fc)
            console.log(sy(), x)
            let fun = () => {
                return 5
            }

            console.log(fun())

            function A(a) {
                console.log(arguments);
            }
            A(1, 2, 3, 4, 5, 8); //  [1, 2, 3, 4, 5, 8, callee: ?, Symbol(Symbol.iterator): ?]

            let B = (rest) => {
                //箭头函数不绑定arguments，取而代之用rest参数...解决
                console.log(rest);
            }
            B(2, 92, 32, 32); // Uncaught ReferenceError: arguments is not defined

            let C = (...c) => {
                console.log(c);
            }
            C(3, 82, 32, 11323); // [3, 82, 32, 11323]

            var obj = {
                //箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
                a: 10,
                b: () => {
                    console.log(this.a); // undefined
                    console.log(this); // Window {postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window, …}
                },
                c: function() {
                    console.log(this.a); // 10
                    console.log(this); // {a: 10, b: ?, c: ?}
                }
            }
            obj.b();
            obj.c();

            var obj = {
                a: 10,
                b: function() {
                    console.log(this.a); //10
                },
                c: function() {
                    return() => {
                        console.log(this.a); //10
                    }
                }
            }
            obj.b();
            obj.c()();

            function A_() {
                function B_() {
                    console.log(‘Hello Closure!‘);
                }
                return B_;
            }
            var C_ = A_()(); // Hello Closure!            
            //闭包    https://www.cnblogs.com/yunfeifei/p/4019504.html
            //https://www.cnblogs.com/onepixel/p/5062456.html   多看这个，这个大佬牛逼

            (function(document) {
                var viewport;
                var obj = {
                    init: function(id) {
                        viewport = document.querySelector(‘#‘ + id);

                    },
                    addChild: function(child) {
                        viewport.appendChild(child);

                    },
                    removeChild: function(child) {
                        viewport.removeChild(child);

                    }
                }
                window.jView = obj;
                console.log(window.jView)
                //    obj 是在函数 f 中定义的一个对象，这个对象中定义了一系列方法， 执行window.jView = obj 就是在 window 全局对象定义了一个变量 jView，
                //并将这个变量指向 obj 对象，即全局变量 jView 引用了 obj . 而 obj 对象中的函数又引用了函数 f 中的变量 viewport ,因此函数 f 中的 viewport 不会被 GC 回收，
                //viewport 会一直保存到内存中，所以这种写法满足了闭包的条件
            })(document);

            (function() {
                console.log(this) //window 一看就是非严格模式
            })(document) //document是window下挂载的一个属性===这里应该是理解为调用本身这个函数

            function f2() {
                "use strict"; // 这里是严格模式
                console.log(this)
            }
            f2();

            let go = () => {
                console.log(this) //当然在匿名函数也是指向window
            }
            go()
            //https://www.cnblogs.com/dongcanliang/p/7054176.html 箭头函数this 的使用

敲代码实践出真知，代码里面有借鉴的链接，可以看一看。