5分钟理解JS中的this关键字

前端开发的技术栈是架构师吗
前端web开发技术
web前端开发技术试题

This 绑定内容与函数无关,而与执行环境有关
看下面这个例子:
javascript 代码

var name = ‘ywx’
var myfunc = function() {
    console.log(this.name)
}
myfunc()

当我们调用 myfunc 函数时,js 引擎会创建一个执行上下文,同时会初始化一个作用域链,此作用域链为:
[[scope chain]] = [
{
Active Object {
arguments: …
this: [global Object],

},
global Object: {
name: ‘zilong’

}
}
]

所以,当我们执行 console.log(this.name)的时候,this 绑定的是全局对象,而我们之前定义的 name 就是属于全局变量。

我们再看一下下面这个例子:

javascript 代码

var name = ‘ywx’
var sex = ‘man’
var myfunc = function(name) {
    this.name = name
}
myfunc.prototype.print = function() {
    console.log(this.name)
    console.log(this.sex)
    console.log(sex)
}
var obj = new myfunc(‘hi’)
obj.print()

RESULTS:
hi
undefined
man

当我们执行 obj 对象的 print 函数的时候,我们的执行上下文的作用域链是这样的:

[[scope chain]] = [
{
Active Object {
arguments: …
this: obj,

},
global Object: {
name: ‘zilong’,
sex: ‘man’,

}
}
]

从这个作用域链,我们可以很清楚地知道上面代码的输出结果。

This 绑定的内容可以被动态修改

同样的是上面那个例子,我们稍微修改一下:

javascript 代码

var name = ‘ywx’
var sex = ‘man’
var myfunc = function(name) {
    this.name = name
}
myfunc.prototype.print = function() {
    console.log(this.name)
    console.log(this.sex)
    console.log(sex)
}.bind(this)
var obj = new myfunc(‘hi’)
obj.print()

RESULTS:
ywx
man
man

我们通过给 myfunc.prototype.print 函数添加了 bind 的调用,我们发现输出的结果完全不同了。因为此时的 this 绑定的是 global 对象了。

同样的,如果我们把代码改成下面的样子:

javascript 代码

var name = ‘ywx’
var sex = ‘man’
var myfunc = function(name) {
    this.name = name
}
myfunc.prototype.print = function() {
    console.log(this.name)
    console.log(this.sex)
    console.log(sex)
}
var obj = new myfunc(‘hi’)
myfunc.prototype.print.call(obj, ‘hi’)

RESULTS:

hi
undefined
man

这个输出结果与我们直接调用 obj.print 是一样的。

但是如果我们改成:

var obj = new myfunc(“hi”);
myfunc.prototype.print.call(this, “hi”);
// 下面的 window 和 this 是等价的。
// myfunc.prototype.print.call(window, “hi”);

输出结果会是:

RESULTS:

ywx
man
man

使用 bind 可以显式指定函数调用时的 this 绑定,而使用 call 可以指定 this 对象的指向,另外,还可以使用 apply 来修改 this 的绑定。call 和 apply 的区别就是 call 后面传参使用的是逗号分隔的参数,而 apply 传递的则是一个参数数组。

巧用闭包消除 This 动态绑定,提高代码可读性

假设我们要把一个外部环境的 this 变量传递到一个内部函数去使用,一般我们会这么做:
javascript 代码

var a = 10
var obj = {
    a: 1,
    b: 2,
    sum: function() {
        var addA = function(a) {
            return this.a + a
        }.bind(this)
        return addA(this.b)
    },
}
console.log(obj.sum())

RESULTS:

3

在声明 addA 的时候,我们使用了 bind(this),那么 addA 函数内部的 this.a 指向的是 obj 对象的 a 变量。如果我们不使用 bind 的话, this 默认指向的是 window 对象,那么输出的结果就是 12 了。

一般情况下面,此时 sum 函数里面的 3 个 this 就容易把人搞晕了,我们通常会通过添加一个 self 或者 that 局部变量来增加代码的可读性,同时也不用手动去调用 bind 函数。

javascript 代码

var a = 10
var obj = {
    a: 1,
    b: 2,
    sum: function() {
        var self = this
        var addA = function(a) {
            return self.a + a
        }
        return addA(this.b)
    },
}
console.log(obj.sum())

RESULTS:

3

这里面的 self 变量利用了闭包的特性,同时让代码更加具有可读性,也消除了不必要的 bind(this)调用。

小结

其实 This 并不复杂,只是跟我们熟悉的面向对象语言有差异罢了,理解了执行上下文,作用域链和活动对象的概念,This 也就明了了。

web前端开发技术认识
web前端开发技术—html
web前端开发技术期末考试
» 本文来自:前端开发者 » 《5分钟理解JS中的this关键字》
» 本文链接地址:https://www.rokub.com/6301.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!