简单谈谈javascript中this的隐式绑定


Posted in Javascript onFebruary 22, 2016

我们先来看一个例子

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

this指向了obj,因为foo执行时的call-site(可以理解为调用时所在作用域)在obj上面。注意是运行的时候,和在哪里声明的没有关系。

call-site and call-stack

call-site姑且理解为调用域,call-stack为调用栈。如下代码可以辅助我们理解

function baz() {
  // call-stack is: `baz`
  // so, our call-site is in the global scope

  console.log( "baz" );
  bar(); // <-- call-site for `bar`
}

在baz()中调用bar(),所以bar的调用域是baz,此时bar的调用栈只有baz;而baz本身暴露在全局作用域中,所以它的调用域则也在全局作用域中。

function bar() {
  // call-stack is: `baz` -> `bar`
  // so, our call-site is in `baz`
  console.log( "bar" );
  foo(); // <-- call-site for `foo`
}
function foo() {
  // call-stack is: `baz` -> `bar` -> `foo`
  // so, our call-site is in `bar`
  console.log( "foo" );
}
baz(); // <-- call-site for `baz`

理解之后再回头看开头的例子,是不是感觉清晰了很多。其实this只是指向了它的call-site

还有如下玩法:

function foo() {
  console.log( this.a );
}
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42
Implicitly Lost(隐式丢失)
function foo() {
  console.log( this.a );
}
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo; // function reference/alias!
var a = "oops, global"; // `a` also property on global object
bar(); // "oops, global"

虽然bar引用了obj上的foo,但实际上相当于是直接对foo引用而已,所以会默认绑定到全局。

function foo() {
  console.log( this.a );
}
function doFoo(fn) {
  // `fn` is just another reference to `foo`
  fn(); // <-- call-site!
}
var obj = {
  a: 2,
  foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"
Javascript 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
jquery radio 操作代码
Mar 16 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
javascript实现一个简单的弹出窗
Feb 22 #Javascript
Js的Array数组对象详解
Feb 22 #Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 #Javascript
JS字符串的切分用法实例
Feb 22 #Javascript
JS实现上下左右对称的九九乘法表
Feb 22 #Javascript
基于Javascript实现倒计时功能
Feb 22 #Javascript
TypeOf这些知识点你了解吗
Feb 21 #Javascript
You might like
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python自动重试HTTP连接装饰器
2015/04/28 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
土木建筑学生自我评价
2014/01/14 职场文书
药品营销策划方案
2014/06/15 职场文书
安全责任书范文
2014/08/25 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
小学家长通知书评语
2014/12/31 职场文书
工作失职检讨书
2015/01/26 职场文书
撤诉书怎么写
2015/05/19 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Python包argparse模块常用方法
2021/06/04 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript