时间:2021-05-26
本文实例讲述了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; // 函数别名! 步骤1var 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 ); // 2new绑定
使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。
使用 new 来调用 foo(..) 时,我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。
优先级
如果要判断一个运行中函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。
一定要注意,有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑定,你可以使用一个DMZ对象,比如 ø = Object.create(null) ,以保护全局对象。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js事件机制----捕获与冒泡机制。分享给大家供大家参考,具体如下:先从事件绑定机制说起,事件绑定机制通过绑定方法addEventListener
关联篇:深入Android的消息机制源码详解-Handler,MessageQueue与Looper关系关联篇:Handler内存泄漏及其解决方
本文实例讲述了AngularJS框架双向数据绑定机制。分享给大家供大家参考,具体如下:之前写的一篇《AngularJS入门示例之HelloWorld详解》,介绍
方法一:利用javascript的onfocus事件,实现如下:Html代码复制代码代码如下:设计蜂巢如果引入了jQuery框架则可以利用它的事件绑定机制:Js
微信小程序require机制详解一,JS模块加载:一次性加载全部JS,但并不一定立即执行.先提一提微信小程序架构:类浏览器->HTTP本地服务->云端服务微信小