详细讲解JavaScript中的this绑定


Posted in Javascript onOctober 10, 2016

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 的绑定规则也是四种绑定规则中最简单的一种,就是绑定在全局作用域上。

默认绑定里的严格模式

在 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来调用函数,会自动执行下面的操作。

  1. 创建一个全新的对象
  2. 这个新对象会被执行原型连接
  3. 这个新对象会绑定到函数调用的this
  4. 如果函数没有返回其他对象,那么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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
js实现鼠标拖曳效果
Dec 30 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 #Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 #Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 #Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 #Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 #Javascript
js实现弹窗居中的简单实例
Oct 09 #Javascript
老生常谈Javascript中的原型和this指针
Oct 09 #Javascript
You might like
从手册去理解分析PHP session机制
2011/07/17 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python+django加载静态网页模板解析
2017/12/12 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
QML用PathView实现轮播图
2020/06/03 Python
虚拟机下载python是否需要联网
2020/07/27 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
法律六进活动方案
2014/03/13 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015年工商所工作总结
2015/05/21 职场文书
走进科学观后感
2015/06/18 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
python实现学生信息管理系统(面向对象)
2022/06/05 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL