1 //Javascript this 关键字 2 /** 3 * 面向对象语言中 this 表示当前对象的一个引用。 4 但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。 5 1.在对象方法中, this 指向调用它所在方法的对象。 6 2.单独使用 this,它指向全局(Global)对象。 7 3.函数使用中,this 指向函数的所属者。 8 4.严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。 9 5.在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素。 10 6.apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。 11 * */ 12 // 参考: https://www.runoob.com/js/js-this.html 13 14 15 16 function a() 17 { 18 var num = 111; 19 console.log(this.num);//undefined 20 console.log(this);//Window 21 } 22 a(); 23 //调用函数 a(),实际上是 window.a(); 24 //实际调用者是window,this的指向也是window 25 26 /** 27 * this指向是obj,因为调用fun是通过obj.fun()来执行的。 28 * 【this的指向不是创建的时候决定的,而是执行的时候决定的。谁去调用就指向谁】 29 * */ 30 var obj = { 31 num:111, 32 fun:function() 33 { 34 console.log(this.num);//111 35 } 36 }; 37 obj.fun(); 38 39 var obj = { 40 num:111, 41 fun:function() 42 { 43 console.log(this.num);//111 44 } 45 }; 46 window.obj.fun(); 47 48 /** 49 * 1.如果一个函数中有this,但是它没有被上一级调用,那么它就指向window (严格模式除外) 50 * 2.如果一个函数中有this,这个函数有被上一级调用,那么this的指向就是它的上一级的对象。 51 * 3.如果一个函数中有this,【这个函数包含多个对象,尽管这个函数被最外层函数调用,this指向的也只是它上一级的对象】 52 * */ 53 //EXP 54 var obj = { 55 a:10, 56 b:{ 57 a:111, 58 fun:function() 59 { 60 console.log(this.a); 61 } 62 } 63 }; 64 obj.b.fun();//111 65 66 var obj = { 67 a:10, 68 b:{ 69 // a:111, 70 fun:function() 71 { 72 console.log(this.a);//undefined 73 console.log(this);//window 74 } 75 } 76 }; 77 var j = obj.b.fun; 78 j(); 79 //【this永远指向像最后调用它的对象,也就是看它执行的时候谁调用的】 80 //[虽然函数fun是被对象b引用,但将fun赋值给变量j的时候没有执行,所以最终指向的是window.] 81 82 83 84 /** 85 * 构造函数版this 86 * */ 87 function fun() 88 { 89 this.user = "111"; 90 } 91 var a = new fun(); 92 console.log(a.user);//111 93 //【这里a之所以能点出函数fun里面的user,是因为new可以改变this的指向,将这个this指向对象a,为什么说是a对象,因为用了new关键字就是创建一个对象实例,这里用a创建了了一个fun的实例(相当于复制了一份fun到对象a里面.)此时仅仅是创建,并没有执行.而调用这个函数fun的是对象a,那么this指向的自然是对象a,那么为什么a中会有user,因为你已经复制了一份fun到对象a中,用了new关键字就等于复制了一份】 94 95 96 97 /** 98 * 当this遇到return 99 * */ 100 //EXP 101 function fun() 102 { 103 this.user = "111"; 104 return {}; 105 } 106 var a = new fun; 107 console.log(a.user);//undefined 108 109 function fun() 110 { 111 this.user = "111"; 112 return function(){}; 113 } 114 var a = new fun; 115 console.log(a.user);//undefined 116 117 //EXP2 118 function fun() 119 { 120 this.user = "111"; 121 return 1; 122 } 123 var a = new fun; 124 console.log(a.user);//111 125 126 function fun() 127 { 128 this.user = "111"; 129 return undefined; 130 } 131 var a = new fun; 132 console.log(a.user);//111 133 134 //【如果返回值是一个对象,那么this指向的就是那个返回的对象.如果返回值不是一个对象,那么this还是指向函数的实例】 135 function fun() 136 { 137 this.user = "111"; 138 return undefined; 139 } 140 var a = new fun; 141 console.log(a);//fun {user: "111"} 142 143 144 145 //一个特殊的对象null: 146 //虽然null也是对象,但是在这里this还是指向那个函数的实例 147 function fun() 148 { 149 this.user = "111"; 150 return null; 151 } 152 var a = new fun; 153 console.log(a.user);//111 154 155 156 157 /** 158 * 1.在严格版中默认的this不在是window,而是undefined。 159 * 2.new 操作符会改变件数this的指向问题, 160 * */ 161 function fun() 162 { 163 this.num = 111; 164 } 165 var a = new fun(); 166 console.log(a.num);//111 167 168 //为什么this会指向a?,首先new关键字会创建一个空对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空对象代替. 169 //注意: 当你new一个空对象的时候,js内部的实现并不一定是用的apply方法来改变this指向的,这里我只是打个比方而已. 170 //if (this === 动态的可改变的) return true; 171 //??? 172 173 //参考: https://www.cnblogs.com/pssp/p/5216085.html