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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
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数据浏览器
2007/03/11 PHP
生成php程序的php代码
2008/04/07 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python之web模板应用
2017/12/26 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
新东网科技Java笔试题
2012/07/13 面试题
迅雷Cued工作心得体会
2014/01/27 职场文书
写求职信有什么意义
2014/02/17 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
五年级学生期末评语
2014/12/26 职场文书
导游词之太湖
2019/10/08 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js