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. QEMU简单知识 以及磁盘格式转换的简单命令

    From 百度百科 QEMU,是由 Fabrice Bellard开发的通用.开源机器模拟与虚拟化软件,Fabrice Bellard是另一个著名的C编译器的作者.QEMU可以在不同的机器上运行独自开 ...

  2. OneZero第四周第一次站立会议(2016.4.11)

    1. 时间: 15:10--15:25  共计15分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...

  3. 深入 Java Web

    该系列 记录下,深入 学习 Java Web 过程. 1.Tomcat总体结构 2.Tomcat 启动流程 3.ServletContext详解 4.Servlet详解

  4. hdu 1151 Air Raid 最小路径覆盖

    题意:一个城镇有n个路口,m条路.每条路单向,且路无环.现在派遣伞兵去巡逻所有路口,伞兵只能沿着路走,且每个伞兵经过的路口不重合.求最少派遣的伞兵数量. 建图之后的就转化成邮箱无环图的最小路径覆盖问题 ...

  5. HGOI 20181027 幻象(概率DP)

    40 pts: 考场上打了40分暴力,理论的话就是概率树,把每一个状态去去到各个带权(概率)的和就是答案 最终处理的话就是dfs出01序列0代表没有幻象,1代表出现幻象然后在每一次dfs出一段序列的时 ...

  6. 洛谷 P1344 [USACO4.4]追查坏牛奶Pollutant Control 解题报告

    P1344 [USACO4.4]追查坏牛奶Pollutant Control 题目描述 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这件事的时候 ...

  7. linux c 编程 ------ 常见函数

    fork():创建一个进程 exec():停止当前进程中程序的执行,让当前进程执行另一个程序 access():查看是否有操作文件的权限,可以用来判断一个文件是否存在 pipe():无名管道,用在父子 ...

  8. os.path.splitext()用法--分离文件名与扩展名

    用法: os.path.splitext(“文件路径”)    分离文件名与扩展名:默认返回(fname,fextension)元组,可做分片操作 例子: import os path_01='E:\ ...

  9. spring cloud 微服务架构 简介

     Spring Cloud 1. Spring Cloud 简介 Spring Cloud是在Spring Boot的基础上构建的,用于简化分布式系统构建的工具集,为开发人员提供快速建立分布式系统中的 ...

  10. JVM内存管理---垃圾收集器

    说起垃圾收集(Garbage Collection,GC),大部分人都把这项技术当做Java语言的伴生产物.事实上,GC的历史远比Java久远,1960年诞生于MIT的Lisp是第一门真正使用内存动态 ...