this的练习题

1、

var num = 10;
var obj = {
    num: 20
};
obj.fn = (function (num) {
    this.num = num * 3;
    num++;
    return function (n) {
        this.num += n;
        num++;
        console.log(num);
    }
})(obj.num);
var fn = obj.fn;
fn(5);
obj.fn(10);
console.log(num, obj.num);


/////////////////////////////////////////////////////////////////////////

var num = 10; //window.num=10
var obj = {
    num: 20
}; //obj=0x000;
obj.fn = (function (num) {
    /!*
     * EC(AN) 「闭包」
     *   作用域链:<EC(AN),EC(G)>
     *   初始THIS:window
     *   形参赋值:num=20  //->21 22 23
     *   变量提升:--
     *!/
    this.num = num * 3; //window.num=num*3=60
    num++;
    return function (n) {
        /!*
         * EC(FN1) -> fn(5) 
         *   作用域链:<EC(FN1),EC(AN)>
         *   初始THIS:window
         *   形参赋值:n=5
         *   变量提升:--
         *!/
        /!*
         * EC(FN2) -> obj.fn(10) 
         *   作用域链:<EC(FN2),EC(AN)>
         *   初始THIS:obj
         *   形参赋值:n=10
         *   变量提升:--
         *!/
        this.num += n; //window.num=window.num+n=65   obj.num=obj.num+n=30
        num++;
        console.log(num); //=>22 23
    }; //obj.fn=0x001; [[scope]]:EC(AN)
})(obj.num);
var fn = obj.fn; //fn=0x001;
fn(5);
obj.fn(10);
console.log(num, obj.num); //=>65 30

注意obj.fn这个函数执行上下文并没有被释放下次 obj.fn(10)用的还是这个

2、

  let obj = {
    fn: (function () {
        return function () {
            console.log(this);
        }
    })()
};
obj.fn();
let fn = obj.fn;
fn();


/* 
// 函数中的THIS是谁，和函数在哪定义的以及在哪执行的都没有关系，按照总结的规律去分析执行主体即可
let obj = {
    fn: (function () {
        return function () {
            console.log(this);
        } //obj.fn=0x000;
    })()
};
obj.fn(); //=>obj
let fn = obj.fn; //fn=0x000;
fn(); //=>window 
*/

3、

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


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' 

4、

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


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

5、

window.val = 1;
var json = {
    val: 10,
    dbl: function () {
        this.val *= 2;
    }
}
json.dbl();
var dbl = json.dbl;
dbl();
json.dbl.call(window);
alert(window.val + json.val);


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

6、

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



/* (function () {
    var val = 1; //->2
    var json = {
        val: 10,
        dbl: function () {
            // this->json
            val *= 2; //val=val*2  此处的val是变量  json.val是对象的属性
        }
    };
    json.dbl();
    alert(json.val + val); //=>"12"
})(); */