JavaScript函数中的this四种绑定形式


Posted in Javascript onAugust 15, 2017

正文

 javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this

一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最核心的一点——函数中的this总指向调用它的对象,接下来的故事都将围绕这一点展开

(提醒前排的筒子们准备好茶水和西瓜,我要开始讲故事啦!!)

【故事】有一个年轻人叫"迪斯"(this),有一天,迪斯不小心穿越到一个叫 “伽瓦斯克利”(javascript)的 异世界,此时此刻迪斯身无分文, 他首先要做的事情就是——找到他的住宿的地方——调用函数的对象

JavaScript函数中的this四种绑定形式

this的默认绑定

【故事——线路1】如果迪斯(this)直到天黑前都没有找到能收留自己的住所,他眼看就要过上非洲难民的生活, 这时候,一位乐善好施的魔法师村长——window救世主一般地出现了:先住在我家吧! 

JavaScript函数中的this四种绑定形式

【正文】

当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象

function fire () {
  console.log(this === window)
}
fire(); // 输出true

上面的例子我相信对大多数人都很简单,但有的时候我们把例子变一下就会具有迷惑性:

function fire () {
 // 我是被定义在函数内部的函数哦!
  function innerFire() {
 console.log(this === window)
  }
  innerFire(); // 独立函数调用
}
fire(); // 输出true

函数 innerFire在一个外部函数fire里面声明且调用,那么它的this是指向谁呢? 仍然是window

许多人可能会顾虑于fire函数的作用域对innerFire的影响,但我们只要抓住我们的理论武器——没有明确的调用对象的时候,将对函数的this使用默认绑定:绑定到全局的window对象,便可得正确的答案了 

下面这个加强版的例子也是同样的输出true

var obj = {
 fire: function () {
  function innerFire() {
   console.log(this === window)
  }
  innerFire(); // 独立函数调用
  }
}
obj.fire(); //输出 true

【注意】在这个例子中, obj.fire()的调用实际上使用到了this的隐式绑定,这就是下面我要讲的内容,这个例子我接下来还会继续讲解 

【总结】 凡事函数作为独立函数调用,无论它的位置在哪里,它的行为表现,都和直接在全局环境中调用无异 

this的隐式绑定

【故事——线路2】 迪斯(this)穿越来异世界“伽瓦斯克利”(javascript)的时候,刚好身上带了一些钱,于是他找到一个旅馆住宿了下来 

JavaScript函数中的this四种绑定形式

当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了,这时候,通过this可以直接访问所绑定的对象里面的其他属性,比如下面的a属性

var obj = {
  a: 1,
  fire: function () {
   console.log(this.a)
  }
}
obj.fire(); // 输出1

现在我们需要对平常司空见惯的的代码操作做一些更深的思考,首先,下面的这两段代码达到的效果是相同的:

// 我是第一段代码
function fire () {
  console.log(this.a)
}
var obj = {
  a: 1,
  fire: fire
 }
obj.fire(); // 输出1
// 我是第二段代码
var obj = {
  a: 1,
  fire: function () {
    console.log(this.a)
   }
}
obj.fire(); // 输出1

fire函数并不会因为它被定义在obj对象的内部和外部而有任何区别,也就是说在上述隐式绑定的两种形式下,fire通过this还是可以访问到obj内的a属性,这告诉我们: 

1.  this是动态绑定的,或者说是在代码运行期绑定而不是在书写期

2.  函数于对象的独立性, this的传递丢失问题 

(下面的描述可能带有个人的情感倾向而显得不太严谨,但这是因为我希望阅读者尽可能地理解我想表达的意思)
隐式绑定下,作为对象属性的函数,对于对象来说是独立的 

基于this动态绑定的特点,写在对象内部,作为对象属性的函数,对于这个对象来说是独立的。(函数并不被这个外部对象所“完全拥有”) 

我想表达的意思是:在上文中,函数虽然被定义在对象的内部中,但它和“在对象外部声明函数,然后在对象内部通过属性名称的方式取得函数的引用”,这两种方式在性质上是等价的(而不仅仅是效果上) 

定义在对象内部的函数只是“恰好可以被这个对象调用”而已,而不是“生来就是为这个对象所调用的” 

借用下面的隐式绑定中的this传递丢失问题来说明:

var obj = {
  a: 1, // a是定义在对象obj中的属性 1
  fire: function () {
 console.log(this.a)
  }
  }
var a = 2; // a是定义在全局环境中的变量 2
var fireInGrobal = obj.fire; 
fireInGrobal(); // 输出 2

上面这段简单代码的有趣之处在于: 这个于obj中的fire函数的引用( fireInGrobal)在调用的时候,行为表现(输出)完全看不出来它就是在obj内部定义的,其原因在于:我们隐式绑定的this丢失了!! 从而 fireInGrobal调用的时候取得的this不是obj,而是window 

上面的例子稍微变个形式就会变成一个可能困扰我们的bug: 

在上面,我们的

