js this 绑定机制深入详解


Posted in Javascript onApril 30, 2020

本文实例讲述了js this 绑定机制。分享给大家供大家参考,具体如下:

函数调用位置

与词法作用域相反的是,this的指向由函数运行时决定,它是动态的,随着函数调用位置变化而变化。

要理解 this,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)。只有仔细分析调用位置才能回答这个问题:这个this到底引用的是什么?

function baz() {
// 当前调用栈是:baz
// 因此,当前调用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar的调用位置
}
function bar() {
// 当前调用栈是baz -> bar
// 因此,当前调用位置在baz中
console.log( "bar" );
foo(); // <-- foo的调用位置
}
function foo() {
// 当前调用栈是baz -> bar -> foo
// 因此,当前调用位置在bar中
console.log( "foo" );
}
baz(); // <-- baz的调用位置

多数现代桌面浏览器都内置了开发者工具,其中包含JavaScript调试器。你可以在工具中给函数的第一行代码设置一个断点,或者直接在第一行代码之前插入一条 debugger;语句。运行代码时,调试器会在那个位置暂停,同时会展示当前位置的函数调用列表,这就是你的调用栈。因此,如果你想要分析this的绑定,使用开发者工具得到调用栈,然后找到栈中第二个元素,这就是真正的调用位置。

this 绑定规则

函数的调用位置决定了this的绑定对象,当我们找到调用位置后,然后判断需要应用下面四条规则中的哪一条。

独立函数调用

独立函数调用,this 指向函数调用位置所在的包含环境对象。

function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2

作为对象的方法调用

当函数作为某个对象的方法被调用时,this 指向这个对象。

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

特别注意:虽然函数foo并不属于obj对象,但调用位置使用obj的上下文来调用函数。我一直在强调调用位置的重要性,因为你可能一不留神就会忽略掉它,看下面的列子:

function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函数别名! 步骤1
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global" 步骤2

在步骤1中,变量bar是obj.foo 的一个引用,它实际指向的是函数foo。所以使用bar()与直接使用foo()并没有不同。

使用 .call/ .apply 绑定

每创建一个函数,这个函数就有了两个继承而来的方法:call和apply。

它们的第一个参数是一个对象,它们会把这个对象绑定到this,接着在调用函数时指定这个 this 。因为你可以直接指定 this 的绑定对象,因此我们称之为显式绑定。

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

new绑定

使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。

  1. 创建(或者说构造)一个全新的对象。
  2. 这个新对象会被执行[[原型]]连接,即指向构造函数的原型Foo.prototype。
  3. 这个新对象会绑定到函数调用的 this 。
  4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

使用 new 来调用 foo(..) 时,我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。

优先级

如果要判断一个运行中函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。

  1. 由 new 调用?绑定到新创建的对象。
  2. 由 call 或者 apply (或者 bind )调用?绑定到指定的对象。
  3. 由上下文对象调用?绑定到那个上下文对象。
  4. 默认:在严格模式下绑定到 undefined ,否则绑定到全局对象。

一定要注意,有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑定,你可以使用一个DMZ对象,比如 ø = Object.create(null) ,以保护全局对象。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
实例解析Array和String方法
Dec 14 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
JS 图片压缩原理与实现方法详解
Apr 29 #Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 #Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 #Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 #Javascript
JavaScript实现放大镜效果代码示例
Apr 29 #Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 #Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php调用shell的方法
2014/11/05 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
python字符串的方法与操作大全
2018/01/30 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
使用python实现kNN分类算法
2019/10/16 Python
Python matplotlib实时画图案例
2020/04/23 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
幼儿园保育员岗位职责
2014/04/13 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
奖励申请报告范文
2015/05/15 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS