js中的this:从执行上下文的角度看this

前言

前面我们已经讲完了js的作用域和作用域链,说白了就是js的一个变量的查找规则,但是由于js静态作用域的这么一个特性,导致作用域只在声明的时候就已经创建好了,这对于我们开发来说有时候不是那么友好:
具体看下列代码:

		var bar = {
            myname: '拉亚斯特',
            printName: function () {
                console.log(myname)
            },
        }

        function foo() {
            let myname = '凯隐'
            return bar.printName
        }
        let myname = '影流之镰'
        let _printName = foo()
        _printName()    //影流之镰
        bar.printName() //影流之镰

bar函数中的printName函数打印的也会是全局的myname,但是我们想要它打印bar对象中的myname--拉亚斯特,
这时候js就引入了this.
this在某种意义上说具备动态作用域的特性,它的绑定跟作用域毫无关联,它只关心函数在何时,在哪被调用,然后运行时进行一个this的绑定

JS中的this到底是什么?

关于this,我们还是从执行上下文说起.前面我们说过了,执行上下文包括了保存let和const声明的块级变量的词法环境,也有保存var变量,函数声明和outer的变量环境.但是执行上下文其实包括一个this,而这个this,在执行上下文入栈的时候会进行一个绑定.

全局上下文中的this

首先我们来看执行上下文中的this是什么

<script>
        console.log(this);

    </script>

打印出来window,这说明全局状态下,window是指向this的,这也是作用域链和this的唯一交点,作用域链的最底端包含了window对象,全局执行上下文中的this也指向了window对象,(node环境下,全局this是指向undefined的,以下例子全部用浏览器环境,node暂不考虑)

函数执行上下文中的this

现在我们知道了全局执行上下文中的this指向window对象,那么函数执行上下文中的this是指向什么呢?

默认绑定

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

大家可以自己试一试,打印的也是window,不管你这个函数是什么,打印this都是指向window的,这就说明函数执行上下文中,this存在一个默认绑定,默认绑定this到window对象中,(严格模式下,函数中的this为undefined)

隐式绑定

那么我们一开始中的代码,this被绑定到了bar这个对象上,这是属于什么绑定规则呢,

var bar = {
            myname: '拉亚斯特',
            printName: function () {
                console.log(this.myname)
            },
        }

bar.printName() //拉亚斯特

这就属于隐式绑定,就是函数调用前,把他"挂载"到一个对象上,这样函数中的this,就指向这个对象了
不过隐式绑定存在隐式丢失
还是我们开头的代码

var bar = {
            myname: '拉亚斯特',
            printName: function () {
                console.log(myname)
            },
        }

        function foo() {
            let myname = '凯隐'
            return bar.printName
        }
        let myname = '影流之镰'
        let _printName = foo()
        _printName()    //影流之镰

这时另一个函数foo中明明返回了bar.printName这个函数,按道理来讲接收这个函数的变量_printName执行也因该打印拉亚斯特的,可惜它打印的确实全局状态下的影流之镰,这就是隐式丢失,我们在分析this的时候有时候要特别注意这种情况,这也this设计的缺陷之一,不符合人的直觉,导致一些难以预料的错误,而这些错误,按照人的惯性思维很难去发现

显示绑定

可能有人就会好奇啦,说:’'马老师啊,有没有什么办法,通过我自己的意愿绑定意思啊"
当然有啦.js为我们指定了3个方法来通过自己的意愿绑定this

call方法

		let bar = {
            myname: '拉亚斯特',
        }

        function foo() {
            this.myname = '凯隐'
        }
        foo()
        foo.call(bar)
        console.log(myname); //凯隐
        console.log(bar); //{}

观察上面的代码,打印的是凯隐,{myname:‘凯隐’},为什么呢?
执行foo函数,this.myname = '凯隐',这里的this指向的是谁?没错,就是window,此时window会挂载一个myname = ‘凯隐的属性’,这就解释了console.log(myname);为什么会输出凯隐了

