未加星标

JavaScript中this绑定详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

this 可以说是 javascript 中最耐人寻味的一个特性,就像高中英语里各种时态,比如被动时态,过去时,现在时,过去进行时一样,无论弄错过多少次,下一次依然可能弄错。本文启发于《你不知道的JavaScript上卷》,对 javasript 中的 this 进行一个总结。

学习 this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域。 this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用。

默认绑定

在 javascript 中 ,最常用的函数调用类型就是 独立函数调用 ,因此可以把这条规则看作是无法应用其他规则时的默认规则。如果在调用函数的时候,函数不带任何修饰,也就是“光秃秃”的调用,那就会应用 默认绑定规则

function sayLocation() { console.log(this.atWhere) } var atWhere = "I am in global" sayLocation() // 默认绑定,this绑定在全局对象,输出 “I am in global”

再看一个例子

var name = "global" function person() { console.log(this.name) // (1) "global" person.name = 'inside' function sayName() { console.log(this.name) // (2) "global" 不是 "inside" } sayName() // 在person函数内部执行sayName函数,this指向的同样是全局的对象 } person()

在这个例子中, person 函数在全局作用域中被调用,因此第(1)句中的 this 就绑定在了全局对象上(在浏览器中是是 window ,在node中就是 global ),因此第(1)句自然输出的是一个全局对象的 name 属性,当然就是 "global" 了。 sayName 函数在person函数内调用,即使这样第(2)句中的 this 指代的仍然是全局对象,即使 person 函数设置了 name 属性。

这就是 默认绑定规则 ,它是 javascript 中最常见的一种函数调用模式, this 的绑定规则也是四种绑定规则中最简单的一种,就是 函数在哪个作用域被调用,this 就绑定在这个作用域上 。

默认绑定里的严格模式

在 javascript 中,如果使用了严格模式,则 this 不能绑定到全局对象。还是以第一个例子,只不过这次加上了严格模式声明

'use strict' function sayLocation() { console.log(this.atWhere) } var atWhere = "I am in global" sayLocation() // Uncaught TypeError: Cannot read property 'atWhere' of undefined

可以看出,在严格模式下,把 this 绑定到全局对象上时,实际上绑定的是 undefined ,因此上面这段代码会报错。

隐式绑定

当函数在调用时,如果函数有所谓的“落脚点”,即有上下文对象时,隐式绑定规则会把函数中的 this 绑定到这个上下文对象。如果觉得上面这段话不够直白的话,还是来看代码。

function say() { console.log(this.name) } var obj1 = { name: "zxt", say: say } var obj2 = { name: "zxt1", say: say } obj1.say() // zxt obj2.say() // zxt1

很简单是不是。在上面这段代码中, obj1 , obj2 就是所谓的 say 函数的落脚点,专业一点的说法就是上下文对象,当给函数指定了这个上下文对象时,函数内部的 this 自然指向了这个上下文对象。这也是很常见的一种函数调用模式。

隐式绑定时丢失上下文 function say() { console.log(this.name) } var name = "global" var obj = { name: "inside", say: say } var alias = obj.say // 设置一个简写 (1) alias() // 函数调用 输出"global" (2)

可以看到这里输出的是 ”global“ ,为什么就和上例中不一样,我们明明只是给 obj.say 换了个名字而已?

首先我们来看上面第(1)句代码,由于在 javascript 中,函数是对象,对象之间是引用传递,而不是值传递。因此,第(1)句代码只是 alias = obj.say = say ,也就是 alias = say , obj.say 只是起了一个桥梁的作用, alias 最终引用的是 say 函数的地址,而与 obj 这个对象无关了。这就是所谓的”丢失上下文“。最终执行 alias 函数,只不过简单的执行了 say 函数,输出 "global" 。

显式绑定

显式绑定,顾名思义,显示地将this绑定到一个上下文,javascript中,提供了三种显式绑定的方法, apply , call , bind 。 apply 和 call 的用法基本相似,它们之间的区别是:

apply(obj,[arg1,arg2,arg3,...] 被调用函数的参数以数组的形式给出

call(obj,arg1,arg2,arg3,...) 被调用函数的参数依次给出

而 bind 函数执行后,返回的是一个新函数。下面以代码说明。

// 不带参数 function speak() { console.log(this.name) } var name = "global" var obj1 = { name: 'obj1' } var obj2 = { name: 'obj2' } speak() // global 等价于speak.call(window) speak.call(window) speak.call(obj1) // obj1 speak.call(obj2) // obj2

因此可以看出, apply , call 的作用就是给函数绑定一个执行上下文,且是显式绑定的。因此,函数内的this自然而然的绑定在了 call 或者 apply 所调用的对象上面。

// 带参数 function count(num1, num2) { console.log(this.a * num1 + num2) } var obj1 = { a: 2 } var obj2 = { a: 3 } count.call(obj1, 1, 2) // 4 count.apply(obj1, [1, 2]) // 4 count.call(obj2, 1, 2) // 5 count.apply(obj2, [1, 2]) // 5

上面这个例子则说明了 apply 和 call 用法上的差异。

而 bind 函数,则返回一个绑定了指定的执行上下文的新函数。还是以上面这段代码为例

// 带参数 function count(num1, num2) { console.log(this.a * num1 + num2) } var obj1 = { a: 2 } var bound1 = count.bind(obj1) // 未指定参数 bound1(1, 2) // 4 var bound2 = count.bind(obj1, 1) // 指定了一个参数 bound2(2) // 4 var bound3 = count.bind(obj1, 1, 2) // 指定了两个参数 bound3() //4 var bound4 = count.bind(obj1, 1, 2, 3) // 指定了多余的参数,多余的参数会被忽略 bound4() // 4

所以, bind 方法只是返回了一个新的函数,这个函数内的this指定了执行上下文,而返回这个新函数可以接受参数。

new 绑定

最后要讲的一种 this 绑定规则,是指通过 new 操作符调用构造函数时发生的 this 绑定。首先要明确一点的是,在 javascript 中并没有其他语言那样的类的概念。构造函数也仅仅是普通的函数而已,只不过构造函数的函数名以大写字母开头,也只不过它可以通过 new 操作符调用而已.

function Person(name,age) { this.name = name this.age = age console.log("我也只不过是个普通函数") } Person("zxt",22) // "我也只不过是个普通函数" console.log(name) // "zxt" console.log(age) // 22 var zxt = new Person("zxt",22) // "我也只不过是个普通函数" console.log(zxt.name) // "zxt" console.log(zxt.age) // 22

上面这个例子中,首先定义了一个 Person 函数,既可以普通调用,也可以以构造函数的形式的调用。当普通调用时,则按照正常的函数执行,输出一个字符串。 如果是通过一个 new 操作符,则构造了一个新的对象。那么,接下来我们再看看两种调用方式, this 分别绑定在了何处首先普通调用时,前面已经介绍过,此时应用默认绑定规则, this 绑定在了全局对象上,此时全局对象上会分别增加 name 和 age 两个属性。当通过 new 操作符调用时,函数会返回一个对象,从输出结果上来看 this 对象绑定在了这个返回的对象上。

因此,所谓的 new 绑定是指通过 new 操作符来调用函数时,会产生一个新对象,并且会把构造函数内的 this 绑定到这个对象上。

事实上,在 javascript 中,使用 new 来调用函数,会自动执行下面的操作。

创建一个全新的对象

这个新对象会被执行原型连接

这个新对象会绑定到函数调用的 this

如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象

四种绑定的优先级

上面讲述了 javascript 中四种 this 绑定规则,这四种绑定规则基本上涵盖了所有函数调用情况。但是如果同时应用了这四种规则中的两种甚至更多,又该是怎么样的一个情况,或者说这四种绑定的优先级顺序又是怎么样的。

首先,很容易理解, 默认绑定的优先级是最低的 。这是因为只有在无法应用其他 this 绑定规则的情况下,才会调用默认绑定。那隐式绑定和显式绑定呢?还是上代码吧,代码可从来不会说谎。

function speak() { console.log(this.name) } var obj1 = { name: 'obj1', speak: speak } var obj2 = { name: 'obj2' } obj1.speak() // obj1 (1) obj1.speak.call(obj2) // obj2 (2)

所以在上面代码中,执行了 obj1.speak() , speak 函数内部的 this 指向了 obj1 ,因此(1)处代码输出的当然就是 obj1 ,但是当显式绑定了 speak 函数内的 this 到 obj2 上,输出结果就变成了 obj2 ,所有从这个结果可以看出 显式绑定 的优先级是要高于 隐式绑定 的。事实上我们可以这么理解 obj1.speak.call(obj2) 这行代码, obj1.speak 只是间接获得了 speak 函数的引用,这就有点像前面所说的 隐式绑定丢失了上下文 。好,既然 显式绑定 的优先级要高于 隐式绑定 ,那么接下来再来比较一下new 绑定和显式绑定。

function foo(something) { this.a = something } var obj1 = {} var bar = foo.bind(obj1) // 返回一个新函数bar,这个新函数内的this指向了obj1 (1) bar(2) // this绑定在了Obj1上,所以obj1.a === 2 console.log(obj1.a) var baz = new bar(3) // 调用new 操作符后,bar函数的this指向了返回的新实例baz (2) console.log(obj1.a) console.log(baz.a)

我们可以看到,在(1)处, bar 函数内部的 this 原本指向的是 obj1 ,但是在(2)处,由于经过了 new 操作符调用, bar 函数内部的 this 却重新指向了返回的实例,这就可以说明 new 绑定 的优先级是要高于 显式绑定 的。

至此,四种绑定规则的优先级排序就已经得出了,分别是

new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定

箭头函数中的this绑定

箭头函数是ES6里一个重要的特性。

箭头函数的 this 是根据外层的(函数或者全局)作用域来决定的。函数体内的 this 对象指的是定义时所在的对象,而不是之前介绍的调用时绑定的对象。举一个例子

var a = 1 var foo = () => { console.log(this.a) // 定义在全局对象中,因此this绑定在全局作用域 } var obj = { a: 2 } foo() // 1 ,在全局对象中调用 foo.call(obj) // 1,显示绑定,由obj对象来调用,但根本不影响结果

从上面这个例子看出,箭头函数的 this 强制性的绑定在了箭头函数定义时所在的作用域,而且无法通过显示绑定,如 apply , call 方法来修改。在来看下面这个例子

// 定义一个构造函数 function Person(name,age) { this.name = name this.age = age this.speak = function (){ console.log(this.name) // 普通函数(非箭头函数),this绑定在调用时的作用域 } this.bornYear = () => { // 本文写于2016年,因此new Date().getFullYear()得到的是2016 // 箭头函数,this绑定在实例内部 console.log(new Date().getFullYear() - this.age) } } } var zxt = new Person("zxt",22) zxt.speak() // "zxt" zxt.bornYear() // 1994 // 到这里应该大家应该都没什么问题 var xiaoMing = { name: "xiaoming", age: 18 // 小明永远18岁 } zxt.speak.call(xiaoMing) // "xiaoming" this绑定的是xiaoMing这个对象 zxt.bornYear.call(xiaoMing) // 1994 而不是 1998,这是因为this永远绑定的是zxt这个实例

因此 ES6 的箭头函数并不会使用四条标准的绑定规则,而是根据当前的词法作用域来决定 this ,具体来说就是,箭头函数会继承 外层函数调用的this绑定 ,而无论外层函数的 this 绑定到哪里。

小结

以上就是 javascript 中所有 this 绑定的情况,在es6之前,前面所说的四种绑定规则可以涵盖任何的函数调用情况,es6标准实施以后,对于函数的扩展新增了箭头函数,与之前不同的是, 箭头函数的作用域位于箭头函数定义时所在的作用域 。

而对于之前的四种绑定规则来说,掌握每种规则的调用条件就能很好的理解 this 到底是绑定在了哪个作用域。

全文完

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava浏览器
分页:12
转载请注明
本文标题:JavaScript中this绑定详解
本站链接:http://www.codesec.net/view/480352.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(29)