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 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 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
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
C语言开发工程师测试题
2016/12/20 面试题
EJB实例的生命周期
2016/10/28 面试题
机械电子工程专业推荐信范文
2013/11/20 职场文书
协议书范本
2014/04/23 职场文书
员工工作表现评语
2014/04/26 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
Go语言grpc和protobuf
2022/04/13 Golang
tree shaking对打包体积优化及作用
2022/07/07 Java/Android
使用CSS实现音波加载效果
2023/05/07 HTML / CSS