你真的了解this指向吗？

前言相信很多人都对JavaScript中的this指向问题一知半解，所以今天就来详细看看它到底是怎么判断的。一. 先看几道题 var length = 10; function fn() { console.log(this.length); } var obj = { length: 5, method: function(fn) { fn(); arguments0; } }; obj.method(fn, 1); // 10 2 var name = ‘window’; function f1() { var name = ‘f1’; return function f2() { var name = ‘f2’; console.log(this.name); } } var foo = f1(); var bar = { name: ‘bar’, foo: foo }; foo(); // window bar.foo(); // barvar name = ‘window’; var bar = { name: ‘bar’, foo: function () { var self = this; console.log(this.name); console.log(self.name); (function () { console.log(this.name); console.log(self.name); })() } }; bar.foo(); // bar bar window bar var name = ‘window’; function f1() { var name = ‘f1’; return () => { var name = ‘f2’; console.log(this.name); } } var foo = f1(); var bar = { name: ‘bar’, foo: foo }; foo(); // window bar.foo(); // window二. this绑定规则1.绑定默认当其他规则无法应用时将采用默人绑定默认绑定将会绑定到全局对象严格模式（strict mode）下不能讲全局对象用于默认绑定function foo() { console.log(this === window); }foo() // truefunction bar() { “use strict”; console.log(this === window); console.log(this); }bar() // false undefined2.隐式绑定如果函数引用有上下文对象时，this将会绑定到这个对象。椎确来说是函数调用时是否有引用上下文对象。 var name = ‘window’; function foo() { console.log(this.name); } var obj = { name: ‘obj’, foo: foo }; obj.foo(); // obj 隐式绑定，上下文对象obj var bar = obj.foo; bar(); // window 无上下文对象3.显示绑定这也是常用的的方式：call、apply、bind 就不一一举例了。 function foo() { console.log(this.name); } var obj = { name: ‘obj’ }; foo.call(obj) // obj4.new绑定 var a; function foo(a) { this.a = a } var bar = new foo(2); console.log(a); //undefined console.log(bar.a); // 2 this了bar三.优先级 var a; function foo(a) { this.a = a; } var obj = { foo: foo }; var obj2 = {}; console.log(a); // undefined obj.foo(1); console.log(obj.a); // 1 obj.foo.call(obj2, 2); console.log(obj2.a); // 2 var baz = obj.foo.bind(obj2); var bar = new baz(3); console.log(bar.a); // 3从上面的代码可以看出优先级从高到低依次是：new绑定、显示绑定、隐式绑定、默认绑定。