【JS】JS中对于this的理解
一、对this的产生原因分析和了解
第一:this
指的是函数运行时所在的环境(即调用的对象)。
第二:JavaScript 语言之所以有this
的设计,跟内存里面的数据结构有关系(内存存储详细理解参考原文)。
总结如下:
对于普通对象的保存:实际对象属性的值就是值;
对于函数的保存:实际函数属性的值是函数的地址;(而函数本身,可理解为:它不属于任何一个对象,相当于一个全局对象。所以,函数在不同场景下运行,this就是不同的场景了,不过都是执行时的环境)
同时,函数,可以作为一个参数(值)被调用,被传播。同时,在函数体内部,允许引用当前环境的其他变量(可以引用当前环境的其他变量。但当前环境是不确定的,所以会出现不同的值)
二、this绑定详解
this
实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用。
2.1 默认绑定(绑定在全局作用域)
即在调用函数时,函数不带任何修饰,也就是“光秃秃”的调用(即没有任何修饰的调用),就会应用默认绑定规则, 默认绑定指向全局作用域。
注意:在 javascript 中,如果使用了严格模式,则 this
不能绑定到全局对象。(不是很理解,不过先记录下)
2.2 隐式绑定
当函数在调用时,如果函数有所谓的“落脚点”,即有上下文对象(即调用时.
前面的对象)时,隐式绑定规则会把函数中的 this 绑定到这个上下文对象。
function say() {
console.log(this.name)
}
var name = "global"
var obj = {
name: "inside",
say: say
}
var alias = obj.say // 设置一个简写 (1)
alias() // 函数调用 输出"global" (2)
注意:隐式绑定时丢失上下文问题。
这个可以结合函数的存储理解为:obj.say
只是一个函数地址,不是函数本身。所以调用时,还是在当前全局环境下调用。
2.3 显式绑定:apply
,call
,bind
javascript中提供三种显式绑定方法:apply
,call
,bind
。
apply |
call |
bind |
---|---|---|
相同点 | apply 和call 的用法基本相似 |
apply 和call 的用法基本相似 |
不同点 | apply(obj,[arg1,arg2,arg3,...] 被调用函数的参数以数组的形式给出 |
call(obj,arg1,arg2,arg3,...) 被调用函数的参数依次给出 |
作用 | apply , call 的作用就是给函数绑定一个执行上下文,且是显式绑定的。但传入参数时会有所不同。 |
同左 |
注意:bind返回一个新函数,这个函数已经制定了执行上下文(这表示执行上下文在之后不可改变了),而返回这个新函数可以接受参数(即在绑定的执行上下文中,以参数为入参执行函数)。
2.4 new 绑定
new 绑定:指通过 new
操作符调用构造函数时发生的 this
绑定。
注意:在 javascript 中并没有其他语言那样的类的概念。构造函数也仅仅是普通的函数而已,只不过构造函数的函数名以大写字母开头,也只不过它可以通过 new
操作符调用而已。
实际上:new 和 bind
应该很类似。只是一个在创建时执行,一个在执行过程中执行。(不过还是很不同的,见下文区别)
2.5 bind 和 new 的区别
不过还是有区别的:bind只能被函数调用。而new 返回的是一个对象。即new 之后,函数的执行上下文就不可以被改变了,bind不行,显示绑定的三种形式都不行。所以new 绑定 的优先级最高。
2.6 四种绑定的优先级和区别:
默认绑定 < 隐式绑定 < 显式绑定 < new 绑定
注意:bind只能被函数调用。而new 返回的是一个对象。即new 之后,函数的执行上下文就不可以被改变了,bind不行,显示绑定的三种形式都不行。所以new 绑定 的优先级最高。
三、当 this 碰到 return :
注:主要参考:https://www.cnblogs.com/pssp/p/5216085.html
具体代码见原文,主要总结就是:
如果返回值是一个对象,那么 this 指向的就是那个返回的对象,如果返回值不是一个对象那么 this 还是指向函数的实例。(null是特例,虽然null是对象,但是返回时指向的还是函数的实例。)
即:函数返回对象时,那么this指向的是这个返回对象的运行环境;
函数返回不是对象时,那么this指向的就是这个函数本身。
四、参考
- JavaScript 的 this 原理 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
- JavaScript中this绑定详解 - 想到什么写什么 - SegmentFault 思否 https://segmentfault.com/a/1190000007101339
- 彻底理解 js 中 this 的指向,不必硬背。 - 追梦子 - 博客园 https://www.cnblogs.com/pssp/p/5216085.html
注:另一篇比较详细的说明,和上面几篇的模式不同,不过讲解的也很清楚