几道this指向的面试题.

第一个:

        var value = 10;
        // 隐式转换为window.value = 10;
        var obj = {
            value: 100,
            method:function() {
                var foo = function() {
                    console.log(this.value);  / 10
                    //调用这个方法的是foo,foo指向的是window.相当于window.value
                }
                foo()
                console.log(this.value); // 100.  这个地方的this是obj
            }
        }
        obj.method()

第二个:

        var number = 10;
        function Person() {
            number = 20;      // 重写全局的number
            this.number = 30;
        }
        Person.prototype.getName = function() {
            console.log(this);  //这里的this指向的还是Person
            return this.number
        }
        var p = new Person()

        console.log(p.number);     // 30 p指向Person,当相于Person.number,然后到Person中找
        console.log(p.getName());  // 30

第三个:

            var user = {
            sport: '666',
            data: [
                {name:'张三'},
                {name:'李四'}
            ],
            clickHander:function() {
                this.data.forEach(function(item){
                    console.log(this);  // this指向window
                    console.log(item.name,this.sport); 
                    // 张三undefined  李四undefined
                    // 这个地方为什么访问不到sport,因为this指向window,但是这个地方的sport是在user中
                })
            }
        }
        user.clickHander()
        
        // 如果这里想访问到user中的sport怎么做?
        // 方法1: 改为箭头函数,箭头函数本身没有this,会捕获其上下文的this作为自己的this
        var user = {
            sport: '666',
            data: [
                {name:'张三'},
                {name:'李四'}
            ],
            clickHander:function() {
                this.data.forEach((item) => {
                    console.log(this);  // this指向user
                    console.log(item.name,this.sport); // 张三666  李四666
                })
            }
        }
        user.clickHander()
        // 方法2: 声明一个变量把this存起来
        var user = {
            sport: '666',
            data: [
                {name:'张三'},
                {name:'李四'}
            ],
            clickHander:function() {
                _self = this
                this.data.forEach((item) => {
                    console.log(_self);  // this指向user
                    console.log(item.name,_self.sport); // 张三666  李四666
                })
            }
        }
        user.clickHander()

第四:

        function f(k){
            this.m = k;
            console.log(this);
            return this
        }
        var m = f(1)
        var n = f(2)

        console.log(m.m);  // undefined    我也没弄明白
        console.log(n.m);  // 2