博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【YDKJS读书笔记】关于Js中的this Part1
阅读量:6913 次
发布时间:2019-06-27

本文共 3351 字,大约阅读时间需要 11 分钟。

书读到"this & object prototype"这一卷。

章节到了“this All Makes Sense Now!”

书里面开篇就提到,this并不复杂,只不过被很多程序员加了自己的臆想以讹传讹,说到底,还是基础知识不熟悉。

的确,看过很多技术文章,分析this都有那种管中窥豹的感觉就是着重在举例,论述这个现象,而不求甚解。
闲言少叙,开始总结。

首先说一个重要的技术名词,call-site,我们平时在debug的时候,可能会接触到callstack这个词,感觉上其实有那么一点类似。

我理解:

call-stack:是一连串的方法执行的链式结果
call-site:只是上一个调用当前方法上下文环境,可以理解为context。

比如下面这个片段:

function callfirst(){    // call-stack:callfirst    // call-site:全局    callsecond();}function callsecond(){    // call-stack:callfirst -> callsecond    // call-site:callfirst}callfirst();

为什么说到这个call-site,确定this对象其实就是找到call-site的过程。

说到这里,还要再提一个细节,js中的this,不是面向对象中传统的概念,这个this不是放在function中就是这个function的context,也不是任何场合都代表了整个js运行环境中的context,这个this,你就可以理解为是刚才提到的call-site,必须是有依据的context。

下面就总结一下找到call-site的方法,也就是如何正确找到并使用this。(规则我就直接使用原文的副标题)

1.Default Binding:看看如下代码片段

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

这里出现this的地方,是foo方法里,我们先确定call-site,显而易见,foo方法的call-site就是最后一行foo,隶属于全局对象,那么这个this就呼之欲出了,这个this就代表这个代码的作用域,而this.a访问的也就是var a = 2;这条语句赋值的属性,所以控制台会打印出一个2。

贴一句书中的原文:

called with a plain, un-decorated function reference.

就是说在代码中很简单,没有任何修饰的调用,this就可以理解为全局的作用域对象。

但是这种规则,不适用于strict mode环境下的js代码,如果用在strict mode中,以上代码需要改写成为

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

2.Implicit Binding:还是看代码

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

这种直译为隐式绑定的方法,确定call-site的方法就是看是由谁调用的方法,在上面这个例子中,再直白以及明显不过了,obj中有一个foo属性,绑定的foo方法,那么此时foo方法中的call-site就是obj,obj中有一个属性是a,所以代码会输出2

变形:

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

如果遇到这种链式的风格,就本着就近原则,离foo方法最近的obj2就是foo的call-site,方法中this.a的值就是obj2中a的值。

在Implicit Binding的情况下会有一种叫Implicitly Lost的情况发生,简单直白点说就是刚才那种链式调用的方式,被隐藏在了各种其他的情况之下,举例来说明。

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

上面这种情况将obj.foo赋值给了bar, 按照惯性思维,看到obj.foo第一反应,我觉得this应该等价于obj,然而事实却哐哐打脸,

上面代码的foo的call-site是bar,虽然链式复制了一大堆给了bar,但实际上,bar在这个时点是等价于foo的,所以这个方法的call-site就是bar,那么this.a的值就是全局属性的a,与obj就不相干了。
与上面情况相同的还有如下几种变种情况:

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

刨除一切感官上的理解,最终调起foo方法的是fn()这句话,fn的值虽然是由obj.foo传过来的,但其实这种情况与上面说到的方式完全是等价的

解析一下,fn()就是foo的call-site,而根据第一个default binding原则,fn前面是干净没有任何修饰符的,所以foo中的this代表的就是全局对象。

这里需要强调的就是,链式方法无论是赋值还是作为方法的参数,不能被长长的语句迷惑双眼,照准call-site是理顺思路的一切法门。

这种链式赋值,this指向问题在js中叫做fall back to default binding。

3.Explicit Binding

说到这个显示绑定,就得提到两个方法,一个叫做call,另一个叫apply,在现在这个时点,我们暂且理解几个点,这两个方法,是所有function对象都可以调用的内建方法(涉及到prototype),他们的第一个参数,我们就可以理解为this对象,这是一种强制把this注入到方法中的一种手段。举个例子

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

还是熟悉的味道,但是我们却换了配方,我们不直接调用foo方法,而是使用foo中的call方法,把obj传到call中作为foo中的this对象,控制台会为我们输出一个2,call可以换成apply。

foo.apply(obj);

在这种传一个参数作为this对象的功能方面,call与apply是等价的。

4 new Binding

这个恐怕也是很多使用js的朋友们最容易混淆的地方,new在js中生成的只是一个function,new过是在一个function前面抢了一个new单词,而这样表示会让function有一些新的变化

大体上有4点:

  1. 产生一个新的function对象

  2. 这个与原型链有关,暂且不说

  3. new出来的function对象调用的方法是使用的this,就是它本身

  4. 除对象本身改变自己本身以外,每次new出来的对象都是全新的对象(这话我再润色一下)

上例子:

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

这个比之之前的复杂情况就太浅显了,望文生义即可。

看了以上文章对于解决this面试题应该会有不小的帮助。

转载地址:http://mqicl.baihongyu.com/

你可能感兴趣的文章
Vue导入外部js文件或css文件
查看>>
迷茫的学,无措的期待
查看>>
linux常见系统故障排除
查看>>
后台启动 zookeeper 所有信息 输出到指定目录
查看>>
nuxt.js踩坑记录
查看>>
spark和hive集成
查看>>
Mysql一些维护命令
查看>>
瑞萨单片(R5F100LE)操作无线模块CC1100
查看>>
最好的emacs24配置及配色的修改
查看>>
GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版
查看>>
AWS - VPC site-to-site ×××
查看>>
Spring Cloud Alibaba使用Sentinel限流_四
查看>>
Redisbook学习笔记(1)sds
查看>>
12.6-全栈Java笔记:Java网络编程(四)
查看>>
Django加载模板文件
查看>>
我的友情链接
查看>>
windowsserver2008取消显示关机原因
查看>>
axis2学习——axis2的安装
查看>>
Elasticsearch学习笔记5: suggest实现搜索补全
查看>>
我的友情链接
查看>>