关于js中的this

this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用

1. 调用位置

现在来说一下调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)。
那么怎么找到它的调用位置呢?最重要的是要分析“调用栈”(就是为了到达当前执行位置所调用的所有函数)


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的调用位置`

分析调用栈,可以将调用栈想象成一个函数调用链(比如:foo函数里面注释的这一句‘当前调用栈是:baz->bar->foo’)在这条函数调用链的所在的函数的前一个函数,就是所在函数的调用位置(foo函数中baz->bar->foo)

还有另外一种查看调用栈的方法,就是使用浏览器的调试工具(我所使用的是chrome浏览器)
你可以在工具中给每个函数的里面的第一行(不是注释,其他行也可以)设置一个断点,然后运行(刷新一下)


在工具中展示的调用列表,找到栈中的第二个元素(从栈顶往下第二个),这就是该函数的真正的调用位置。

2. 绑定规则

现在我们已经找到了调用位置,那调用位置如何决定this的绑定对象呢?
this的绑定规则有四条,而且应用多条规则时还要注意它们的优先级(这里没讲)

1. 默认绑定

可以把这条规则看作无法应用其他规则时的默认规则,最常用的函数调用类型:独立函数调用

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

首先要明白,在全局作用域中声明上的变量就是全局对象中一个同名属性
接下来,我们在调用foo()时,this.a被解析成了全局对象a。因为在本例中函数调用的时候应用了this的默认绑定(在代码中,foo()是直接使用不带任何修饰的函数引用进行调用的),因此this指向全局对象。
但是要注意:以上的情况实在非严格模式下,但是在严格模式下,全局对象无法使用默认绑定,因此this会绑定到undefined。

2.隐式绑定

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


在这个例子中,函数foo被当作引用属性添加到obj中,但严格的说它并不属于obj对象,然后,调用位置会使用obj上下文来引用函数,可以说
函数被调用时obj对象“包含”它。当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象,因为调用foo()时this被绑定到obj,因此this.a和obj.a是一样的。
但是,对象属性引用链中个只有最顶层或者说最后一层会影响调用位置。

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


但是存在一个问题,被隐式绑定的函数有可能会丢失绑定对象,然后应用默认绑定规则,这里就不细讲了(比如在传入回调函数时.......)。

3.显示绑定

隐式绑定时,我们必须在一个对象内部包含一个指向函数的属性,并通过这个属性间接引用函数,从而把this隐式绑定到这个对象上。但是我们想粗暴一点怎么办的?
javascript提供的大多数函数(除了一些非常特殊的函数)都有一些有用的特性,在这里我们可以使用函数的call(...)和apply(...)方法,这两个方法的区别在于参数的传递。
它们的第一个参数是一个对象,它们会把这个对象绑定到this,接着在调用的时候指向这个this,因为你可以直接指定this的绑定对象,因此我们称之为显示绑定。

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

通过foo.call(...)我们可以在调用foo时强制把它的this绑定到obj上。但是显示绑定还是无法解决丢失绑定问题,但是显示绑定的一个变种可以解决这个问题,这里不讲了)

4.new绑定

javascript中的new操作符和那些面向类的语言的机制完全不同,在javascript中,那所谓的“构造函数”只不过是使用new操作符时被调用的函数,但它并不属于这个类,也不会实例化一个类,就是被new操作符调用的普通函数而已。
使用new来调用汗书时,会执行下列操作
1.创建一个全新的对象。
2.这个对象会执行[[原型]]连接
3.这个新对象会绑定到函数调用的this
4.如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

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

我们会构造一个新的对象并将它绑定到foo(..)调用中的this上。
以上就是this的四种绑定规则。

参考书籍《你不知道的JavaScript(上卷)》

关于js中的this的更多相关文章

  1. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  2. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  3. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  4. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  5. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  6. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

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

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

  8. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  9. 如何在Node.js中合并两个复杂对象

    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...

随机推荐

  1. 从RPC开始(一)

    这是一篇关于纯C++RPC框架的文章.所以,我们先看看,我们有什么? 1.一个什么都能干的C++.(前提是,你什么都干了) 2.原始的Socket接口,还是C API.还得自己去二次封装... 3.C ...

  2. npm 私有模块的管理使用

    你可以使用 NPM 命令行工具来管理你在 NPM 仓库的私有模块代码,这使得在项目中使用公共模块变的更加方便. 开始前的工作 你需要一个 2.7.0 以上版本的 npm ,并且需要有一个可以登陆 np ...

  3. InnoDB体系结构学习笔记

    后台线程 Master Thread 核心的后台线程,主要负责将缓冲池的数据异步刷新到磁盘,保证数据的一致性,包括(脏页的刷新).合并插入缓冲.(UNDO页的回收)等 IO Thread 4个writ ...

  4. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  5. Power BI官方视频(3) Power BI Desktop 8月份更新功能概述

    Power BI Desktop 8月24日发布了更新版本.现将更新内容翻译整理如下,可以根据后面提供的链接下载最新版本使用. 1.主要功能更新 1.1 数据钻取支持在线版 以前的desktop中进行 ...

  6. 学习ASP.NET Core, 怎能不了解请求处理管道[5]: 中间件注册可以除了可以使用Startup之外,还可以选择StartupFilter

    中间件的注册除了可以借助Startup对象(DelegateStartup或者ConventionBasedStartup)来完成之外,也可以利用另一个叫做StartupFilter的对象来实现.所谓 ...

  7. C# 给word文档添加水印

    和PDF一样,在word中,水印也分为图片水印和文本水印,给文档添加图片水印可以使文档变得更为美观,更具有吸引力.文本水印则可以保护文档,提醒别人该文档是受版权保护的,不能随意抄袭.前面我分享了如何给 ...

  8. C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能

    随着微信开逐步开放更多JSSDK的接口,我们可以利用自定义网页的方式来调用更多微信的接口,实现我们更加丰富的界面功能和效果,例如我们可以在页面中调用各种手机的硬件来获取信息,如摄像头拍照,GPS信息. ...

  9. PHP设计模式(三)抽象工厂模式(Abstract Factory For PHP)

    一.什么是抽象工厂模式 抽象工厂模式的用意为:给客户端提供一个接口,可以创建多个产品族中的产品对象 ,而且使用抽象工厂模式还要满足以下条件: 系统中有多个产品族,而系统一次只可能消费其中一族产品. 同 ...

  10. 海鑫智圣:物联网漫谈之MQTT协议

    什么是MQTT协议 MQTT(消息队列遥测传输协议)是IBM在1999年专门针对物联网等应用场景来制订的轻量级双向消息传输协议,它主要是为了解决物联网上使用到的设备的互相通信的问题,以及这些设备与后端 ...