这文章,来帮助大家全方位的解读this。让大家对this,有一个正确的,全面的认知。
在执行上下文的创建阶段,会分别生成变量对象,建立作用域链,确定this指向。
在这里,我们需要得出一个非常重要一定要牢记于心的结论,this的指向,是在函数被调用的时候确定的。 也就是执行上下文被创建时确定的。因此我们可以很容易就能理解到,一个函数中的this指向,可以是非常灵活的。比如下面的例子中,同一个函数由于调用方式的不同,this指向了不一样的对象。
1 2 3 4 5 6 7 8 9 10 11 var a = 10 ;var obj = function fn () fn () ; fn.call(obj);
除此之外,在函数执行过程中,this一旦被确定,就不可更改了。
1 2 3 4 5 6 7 8 9 10 11 var a = 10 ;var obj = { a : 20 } function fn ( ) { this = obj; console .log(this .a); } fn();
全局对象中的this
关于全局对象的this,我之前在总结变量对象的时候提到过,它是一个比较特殊的存在。全局环境中的this,指向它本身。因此,这也相对简单,没有那么多复杂的情况需要考虑。
1 2 3 4 5 6 7 8 9 10 11 12 13 this .a2 = 20 ;var a1 = 10 ;a3 = 30 ; console .log(a1);console .log(a2);console .log(a3);
函数中的this
结论:在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用者函数,被某一个对象所拥有,那么该函数在调用时,内部的 this 指向该对象。如果函数独立调用,那么该函数内部的 this,则指向 undefined 。但是在非严格模式中,当 this 指向 undefined 时,它会被自动指向全局对象。
从结论中我们可以看出,想要准确确定 this 指向,找到函数的调用者以及区分他是否是独立调用就变得十分关键。
1 2 3 4 5 6 7 8 function fn ( ) { 'use strict' ; console .log(this ); } fn(); window .fn();
在上面的简单例子中,fn()
作为独立调用者,按照定义的理解,它内部的 this 指向就为 undefined。而window.fn()
则因为 fn 被 window 所拥有,内部的 this 就指向了 window 对象。
然而请看下面这个例子:
1 2 3 4 5 6 7 8 9 10 11 12 var a = 20 ;var obj = { a : 10 , c : this .a + 20 , fn : function ( ) { return this .a; } } console .log(obj.c);console .log(obj.fn());
在demo03中,对象obj中的c属性使用this.a + 20
来计算,而他的调用者obj.c
并非是一个函数。因此他不适用于上面的规则,我们要对这种方式单独下一个结论。
**当 obj 在全局声明时,无论obj.c
在什么地方调用,这里的 this 都指向全局对象,而当 obj 在函数环境中声明时,这个 this 指向 undefined,在非严格模式下,会自动转向全局对象。**可运行下面的例子查看区别。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 'use strict' ;var a = 20 ;function foo ( ) { var a = 1 ; var obj = { a : 10 , c : this .a + 20 , fn : function ( ) { return this .a; } } return obj.c; } console .log(foo());
实际开发中,并不推荐这样使用this;
上面多次提到的严格模式,需要大家认真对待,因为在实际开发中,现在基本已经全部采用严格模式了,而最新的ES6,也是默认支持严格模式。
再来看一些容易理解错误的例子,加深一下对调用者与是否独立运行的理解。
1 2 3 4 5 6 7 8 9 10 11 var a = 20 ;var foo = { a : 10 , getA : function ( ) { return this .a; } } console .log(foo.getA()); var test = foo.getA;console .log(test());
foo.getA()
中,getA 是调用者,他不是独立调用,被对象 foo 所拥有,因此它的 this 指向了 foo。而test()
作为调用者,尽管他与 foo.getA 的引用相同,但是它是独立调用的,因此 this 指向 undefined,在非严格模式,自动转向全局 window。
灵机一动,再来一个。如下例子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function foo ( ) { console .log(this .a) } function active (fn ) { fn(); } var a = 20 ;var obj = { a : 10 , getA : foo } active(obj.getA);
使用call,apply显示指定this
JavaScript 内部提供了一种机制,让我们可以自行手动设置 this 的指向。它们就是 call 与 apply。所有的函数都具有着两个方法。它们除了参数略有不同,其功能完全一样。它们的第一个参数都为this将要指向的对象。
如下例子所示。fn 并非属于对象 obj 的方法,但是通过call
,我们将 fn 内部的 this 绑定为 obj,因此就可以使用 this.a 访问 obj 的 a 属性了。这就是 call/apply 的用法。
1 2 3 4 5 6 7 8 function fn () var obj = fn .call (obj) ;
而call与applay后面的参数,都是向将要执行的函数传递参数。其中call以一个一个的形式传递,apply以数组的形式传递。这是他们唯一的不同。
1 2 3 4 5 6 7 8 9 function fn (num1, num2) var obj = fn .call (obj, 100, 10) ; fn.apply(obj, [20 , 10 ]);
因为call/apply的存在,这让JavaScript变得十分灵活。因此就让call/apply拥有了很多有用处的场景。简单总结几点,也欢迎大家补充。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function exam(a, b, c, d, e) { // 先看看函数的自带属性 arguments 什么是样子的 console.log(arguments); // 使用call/apply将arguments转换为数组, 返回结果为数组,arguments自身不会改变 var arg = [].slice.call(arguments); console.log(arg); } exam(2 , 8 , 9 , 10 , 3 ); // result:// { '0' : 2 , '1' : 8 , '2' : 9 , '3' : 10 , '4' : 3 }// [ 2 , 8 , 9 , 10 , 3 ]// // 也常常使用该方法将DOM中的nodelist转换为数组// [].slice.call( document.getElementsByTagName('li' ) );
1 2 3 4 5 6 7 8 9 10 var foo = { name : 'joker' , showName : function ( ) { console .log(this .name); } } var bar = { name : 'rose' } foo.showName.call(bar);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var Person = function(name, age) { this .name = name; this .age = age; this .gender = ['man' , 'woman' ]; } var Student = function(name, age, high) { Person.call(this , name, age); this .high = high; } Student.prototype.message = function() { console.log('name:' +this .name+', age:' +this .age+', high:' +this .high+', gender:' +this .gender[0 ]+';' ); } new Student('xiaom' , 12 , '150cm' ).message();
简单给有面向对象基础的朋友解释一下。在Student的构造函数中,借助call方法,将父级的构造函数执行了一次,相当于将Person中的代码,在Sudent中复制了一份,其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确,因此就相当于实现了基层。Student的构造函数等同于下。
1 2 3 4 5 6 7 var Student = function(name, age, high) { this .name = name; this .age = age; this .gender = ['man' , 'woman' ]; this .high = high; }
在向其他执行上下文的传递中,确保this的指向保持不变
如下面的例子中,我们期待的是getA被obj调用时,this指向obj,但是由于匿名函数的存在导致了this指向的丢失,在这个匿名函数中this指向了全局,因此我们需要想一些办法找回正确的this指向。
1 2 3 4 5 6 7 8 9 10 var obj = { a : 20 , getA : function ( ) { setTimeout (function ( ) { console .log(this .a) }, 1000 ) } } obj.getA();
常规的解决办法很简单,就是使用一个变量,将this的引用保存起来。我们常常会用到这方法,但是我们也要借助上面讲到过的知识,来判断this是否在传递中被修改了,如果没有被修改,就没有必要这样使用了。
1 2 3 4 5 6 7 8 9 var obj = { a : 20 , getA : function ( ) { var self = this ; setTimeout (function ( ) { console .log(self.a) }, 1000 ) } }
另外就是借助闭包与apply方法,封装一个bind方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function bind (fn, obj ) { return function ( ) { return fn.apply(obj, arguments ); } } var obj = { a : 20 , getA : function ( ) { setTimeout (bind(function ( ) { console .log(this .a) }, this ), 1000 ) } } obj.getA();
当然,也可以使用ES5中已经自带的bind方法。它与我上面封装的bind方法是一样的效果。
1 2 3 4 5 6 7 8 var obj = { a : 20 , getA : function ( ) { setTimeout (function ( ) { console .log(this .a) }.bind(this ), 1000 ) } }
构造函数与原型方法上的this
在封装对象的时候,我们几乎都会用到this,但是,只有少数人搞明白了在这个过程中的this指向,就算我们理解了原型,也不一定理解了this。所以这一部分,我认为将会为这篇文章最重要最核心的部分。理解了这里,将会对你学习JS面向对象产生巨大的帮助。
结合下面的例子,我在例子抛出几个问题大家思考一下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function Person (name, age) { this .name = name; this .age = age; } Person.prototype.getName = function () { return this .name; } var p1 = new Person('Nick' , 20 );p1.getName();
我们已经知道,this,是在函数调用过程中确定,因此,搞明白new的过程中到底发生了什么就变得十分重要。
通过new操作符调用构造函数,会经历以下4个阶段。
创建一个新的对象;
将构造函数的this指向这个新对象;
执行构造函数的代码,为这个对象添加属性,方法等;
返回新对象。
因此,当new操作符调用构造函数时,this其实指向的是这个新创建的对象,最后又将新的对象返回出来,被实例对象p1接收。因此,我们可以说,这个时候,构造函数的this,指向了新的实例对象,p1。
而原型方法上的this就好理解多了,根据上边对函数中this的定义,p1.getName()
中的getName为调用者,他被p1所拥有,因此getName中的this,也是指向了p1。
this绑定优先级
1 new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
总结
如果函数被new
修饰
1 this 绑定的是新创建的对象,例:var bar = new foo (); 函数 foo 中的 this 就是一个叫foo的新创建的对象 , 然后将这个对象赋给bar , 这样的绑定方式叫 new 绑定 .
如果函数是使用call,apply,bind
来调用的
1 this 绑定的是 call ,apply,bind 的第一个参数.例: foo.call (obj); , foo 中的 this 就是 obj , 这样的绑定方式叫 显性绑定 .
如果函数是在某个 上下文对象 下被调用
1 this 绑定的是那个上下文对象,例 : var obj = { foo : foo }; obj.foo(); foo 中的 this 就是 obj . 这样的绑定方式叫 隐性绑定 .
如果都不是,即使用默认绑定
1 2 例:function foo(){...} foo() ,foo 中的 this 就是 window.(严格模式下默认绑定到undefined). 这样的绑定方式叫 默认绑定 .
常见面试题
第一题
1 2 3 4 5 6 7 8 9 10 11 12 var x = 10 ;var obj = { x : 20 , f : function ( ) { console .log(this .x); var foo = function ( ) { console .log(this .x); } foo(); } }; obj.f();
解析:
考点:函数内的this
1 2 3 4 5 6 7 8 9 10 11 12 var x = 10 ;var obj = { x : 20 , f : function ( ) { console .log(this .x); function foo ( ) { console .log(this .x); } foo(); } }; obj.f();
答案:20 10
第二题
1 2 3 4 5 6 7 8 9 10 function foo (arg ) { this .a = arg; return this }; var a = foo(1 );var b = foo(10 );console .log(a.a); console .log(b.a);
解析:
考点 1. 全局污染 2. this默认绑定
这道题很有意思,问题基本上都集中在第一undefined
上,这其实是题目的小陷阱,但是追栈的过程绝对精彩
让我们一步步分析这里发生了什么:
foo(1)执行,应该不难看出是默认绑定吧 , this指向了window,函数里等价于 window.a = 1,return window;
var a = foo(1) 等价于 window.a = window , 很多人都忽略了 var a 就是window.a,将刚刚赋值的 1 替换掉了。
所以这里的 a 的值是 window , a.a 也是window , 即 window.a = window ; window.a.a = window;
foo(10) 和第一次一样,都是默认绑定,这个时候,将window.a 赋值成 10 ,注意这里是关键,原来window.a = window ,现在被赋值成了10,变成了值类型,所以现在 a.a = undefined。(验证这一点只需要将var b = foo(10);删掉,这里的 a.a 还是window)
var b = foo(10); 等价于 window.b = window;
本题中所有变量的值,a = window.a = 10 , a.a = undefined , b = window , b.a = window.a = 10;
答案 : undefined 10
第三题
1 2 3 4 5 6 7 8 9 10 11 12 13 var x = 10 ;var obj = { x : 20 , f : function ( ) { console .log(this .x); } }; var bar = obj.f;var obj2 = { x : 30 , f : obj.f } obj.f(); bar(); obj2.f();
解析:传说中的送分题,考点,辨别this绑定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var x = 10 ;var obj = { x : 20 , f : function ( ) { console .log(this .x); } }; var bar = obj.f;var obj2 = { x : 30 , f : obj.f } obj.f(); bar(); obj2.f();
答案:20 10 30
第四题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function foo ( ) { getName = function ( ) { console .log (1 ); }; return this ; } foo.getName = function ( ) { console .log(2 );}; foo.prototype.getName = function ( ) { console .log(3 );}; var getName = function ( ) { console .log(4 );};function getName ( ) { console .log(5 );}foo.getName (); getName (); foo().getName (); getName (); new foo.getName (); new foo().getName (); new new foo().getName ();
解析:考点 1. new绑定 2.隐性绑定 3. 默认绑定 4.变量污染(用词不一定准确)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 function foo() { getName = function () { console.log (1 ); }; // 这里的getName 将创建到全局window上 return this; } foo.getName = function () { console.log(2 );}; // 这个getName和上面的不同,是直接添加到foo上的 foo.prototype.getName = function () { console.log(3 );}; // 这个getName直接添加到foo的原型上,在用new创建新对象时将直接添加到新对象上 var getName = function () { console.log(4 );}; // 和foo函数里的getName一样, 将创建到全局window上 function getName () { console.log(5 );} // 同上,但是这个函数不会被使用,因为函数声明的提升优先级最高,所以上面的函数表达式将永远替换 // 这个同名函数,除非在函数表达式赋值前去调用getName(),但是在本题中,函数调用都在函数表达式 // 之后,所以这个函数可以忽略了 // 通过上面对 getName的分析基本上答案已经出来了 foo.getName (); // 2 // 下面为了方便,我就使用输出值来简称每个getName函数 // 这里有小伙伴疑惑是在 2 和 3 之间,觉得应该是3 , 但其实直接设置 // foo.prototype上的属性,对当前这个对象的属性是没有影响的,如果要使 // 用的话,可以foo.prototype.getName() 这样调用 ,这里需要知道的是 // 3 并不会覆盖 2 ,两者不冲突 ( 当你使用new 创建对象时,这里的 // Prototype 将自动绑定到新对象上,即用new 构造调用的第二个作用) getName (); // 4 // 这里涉及到函数提升的问题,不知道的小伙伴只需要知道 5 会被 4 覆盖, // 虽然 5 在 4 的下面,其实 js 并不是完全的自上而下,想要深入了解的 // 小伙伴可以看文章最后的链接 foo().getName (); // 1 // 这里的foo函数执行完成了两件事, 1 \. 将window.getName设置为1 , // 2 \. 返回window , 故等价于 window.getName(); 输出 1 getName (); // 1 // 刚刚上面的函数刚把window.getName设置为1 ,故同上 输出 1 new foo.getName (); // 2 // new 对一个函数进行构造调用 , 即 foo.getName ,构造调用也是调用啊 // 该执行还是执行,然后返回一个新对象,输出 2 (虽然这里没有接收新 // 创建的对象但是我们可以猜到,是一个函数名为 foo.getName 的对象 // 且__proto__属性里有一个getName函数,是上面设置的 3 函数) new foo().getName (); // 3 // 这里特别的地方就来了,new 是对一个函数进行构造调用,它直接找到了离它 // 最近的函数,foo(),并返回了应该新对象,等价于 var obj = new foo(); // obj.getName(); 这样就很清晰了,输出的是之前绑定到prototype上的 // 那个getName 3 ,因为使用new后会将函数的prototype继承给 新对象 new new foo().getName (); // 3 // 哈哈,这个看上去很吓人,让我们来分解一下: // var obj = new foo(); // var obj1 = new obj.getName(); // 好了,仔细看看, 这不就是上两题的合体吗,obj 有getName 3 , 即输出3 // obj 是一个函数名为 foo的对象,obj1是一个函数名为obj.getName的对象
答案:2 4 1 1 2 3 3
参考文章: 全方位解读this 、深入理解this绑定