var a = 2;
var obj = {
 a: 1, // a是定义在对象obj中的属性
 fire: function () {
   console.log(this.a)
  }
} 
function otherFire (fn) {
  fn();
} 
otherFire(obj.fire); // 输出2

关键角色是otherFire函数,它接受一个函数引用作为参数,然后在内部直接调用,但它做的假设是参数fn仍然能够通过this去取得obj内部的a属性,但实际上, this对obj的绑定早已经丢失了,所以输出的是全局的a的值(2),而不是obj内部的a的值(1)

在一串对象属性链中,this绑定的是最内层的对象

在隐式绑定中,如果函数调用位置是在一串对象属性链中,this绑定的是最内层的对象。如下所示:

var obj = {
  a: 1,
  obj2: {
   a: 2,
   obj3: {
    a:3,
    getA: function () {
     console.log(this.a) 
     }
   }
  }
}
obj.obj2.obj3.getA(); // 输出3

this的显式绑定:(call和bind方法)

【故事——线路3】 迪斯(this)穿越来异世界“伽瓦斯克利”(javascript),经过努力的打拼,积累了一定的财富,于是他买下了自己的房子

JavaScript函数中的this四种绑定形式

上面我们提到了this的隐式绑定所存在的this绑定丢失的问题,也就是对于 “ fireInGrobal = obj.fire”

fireInGrobal调用和obj.fire调用的结果是不同的,因为这个函数赋值的过程无法把fire所绑定的this也传递过去。这个时候,call函数就派上用场了

call的基本使用方式: fn.call(object)

fn是你调用的函数,object参数是你希望函数的this所绑定的对象。

fn.call(object)的作用:

1.即刻调用这个函数(fn)

2.调用这个函数的时候函数的this指向object对象 

例子:

var obj = {
  a: 1, // a是定义在对象obj中的属性
  fire: function () {
   console.log(this.a)
  }
}
var a = 2; // a是定义在全局环境中的变量 
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出2
fireInGrobal.call(obj); // 输出1

原本丢失了与obj绑定的this参数的fireInGrobal再次重新把this绑回到了obj 

但是,我们其实不太喜欢这种每次调用都要依赖call的方式,我们更希望:能够一次性 返回一个this被永久绑定到obj的fireInGrobal函数,这样我们就不必每次调用fireInGrobal都要在尾巴上加上call那么麻烦了。 

怎么办呢? 聪明的你一定能想到,在fireInGrobal.call(obj)外面包装一个函数不就可以了嘛!

var obj = {
  a: 1, // a是定义在对象obj中的属性
  fire: function () {
  console.log(this.a)
  }
}
var a = 2; // a是定义在全局环境中的变量 
var fn = obj.fire;
var fireInGrobal = function () {
 fn.call(obj) //硬绑定
}
fireInGrobal(); // 输出1

如果使用bind的话会更加简单

var fireInGrobal = function () {
 fn.call(obj) //硬绑定
}

可以简化为:

var fireInGrobal = fn.bind(obj);

call和bind的区别是:在绑定this到对象参数的同时: 

1.call将立即执行该函数

2.bind不执行函数,只返回一个可供执行的函数 

【其他】:至于apply,因为除了使用方法,它和call并没有太大差别,这里不加赘述 

在这里,我把显式绑定和隐式绑定下,函数和“包含”函数的对象间的关系比作买房和租房的区别。 

JavaScript函数中的this四种绑定形式

因为this的缘故

在隐式绑定下:函数和只是暂时住在“包含对象“的旅馆里面,可能过几天就又到另一家旅馆住了

在显式绑定下:函数将取得在“包含对象“里的永久居住权,一直都会”住在这里“

new绑定

【故事】 迪斯(this)组建了自己的家庭,并生下多个孩子(通过构造函数new了许多个对象) 

JavaScript函数中的this四种绑定形式

执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象 

function foo (a) {
  this.a = a;
}
var a1 = new foo (1);
var a2 = new foo (2);
var a3 = new foo (3);
var a4 = new foo (4);
console.log(a1.a); // 输出1
console.log(a2.a); // 输出2
console.log(a3.a); // 输出3
console.log(a4.a); // 输出4

总结

以上所述是小编给大家介绍的JavaScript函数中的this四种绑定形式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue视图不更新情况详解
May 16 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
JS前端可视化canvas动画原理及其推导实现
Aug 05 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 #Javascript
JScript实现表格的简单操作
Aug 15 #Javascript
AngularJS日程表案例详解
Aug 15 #Javascript
jQuery实现菜单栏导航效果
Aug 15 #jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 #Javascript
JScript实现地址选择功能
Aug 15 #Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
You might like
php的curl封装类用法实例
2014/11/07 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
为python设置socket代理的方法
2015/01/14 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
中学生操行评语大全
2014/04/24 职场文书
工作岗位说明书模板
2014/05/09 职场文书
希特勒的演讲稿
2014/05/23 职场文书
目标责任书格式
2014/07/28 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
道歉信范文
2015/05/12 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技