本文次要在于把握this在JavaScript的指向,理解this是在什么时候确定的,谁决定了this的指向。
4大规定
优先级权重:顺次从上到下,权重值从小到大。
- (优先级最小)默认绑定规定: console.log( this === window ); // true
- (优先级次于后两项)隐式绑定规定:谁调用就指向谁;(隐式失落)。
- (优先级次于new绑定)显示绑定规定:call,apply,bind。
- (优先级最大)new 绑定规定。
this 的默认绑定规定
全局的this默认指向window,如果开启严格模式的话,则this指向undefined。
• 例子1:
console.log(this === window) // true 严格模式下全局的this为undefinedconsole.log({} === {}) // false
- this和window之所以输入的是true,是因为他们指向的是同一个地址;
- 两个对象为什么不相等呢,次要是因为,对象比照的是指针地址,每申明一个对象就开拓一个空间生成一个指针地址指向存数据的中央。
this 的隐式绑定规定
如果办法是通过某个对象点的办法调用的话,则this指向调用的对象,如果是间接调用(自主调用)的话,则this指向window.
• 例子1:
function test(){ console.log(this === window); // true}test() // 能够了解为window.test();
- 函数的独立调用,其实就是相当于window.xxx()的形式调用,因为全局申明的函数都是默认挂载到window上的,所以this也默认指向window。
• 例子2:
var obj = { a: 2, foo: function(){ console.log(this); // obj function test(){ console.log(this); // window } test(); }}obj.foo();
- 因为foo是obj调用,所以foo函数的this应该指向调用他的对象,所以外部打印进去的this为obj;
- 而test尽管是在foo的外部调用,然而属于间接调用所以this仍旧指向window。
this 的显示绑定规定
如果通过call,apply,bind强制更改this指向,则this指向办法传入的第一个参数。
• 例子1
var name = 'test1'var obj = { name: 'test2'}function fn(){ console.log(this.name);}var bindFn = fn.bind(obj);bindFn() // test2fn.call(obj) // test2fn.apply(obj) // test2
- 因为应用了call,apply,bind强行更改了this指向,所以this指向传入的第一个参数(obj)。
this 的new绑定
- 如果构造函数外部没有返回援用类型变量,则构造函数外部会创立一个新的对象,this就是这个对象;
- 如果构造函数外部返回了援用类型变量,则this为返回的这个对象。
• 例子1:
function Body(){ console.log(this); // Body {}}new Body()function Person(){ console.log(this); // {name: "test"} return { name: 'test' }}new Person()
- 因为Body外部没有返回援用类型的数据所以this指向新创建的对象,Person构造函数外部返回了一个对象,所以this则指向返回的对象。
总结:
在js中函数定义时,this的指向是不确定的,只有在执行的时候,能力确定this的指向,所以能够总结成一句话,this指向是依据执行调用时的动静上下文来决定的。