<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* 全局的this 是 window
*
* 1 给当前元素的某个事件行为绑定方法
* 事件触发 执行对应的方法
* 方法中的this 是当前元素本身
* (排除：ie6-8 基于attachEvent实现的DOM2级事件绑定，
* 绑定的方法种的this不是操作的元素, 而是window)
*
* 2 函数执行, 首先看函数名之前有没有 “点”,
* 有 “点”,“点”前面是谁this就是谁，
* 没有 “点” this 就是 window
* (在严格模式下,没有 “点”,方法中的this 是 undefined)
*
* + 自执行函数中的this 一般都是 window/undefined
* + 回调函数中的this 一般都是 window/undefined
*
* 3 构造函数中的this 是当前类的实例
* 4 箭头函数没有自己的this, 用到的this 都是上下文中的this
* 5 基于 call / apply / bind 可以强制改变this的指向
*/
// 1
// document.body.onclick = function(){
// // this -> body
// console.log(this);
// }
// 2
// function fn(){
// console.log(this);
// }
// let obj = {
// name:'Eric',
// fn:function(){
// console.log(this);
// }
// }
// fn() // this -> window
// obj.fn() // this -> {name: "Eric", fn: ƒ}
/**
* 题 1
* */
// var num = 10; // 1 ->60 // 2-> 65
// var obj = {
// num:20 // 30
// }
// obj.fn = (function(num){
// this.num = num * 3
// num++; //21
// return function(n){
// this.num += n;
// num++;
// console.log(num); // 1 ->22 // 2->23
// }
// })(obj.num)
// var fn = obj.fn;
// fn(5) // 22
// obj.fn(10) // 23
// console.log(num,obj.num); // 65 30
/**
* 题 2
* */
// let obj = {
// fn: (function(){
// return function(){
// console.log(this);
// }
// })()
// }
// obj.fn(); // this->obj
// let fn = obj.fn;
// fn(); // this->window
/**
* 题 3
* */
// var fullName = 'language';
// var obj = {
// fullName:"javascript",
// prop:{
// getFullName:function(){
// return this.fullName
// }
// }
// }
// console.log(obj.prop.getFullName()); // undefined
// var test = obj.prop.getFullName
// console.log(test()); // language
/**
* 题 4
* */
// var name = "window";
// var Tom = {
// name:"Tom",
// show:function(){
// console.log(this.name);
// },
// wait:function(){
// var fun = this.show; // fun => tom.show
// fun();
// }
// }
// Tom.wait() // window
/**
* 题 5
* */
// window.val = 1; // 2
// var json = {
// val:10, // 20
// dbl:function(){
// this.val *= 2
// }
// }
// json.dbl();
// var dbl = json.dbl;
// dbl();
// json.dbl.call(window); // this -> window 2 * 2 = 4
// alert(window.val + json.val); // 20 + 4 "24"
/**
* 题 6
* */
// (function(){
// var val = 1; // 2
// var json = {
// val:10,
// dbl:function(){
// val *= 2
// }
// }
// json.dbl();
// alert(json.val + val) // 10 + 2 "12"
// })()
/**
* 题 7
* */
// var x = 3, // 1->12 // 2->13 // 3->234
// obj = {
// x:5 // 1->95
// };
// obj.fn = (function(){
// this.x *= ++x; // 3 * 4 = 12
// return function(y){
// this.x *= (++x) + y; // x = 13 * 13+4 = 234
// console.log(y);
// }
// })()
// var fn = obj.fn ;
// obj.fn(6) // 6
// console.log(x); // 13
// fn(4) // 4
// console.log(obj.x,x); // 95 234
</script>
</body>
</html>
