this在运行时绑定,并不是在编写时绑定,它的上下文取决于函数调用的各种条件。this既不指向自身,也不指向函数的词法作用域。this是在函数被调用时发生的绑定,指向什么完全取决于函数在哪里被调用。

this绑定规则

1. 默认绑定:this绑定在函数调用的位置。只在非严格模式下,才能绑定到调用位置,严格模式下与调用位置无关。

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

2. 隐式绑定:this绑定需要考虑调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。this绑定到函数引用的上下文对象上。

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

注:对象属性引用链中只有最顶层或者说最后一层会影响调用位置。

隐式丢失:被隐式绑定的对象会丢失,然后采用默认绑定,从而把this绑定到全局对象或undefined上,取决于是否是严格模式。其根源是函数对象传递是传的引用,不是复制,与中间经过的各种历程无关,只是与初始定义有关 。

function foo(){
console.log(this.a);
}
var obj = {
a:0,
foo:foo
};
var bar = obj.foo; // 函数别名
var a = "global";
bar(); // "global"

3. 显式绑定:使用函数的call()/apply()方法进行this绑定。它们的第一个参数是一个对象,会把这个对象绑定到this。

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

call(obj,var1,var2,···),apply(obj,[var1,var2,···]) 
4. new绑定:使用new调用函数(构造函数调用),将this绑定到新构建的对象上。

function foo(){
this.a = a;
}
var bar = new foo(0);
console.log(bar.a); //

new操作的执行过程:

  1. 创建一个全新的对象;
  2. 新对象被执行[[原型]]连接;
  3. 新对象绑定到函数调用的this;
  4. 若函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

this绑定判断流程

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

JavaScript之this学习心得的更多相关文章

  1. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  2. JavaScript 秘密花园 学习心得

    目的 记录一下学习心得,便于以后复习,内容是比较基础的...但是很多内容我还是不知道... 对象 对象使用和属性 1.JavaScript 中所有变量都可以当作对象使用,除了两个例外 null和dun ...

  3. 我JSP学习心得1

    老师布置了一项作业,说是要按着老师的要求写,但我觉得只要是技术分享的心得就是好的,不论是不是所要求的内容. 由于和几个人在外面给别人搭建网站,项目需要学习了jsp有用到了javascript,这里有一 ...

  4. fullpage 插件学习心得

    fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1.支持鼠标滚动 2.支持前进后退和键盘控制 3.多个回调函数 4.支持 CSS3 动画 5. ...

  5. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  6. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  7. css3 3d学习心得

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

  8. PWA学习心得

    PWA学习心得 一.什么是PWA Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...

  9. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. 淘宝卖家搜索器V1.6算法注册机。

    该软件的算法非常简单,适合小白练手.(E语言写的)1.OD加载该软件,输入bp MessageBoxA 2.点击注册 3.OD就会中断下来了 4.按ALT+K打开调用堆栈 5.往上翻,就来到算法处了 ...

  2. Codeforces 68D - Half-decay Tree

    题意 有一颗高度为 \(h\) 的完全二叉树(即点数为 \(2^{h+1}-1\) ),有两种操作: add x y 给 \(x\) 点的权值加 \(y\) decay 一次衰变定义为选择一个叶子节点 ...

  3. 【刷题】BZOJ 1023 [SHOI2008]cactus仙人掌图

    Description 如果某个无向连通图的任意一条边至多只出现在一条简单回路(simple cycle)里,我们就称这张图为仙人掌图(cactus).所谓简单回路就是指在图上不重复经过任何一个顶点的 ...

  4. IntelliJ IDEA的安装和使用教程

    1. 安装IntelliJ IDEA IntelliJ IDEA(简称"IDEA")是Java语言的集成开发环境,它是JetBrains公司的产品之一.详情请看:JetBrains ...

  5. 洛谷P3241 开店

    题意:紫妹和幽香是17岁的少女,喜欢可爱的东西. 给定一棵树,有点权,边权.每次求所有权值在[l, r]范围内的点到点x的距离和.强制在线. 解:动态点分治怎么搞啊...... 一开始想的是权值的限制 ...

  6. Python3:if __name__ == '__main__' 详解

    一般在风格比较好的代码中会有一行if __name__ == '__main__' :代码,这里说明一下这句代码的用处,先上两个代码test1.py和test2.py: # test1.py prin ...

  7. Python 内置变量

    Python 隐藏变量 __doc__ # 表示本文件的注释__file__ # 表示本文件的路径 __package__ # 导入的py文件所在的文件夹路径__cached__ # 导入文件的缓存_ ...

  8. SHELL (3) —— 变量知识进阶和实践

    摘自:Oldboy Linux运维——SHELL编程实战 SHELL中特殊切重要的变量 位置变量 作用说明 $0 获取当前执行的Shell脚本的文件名,如果执行脚本包含了路径,那么就包括脚本路径 $n ...

  9. 【DS】排序算法之插入排序(Insertion Sort)

    一.算法思想 一般来说,插入排序都采用in-place在数组上实现.具体算法描述如下:1)从第一个元素开始,该元素可以认为已经被排序2)取出下一个元素,在已经排序的元素序列中从后向前扫描3)如果该元素 ...

  10. Your Prediction Gets As Good As Your Data

    Your Prediction Gets As Good As Your Data May 5, 2015 by Kazem In the past, we have seen software en ...