记录;
这四种绑定分类是基于调用点(call site),即函数是在哪里被谁调用的。也就是说this指向谁,跟函数在哪里定义没有关系,而是取决于被谁调用,this只会指向它的上一级对象,不管这个对象中有没有this要的东西。
-
箭头函数
-
关键字new调
-
显式绑定
-
隐式绑定
-
默认绑定
//案例1 function a(){ var user = "张三"; console.log(this.user); //undefined console.log(this); //Window } a(); //这边是window调用的 所以指向window
//案例2 var o = { user:"张三",
fn:function(){ console.log(this.user); //张三 } } o.fn(); //这边是对象o调用的 所以指向对象o//案例3 var o = { user:"张三",
fn:function(){ console.log(this.user); //张三 } } window.o.fn(); // 这里虽然指向window,但我们创建的变量实际上是给window添加属性,所以这里可以用window.o对象,//案例4 var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //12 } } } o.b.fn(); //函数的上级对象为b,所以在b中查找a,为12,如果此时没有a属性,则为undefined
//案例5 var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn; //将fn赋值给j j(); //这时调用相当于fn在window环境下
//案例6 function Fn(){ this.user = "张三"; } var a = new Fn(); console.log(a.user); //张三 new创建了对象实例并复制了一份fn,最后指向对象a
//案例7 function foo() { this.baz = "baz"; console.log(this.bar + " " + baz); //undefined undefined } var bar = "bar"; var baz = new foo(); //baz变量并没有bar属性,此时baz只定义未赋值,所以也是undefined
//案例8 function Person(){ this.age = 18; setTimeout(function () { console.log(this.age); // 输出undefined }, 1000); } var p = new Person(); //setTimeout在window下执行
function Person(){ this.age = 18; setTimeout(()=> { console.log(this.age); // 输出10 }, 1000); } var p = new Person(); //箭头函数会限制在当前{}下执行,指向Person这个函数
//案例9 function fn()
{
this.user = '张三';
return {}; // 或者return function(){} } var a = new fn;
console.log(a.user); //undefined 如果返回值是一个对象,那么this指向的就是返回的对象//案例10 function fn()
{
this.user = '张三'; return 1; } var a = new fn;
console.log(a.user); //张三 返回值不是对象,那么this还是指向函数实例(null是一个特例,指向实例)
一点点进步吧!!!