关于 js 中 this 指向的问题

本文章经过代码的运行来描述 this 的具体指向:

默认绑定

场景一:

console.log('普通状况', this) // window

在普通状态下, this 指向的是全局变量 window

场景二:

function foo() {
 console.log('普通函数体', this)}
foo() // window

在函数体内, this 也是指向全局变量 window

结论一:

在正常,无任何调用的状况下, this 是指向全局变量 window 的

隐式绑定:

场景三:

function get() {
 console.log(this.a);}
var obj = {
 a: 2, get}
obj.get() // 2

在 obj.get 调用下, get 中 this 指向的就是 obj 这个对象

场景四:

var obj2 = {
 obj, a: 1}
obj2.obj.get() // 2

能够看到,尽管有二层调用, this 指向的仍是最近一层中的 this

结论二

从而得出, this 他所在的函数被调用了,那么他就会指向该函数, 而且会指向他最近的一个调用对象

this 丢失的状况:

此种状况是针对 结论二 的不足所做出的补充

场景五:

function get() {
 console.log(this.a);}
var obj = {
 a: 2, get}
// 更换调用方式:
var getIns = obj.get
getIns() // undefined

若是调用对象被赋值, 在指向以后他实际上是并无调用对象的, 固然他也不会指向 window, 因此 this 指向的是 unde

场景六:

var o1 = {
 text: 'o1', fn: function () { return this.text }}
var o3 = {
 text: 'o3', fn: function () { console.log('o3', this) var fn = o1.fn return fn() }}
console.log('o3 丢失 this 的状况', o3.fn())  // undefined

能够看到 即便在 o3 中的 fn 里被调用, this 依旧是处于空的指向
此场景是为了增强场景五所做出的验证

结论三:

若是调用对象被赋值后调用,若是没有绑定 this, 那么他的指向将会丢失

为何会丢失

缘由的话,等你看完这篇文件,大抵能够明白了: http://www.ruanyifeng.com/blo...

显示绑定

场景七:

var getIns = obj.get.bind(obj)
getIns() // 2

套用情景 5 this 丢失的场景, 能够看到, 如今打印的是咱们想要的值了

场景八:

var o3 = {
 text: 'o3', fn: function () { var fn = o1.fn return fn.call(this) }}
console.log('情景 8  o3 丢失 this 的状况修改', o3.fn()) // undefined

该场景使用 call/apply
这两个函数的做用是同样的,惟一不同在于传参:
call(this,1,2,3) apply(this, [1,2,3])

apply 这些函数特殊的地方:

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

经过 apply 直接 push 了多个参数
在 es6 以后 也快使用这种方式: array.push(...elements)

场景九:

class Foo {
 name = "mike"
 say() { console.log(this.a) }
}
var FooIns = new Foo()
FooIns.say() // undefined

class 中的函数, 这也属于一种 this 丢失的场景
熟悉 react 的人应该就知道这个场景

new 绑定

这里说的new 绑定和情景 9 是不同, 说的是构造函数的绑定:

场景十

// es5代码
function Foo2() {
 this.bar = "LiLz"}
const Foo2Ins = new Foo2()
console.log(Foo2Ins.bar) // LiLz

在上面情景一中 this 指向的是 window, 在场景 10 中, 经过 new 成功将 this 绑定在了 Foo2Ins 上

场景十一

class Foo3 {
 constructor() { this.bar = 'lisa' }}
var Foo3Ins = new Foo3()
console.log(Foo3Ins.bar) // lisa

从这里能够看到 new 的做用, 虽然改变指向只是他的一部分功能

结论四

隐式/显示调用能够改变 this 指向,并且比隐式调用的优先级要大

特殊状况-严格模式

场景十二

function foo2() {
 'use strict' console.log('严格模式下的 this', this)
}
foo2() // undefined

能够看到在严格模式下 普通的 this 指向就是会丢失

特殊状况-箭头函数

咱们来看看箭头函数对应的 this 有什么区别

场景十三

const bar = () => {
 'use strict' console.log('箭头函数', this)}
bar() // windows

即便在严格模式下 箭头函数中的 this 也不会是 undefined

场景十四

const get2 = () => {
 console.log(this, this.a);}
var obj3 = {
 a: 2, get2}
obj3.get2() // window, undefined

隐式调用没法改变其指向

场景十五

obj3.get2.bind(obj3)() // 同场景 14
obj3.get2.call(obj3) // 场景 14

结论五

这里能够得出结论, 隐式/显示调用都不能改变箭头函数的指向

场景十六

const Foo4 = () => { this.bar = "LiLz"}
const Foo4Ins = new Foo4()
console.log(Foo4Ins.bar) // TypeError: Foo4 is not a constructor

遇到 new 时, 能够看到箭头函数,他是没法被做为构造函数的

场景十七

class Foo5 {
 name = "mike"
 say = () => { console.log(this.name) }
}
var Foo5Ins = new Foo5()
Foo5Ins.say() // mike

结论六

至此能够得出 this 改变的权重: 箭头函数 = new > bind/apply/call > 函数调用

总结:

• 在正常,无任何调用的状况下, this 是指向全局变量 window 的
• this 他所在的函数被调用了,那么他就会指向该函数, 而且会指向他最近的一个调用对象
• 若是调用对象被赋值后调用,若是没有绑定 this, 那么他的指向将会丢失
• 隐式/显示调用能够改变 this 指向,并且比隐式调用的优先级要大
• 隐式/显示调用都不能改变箭头函数的指向, 箭头函数与 new 的构造函数相矛盾
• this 改变的优先级: 箭头函数 = new > bind/apply/call > 函数调用

本文中的全部例子都在 GitHub 中: https://github.com/Grewer/JsD...