然后就是foo.call(bar),这里使用了一个call方法,将bar对象作为参数传入,使foo中的这个this指向了bar,call方法的具体使用
这时候我们console.log(bar);,发现bar中的myname变成了凯隐,因为执行foo.call(bar)函数的时候,foo函数内this.name = ‘凯隐’,这个this指向的bar,等于将bar中的name修改为了凯隐
这时候我们看到的bar对象中的myname就变为凯隐了

显示绑定另外两种方法就是apply方法和bind方法了,这两种方法都是Object.prototype上定义的方法.具体使用大家自行百度,我这里只做this 的讲解

new绑定

这是优先级最高的绑定不过只用来设置构造函数,利用new关键字,设置构造函数中的this指向

function Person(name, age, declar) {
            this.name = name
            this.age = age
            this.declar = declar
        }
        let person = new Person('张嘉文', '3', '没有狐臭!')
        console.log(person);

this就指向了这个person对象
这里统一解释一下,new关键字到底干了什么

new关键字到底干了什么?

• 在内存中开辟了一个新的空对象
• 接着将新对象的原型指向构造函数的原型对象
• 接着将构造函数中的this指向这个新对象
• 判断构造函数有没有返回自己的对象,如果有自己返回的对象就返回
• 否则返回这个开辟的新对象

说起来可能有点绕
通过代码可能会更好的理解,下面是我实现的new方法

function myNew(fn,...args){ //fn是构造函数 ...args是参数,es6剩余参数的写法
	//Object.create方法传入一个对象,创建一个新对象并将参入对象作为这个新对象的原型
	let obj = Object.create(fn.prototype) 
	//将fn的this绑定为obj中的this
	let fnObj = fn.call(obj,...args)
	//判断fn是否有自己return的对象,有就优先返回fn的,否则返回新的obj
	return fnObj instance Object ? fnObj:obj
}

this的缺陷以及应对方案

this的一些缺陷,会导致初学者甚至很多有经验的开发者会前仆后继的写出一些bug,并且由于惯性思维而发现不了(对于先学习过其他语言的人来说,冲击更大)

我们看看this有哪些设计缺陷

嵌套函数中的this不会继承外层函数的this

我认为这是一个严重的设计失误,影响了很多开发者和初学者,并让他们迷失在这个错误中(包括我自己初学的时候,给我整懵逼了)

var myObj = {
	myname: '凯隐',
	showThis: function () {
		console.log(this)
		function bar() {
			console.log(this)
		}
		bar()
	},
}
myObj.showThis()

我们知道showThis这个函数通过隐式绑定,是指向myObj本身的,那么第一个打印语句毫无疑问是myObj,
那么,问题来了,bar函数中的this指向谁呢?
自己动手实验一下,发现打印出来window

也就是符合了我们的小标题嵌套函数中的this不会继承外层函数的this,不做特殊处理,它默认绑定到window
解决方法也很简单,就是使用作用域链或者箭头函数

var myObj = {
	myname: '凯隐',
	showThis: function () {
		console.log(this)
		let self = this
		function bar() {
			console.log(self)
		}
		//bar = ()=>{console.log(self)} 箭头函数也是可行的
		bar()
	},
}
myObj.showThis()

将this用一个self变量保存,然后嵌套函数使用作用域链来查找到外层的this

普通函数中的this指向全局window

这个前面我已经说过了,默认情况下,函数中的this是默认绑定规则绑定到window的,这也是一个设计缺陷,因为我们的直觉想法是不希望这样做的,这回打破数据的边界,通过this,函数内访问甚至修改了全局状态下的一些数据,就会造成一些误操作
当然我们也有call,apply,bind方法来绑定这些函数中的this,就是多写点代码(程序员:确实是酱紫,不过掉点头发而已啦,都说了没有秃头,没有秃头!)

好啦,今天写到着,哦,对了,如果对我刚刚提到的原型和原型链不熟悉的话,可以去看看我之前的博客.或者自己查找资料理解,这里就不做多写了

各位彦祖再见