js 隐式绑定与隐式丢失

我会带着你远行 2023-02-15 15:54 4阅读 0赞

在学习函数this绑定时遇到一个很有意思的现象，请看下面代码

function fn(){ 
    	console.log(this.a)
    }
    var a = "hello"
    fn()

这段代码可能大家都知道执行结果是什么，就是控制台输出了`hello`  
但是如果我在`console.log(this.a)`前面加上了`"use strict"`会发生什么？  
结果是会报错  
![image][]  
为什么呢？  
因为在`非严格模式`下，上面代码的函数调用时应用了`默认绑定`，因此this指向全局对象  
但是在`严格模式`下，不能将全局对象用于默认绑定，因此this就等于undefined  
这就是js的`默认绑定`

接下来我们来讲讲`隐式绑定`，请看下面的代码

function fn(){ 
    	console.log(this.a)
    }
    var a = "hello"
    var obj = { 
    	a: "obj",
    	fn: fn
    }
    obj.fn()

这段代码执行后，控制台会打印什么呢？  
结果是控制台打印了`obj`  
`fn`这个函数严格意义上讲并不属于`obj`对象  
当函数被引用有上下文对象时，`隐式绑定`会把函数调用中的`this`绑定到这个上下文对象，此时的`console.log(this.a)`和`console.log(obj.a)`是一样的，继续看下面的代码

function fn(){ 
    	console.log(this.a)
    }
    var a = "hello"
    var obj = { 
    	a: "obj",
    	fn: fn
    }
    var objs = { 
    	a: "objs",
    	obj : obj
    }
    objs.obj.fn() //obj

遇到这种情况，请记住：对象属性引用链中只有上层或者说最后一层在调用位置中起作用  
this实际上是在函数被调用时发生的绑定，他指向什么完全取决于函数在哪里被调用

`隐式丢失`又是什么？  
`隐式丢失`是被`隐式绑定`的函数丢失绑定对象，请看下面代码

function fn(){ 
    	console.log(this.a)
    }
    var a = "hello"
    var obj = { 
    	a: "obj",
    	fn: fn
    }
    var demo = obj.fn; //函数别名
    demo() //???

大家觉得这段代码最终控制台打印的是什么？  
执行结果为，控制台打印了`hello`  
为什么呢？  
因为`demo`只是绑定了`fn`函数的引用，因此`demo`只是一个函数的调用，应用了`默认绑定`绑定到了全局对象，该情况很容易出现在回调函数上，例如：

function fn(){ 
    	console.log(this.a)
    }
    var a = "hello"
    var obj = { 
    	a: "obj",
    	fn: fn
    }
    setTimeout(obj.fn,0); //hello

`setTimeout`第一个参数是传入回调函数，`obj.fn`被当做一个函数进行绑定，可以理解为：

function setTimeout(fn,delay){ 
    	//等待delay毫秒后执行
    	fn() //obj.fn
    }

这就是js的`隐式丢失`现象  
大家在写代码的时候，请注意这种现象，避免采坑…  
如有问题，请在下方留言

《你不知道的JavaScript》学习记录系列  
其他笔记请查看专栏：  
[《你不知道的JavaScript》学习笔记][JavaScript]

[image]: https://img-blog.csdnimg.cn/20200606134259644.png
[JavaScript]: https://blog.csdn.net/guoqing2016/category_10080263.html