JS专题 : this

最新推荐文章于 2021-07-26 11:38:34 发布

爱吃鸡蛋的程序员

最新推荐文章于 2021-07-26 11:38:34 发布

阅读量95

点赞数 1

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/weixin_34865745/article/details/112623012

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS 专题之: this

定义
this在普通函数中`function xx (){}`
总结:

定义

需要明确的是，事实上JavaScript并不具有动态作用域。它只有词法作用域，简单明了。但是this机制某种程度上很像动态作用域
在运行时才被确定下来的, 他们只关心从何处调用, 也就是动态作用域是基于调用栈, 而不是书写代码时产生的作用域嵌套, 只关注在何处调用

this在普通函数中`function xx (){}`

this在任何情况下都不指向函数的词法作用域
this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性，会在函数执行的过程中用到。

调用位置

理解动态作用域或this, 无法逃避理解调用位置, 最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就在当前正在执行的函数的前一个调用中
例子:


function baz(){
	// 当前的调用栈是: baz,相当于 window->baz
    // 因此当前的调用位置是全局作用域
	bar();
}

function bar() {
//当前调用栈是window->baz->bar , 调用位置 永远是栈中的第二个元素
//因此，当前调用位置在baz中console.log("bar");
	foo();//<--foo的调用位置
}

function foo(){
	//当前调用栈是window->baz->bar->foo 
	//因此，当前调用位置在bar中
	console.log("foo");
}
baz();//<--baz的调用位置

绑定规则

个人理解, 如果通过现象看本质, 其实要判断 this 到底指的的是谁, 无非就是判断, 我当前调用的这个包含 this 的方法的指针是在哪个作用域下面, 记住这句话, 无论在面试中遇到怎么样的迷惑你的 this, 你都能分辨出来

默认绑定

例子:

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

调用foo()时，this.a被解析成了全局变量a。为什么？因为在本例中，函数调用时应用了this的默认绑定，因此this指向全局对象. 为什么这里用到了默认绑定, 通过调用位置分析,foo()是直接使用不带任何修饰的函数引用进行调用.因此只能是默认调用

隐式绑定

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

var obj = {
	a:2,
    foo: foo
}
obj.foo(); // 2

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因为调用foo()时this被绑定到obj，因此this.a和obj.a是一样的

对象属性引用链中只有最顶层或者说最后一层会影响调用位置 (最好的理解就是看那个调用的指针是在哪个作用域下)

隐式绑定所带来的问题 : 隐式丢失

我们经常被 this 搞糊涂是因为我们往往被 xx.xx 这种给搞混, 但是如果我们用指针去理解, 从而脱去他花里胡哨的’外衣’, 我们就能够理解隐式丢失 .

例子 a: 
function foo(){
	console.log(this.a);
}

var obj ={
	a:2,
	foo:foo
};

var bar = obj.foo // 函数别名, 这个是一个全局的 bar
var a  ='ops! global' // 给全局添加一个 a
bar()// 'ops global'

从这个例子可以看出, bar引用了 obj.foo(object.foo 方法的指针, 我们起个名字叫做指针 *a, 不但指向了obj.foo, 也指向了bar), 但是当我们调用 bar()的时候, 其实是 window.bar()(相当于告诉js引擎, window 全局下的那个 *a), 因此 this 就默认指向了 window, 跟 obj.foo 没有关系. tips: 隐式丢失最好的理解方式,就是从指针角度去理解

我们在来看一段代码,尝试用指针的角度去分析

例子b:
function foo(){
	console.log(this.a)
}
var obj = {
	a:2,
    foo:foo
}
var a = 'oops, global' // a 为全局对象属性
setTimeout(obj.foo, 100) // 'oops, global'

这是你不知道的 js一书中的一段代码, 书上对这段代码只说明了结果, 并没有给出为什么会这么回事, 当时看到这里我就很难受了,不理解是我难受的点, 然后我就尝试用指针的方式去分析了, 结果有点茅塞顿开(如果有错误分析,请指出):

在例子 b 中,我们明明看到 setTimeout调用了 obj.foo, 咦? 那不对啊, 这不就是 obj.foo, 根据我学到的this指向他最近的调用, 拿不就应该是this指向了 foo 吗? 为啥书中告诉是 global中的 a 而不是 obj中的 a? 重点来了!!! 我们被 obj.foo 给蒙骗了, 其实 obj.foo相当于一个衣服, 谁的衣服? 是指针的衣服. 哪个指针? 一个指向 foo()的指针. ok, 现在我们给这个指针不叫 obj.foo, 我们可以起名叫 *a, 那例子 b 中的 setTimeout 那段代码就相当于是 setTimeout(*a, 100), 这下你知道为什么了是 window 下的 a了吧? 谁调用了这个指针 *a??? setTimeout作用域呗, 所以*a这个指针方法里面的 this 就指向了 setTimeout 的作用域

显示绑定

我认为可以是告诉 js, 我要把这个带有 this 的 function 指针*a, 必须要在 某个 作用域中去调用, 也就是我们指定了调用这个 function 的指针 *a 的

显示绑定: `call`, `apply` 和 `bind`

硬绑定: 显式的强制绑定

举例说明:

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

var obj = {
	a:2
}
foo.call(obj); //2

个人理解: 就是告诉 foo, 我把你对应的函数指针,给强制绑定到了 obj 的作用域下了

注意: 如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作 this 的绑定对象，这个原始值会被转换成它的对象形式（也就是 new String(…)、new Boolean(…) 或者 new Number(…)）。这通常被称为“装箱”。(你不知道的 js)

硬绑定的典型应用场景

function foo(something){
	console.log(this.a, something);
    return this.a + something;
}
var obj = {
	a:2
}
var bar = function (){
	return foo.apply(obj,arguments);
}
var b = bar(3); //2 3;
conosole.log(b); // 5