从字面上理解this就是本身,所以this的指向就是本身,关键就是搞清楚本身指的是什么。

首先这个本身不是指函数本身,也不是指函数的词法作用域。

this是在函数调用时发生的绑定,它的指向完全取决于函数是如何调用的。当一个函数被调用时,就会创建一个活动记录(或者说是执行上下文),这个记录会包含函数在哪里调用、函数的调用方式(接下来会讲到)、传入的参数等信息,而this就是这个记录的一个属性。

接下来讲函数的4种调用方式,同时这4种方式也决定了this的4种绑定方式。

1 默认绑定

也许你已经知道在全局下定义的变量默认就成为了window的属性,比如你在全局下定义了 var a = 2;那么你可以通过window.a访问到a的值。对于函数也是一样,但是要注意的是,这个机制在全局下是会报错的。

2 隐式绑定

这是语言中很常见的一种绑定

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

需要注意的是隐式丢失的问题

思考以下代码

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

这里边有一个赋值操作:var bar=obj.foo,使得bar成为obj.foo的一个引用,但是bar引用的就是foo这个函数,bar并没有隐式的上下文,因此便采用了默认上下文window。

另一种比较微妙的但也很常见的一种情况是函数作为参数传递时。

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

在参数传递时,其实发生了隐式的赋值操作,即fn = obj.foo,所以本质上和上例一样。js中的ajax和setTimeout等函数都有函数作为参数,使用的时候应当注意。

3 显示绑定

显示绑定可以使我们更加自由的将函数绑定到特定的上下文。js中的绝大多数函数都会有call和apply方法(极少数没有),你可以利用call或者apply显式的指定函数的执行上下文,它们的区别只是传入的参数不同。

还有一个bind,用法相似,也是常用的一种绑定方式

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

关于两者区别这里就不多说了。

4 new绑定

大家都知道new是用来调用构造函数的,但是在js中并不存在真正的构造函数,js中任何一个函数都可以被new调用,所以构造一个对象时,真正起构造作用的是new,而不是函数。在《你不知道的JavaScript》中作者是这样讲的“实际上并不存在所谓的‘构造函数’,只有对于函数的‘构造调用’”,大家可以领会一下。

需要理解的是new的过程是怎样的,例如

function Foo(a){
    this.a = a;
}
var bar = new Foo(2)
bar.a     //2

这个过程可以简单理解为以下4步

1 创建一个全新的对象。

2 这个全新的对象会被执行[[Prototype]]连接。

3 这个全新的对象会绑定this(我觉得就是执行了a = this)

4 默认返回这个对象(前提是这个构造函数没有返回值)

所以在new的第三步执行了this的绑定

箭头函数

ES6中新增了箭头函数的语法,不但更加简洁,而且有的时候可以很好的解决this绑定的问题。箭头函数的语法如下

function foo(){
    return (a)=>{
        console.log(this.a)
    }
}

在箭头函数里是没有this的,所以这里箭头函数中的this实际上是外层的this,箭头函数只是做了一个变量查找的过程。思考以下代码:

function foo(){
    return (a)=>{
        console.log(this.a)
    }
}
var obj1={
    a:2
}
var obj2={
    a:3
}
var bar = foo.call(obj1)
bar.call(obj2) //2

foo中的箭头函数中的this会捕获调用foo时的this,由于foo的this绑定到obj1,所以bar(引用的是箭头函数)的this也是指向obj1,箭头函数的this 来自于上层,是违法被修改的(new也不会)

关于this的绑定可以参考《你不知道的JavaScript》这本书里边的内容,讲的很深入很具体,同时还讲了几种绑定规则同时使用时的优先级和绑定到null

转载于:https://www.cnblogs.com/hui-fly/p/9459151.html

关于js中的this相关推荐

  1. 在js中使用HashMap数据结构,在js中使用K,V数据结构

    首先是定义一个HashMap方法,做基类(复制在js中即可,然后引用) //简单的哈希表,begin function HashMap() {/** Map 大小 * */var size = 0;/ ...

  2. [JavaScript] 探索JS中的函数秘密

    函数长啥样? 把一些要重复使用的内容封装到函数内. function foo(title) {console.log(title) } foo('title') foo('dust') foo('he ...

  3. 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

  4. 在JS中最常看到切最容易迷惑的语法(转)

    发现一篇JS中比较容易迷惑的语法的解释,挺有用的,转载下,与大家分享: js中大括号有四种语义作用 语义1,组织复合语句,这是最常见的 Js代码  if( condition ) { //... }e ...

  5. js去el的map_转:el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...

    原文链接: 总结: el表达式获取map对象的内容 后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...

  6. js中substr,substring,indexOf,lastIndexOf的用法

    js中substr,substring,indexOf,lastIndexOf等的用法 1.substr substr(start,length)表示从start位置开始,截取length长度的字符串 ...

  7. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  8. WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt

    主要内容 Safari调试 swift/OC与JS互调 增加加载进度条 支持JS中alert.confirm.prompt Safari调试 设置 -> safari --> 高级,开启J ...

  9. 彻底理解js中this

    相关博文:http://blog.csdn.net/libin_1/article/details/49996815 彻底理解js中this的指向,不必硬背. 首先必须要说的是,this的指向在函数定 ...

  10. 彻底理解js中this的指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

最新文章

  1. 各浏览器中for in顺序的差异
  2. Java基础:String类
  3. Python爬取猪肉价格网并获取Json数据
  4. BZOJ-3173-最长上升子序列
  5. ITK:将样条曲线拟合到点集
  6. NOIP赛前模拟20171027总结
  7. Linux使用ftp传输10g的文件,Ubuntu 16.04 安装ftp服务器传输文件
  8. Java 数据类型和 MySql 数据类型对应一览表
  9. 降低人工智能成本50% 阿里云推出新一代异构实例GN5i
  10. WinCE 5.0下的鼠标键盘驱动分析
  11. m3u8 ts文件利用系统工具COPY合并序列TS文件
  12. java楼盘管理系统_课内资源 - 基于Java面向对象开发的房屋中介管理系统
  13. Screw一键生成数据库文档
  14. 关注这场直播,了解能源行业双碳目标实现路径
  15. 通信网络与IP网络底层传输技术梳理(SONET/SDH/OTN/ATM/Ethernet/MPLS/PTN...)
  16. github干货地址分享
  17. android+手机运行卡,手机运行卡顿,运行内存太小,在购买的时候就需要注意运行速度...
  18. 机器视觉(七):图像分割
  19. C语言中 || \ 符号的意思
  20. 智慧工厂数字化管理系统软件

热门文章

  1. html 跳转或打开新网页
  2. 3.Deep Neural Networks for YouTube Recommendations论文精细解读
  3. 浙大计算机科学基础题型,浙江大学878计算机学科专业基础(含数据结构)考研复习经验...
  4. 面试看缘分php,php测试姓名缘分指数
  5. reg类型变量综合电路_SystemVerilog的一些可综合实用技巧
  6. raptor算法流程图例题_raptor程序设计例题参考答案
  7. MySQL 唯一索引 UNIQUE KEY 会导致死锁?
  8. Spring Boot 2.3 中开启Spring Security
  9. CALayer( 一 )
  10. 自动化测试框架:几行代码轻松解决Appium环境问题