脚本宝典收集整理的这篇文章主要介绍了解析js中的this对象,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
@H_126_3@(几天之前写了源码分析之后,感觉太疲惫了,写一些相对轻巧的内容调剂一下,希望喜欢的同学可以点个赞和收藏~)
进入正题,this对象在js中是很常见,但是在这里也经常会出错,本文将对常见的this对象的情况做一些总结
正文
this
对象是在函数运行时,基于函数的执行环境绑定的。
其实这句话的本质就是,谁调用了函数,this
就指向谁
具体的来说,通常有以下几种情况:
全局函数
//例子1
function A() {
console.LOG(this)
}
A();//Window
上面的例子很简单,函数A在全局环境中执行,也就是全局对象Window
调用了函数。此时this指向Window
对象方法
作为对象方法调用时,this指向调用该方法的对象
//例子2
VAR b = {
getThis:function(){
console.log(this)
}
}
b.getThis()//b
到这里我们举的例子都比较简单易懂,接下来来一个有意思的:
//例子3
var c = {
getFunc:function(){
return function(){
console.log(this)
}
}
}
var CFun = c.getFunc()
cFun()//Window
这个例子和前一个例子不一样,运行c.getFunc()
时,首先返回的是一个匿名函数,我们将这个函数赋值给cFun
,接着在全局环境中调用了cFun()
,所以此时this
指向的还是Window
。
如果我们一定要让这里返回的是c
对象呢?在开头我们说过,this
对象是在函数执行时确定的,在例子3中,执行c.getFunc()
时,this
对象指向的还是c,所以我们只要保持住这个this
就好了,对上面的代码稍微改动:
//例子4
var c = {
getFunc:function(){
var that = this //在这里保留住this
return function(){
console.log(that)
}
}
}
var cFun = c.getFunc()
cFun()//c
这也就是我们经常可以在一些代码中看到var @L_512_11@ = this
或者var that = this
之类的原因了。
call和apply
此时this对象通常指向函数中指定的this值(注意这里的通常2字,考试要考的)
call
和apply
算是老生常谈,但还是稍微介绍下,怕新同学可能没接触过(其实是为了凑点字数),拿call
来说,语法是这样的
fun.call(thisarg, arg1, arg2, ...)
这个方法怎么用呢,看下面的例子:
//例子5
var d = {
getThis:function(){
console.log(this)
}
}
var e = {
name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e
在这里我们就可以看出call函数的意思了:指定一个对象o1
去调用其他对象o2
的方法,此时this
对象指向o1
好了,那为什么前面我们说通常呢?因为,有2种例外的情况:
-
thisArg
指定为null
和undefined
时,this
指向window
。
-
thisArg
指定为原始值(数字,字符串,布尔值),this
会指向该原始值的自动包装对象(这一点感谢评论区的读者补充)。请看:
//例子6
var d = {
getThis:function(){
console.log(this)
}
}
d.getThis.call(@H_406_358@null)//Window
d.getThis.call(undefined)//Window
d.getThis.call(1) //Number
d.getThis.call("hello") //String
d.getThis.call(true) //Boolean
番外:基本包装类型
既然讲到包装类型,那这里顺便补充介绍一下基本包装类型:基本包装类型(包括Boolean,String,Number)是一类特殊的引用类型,它们具有引用类型的基本特征,还具有对应的基本类型的特殊行为,举个例子:
//基本包装类型
var str = "hello World";
var str2 = s1.substring(2);
首先,str
是字符串,字符串是基本数据类型,但是在第二行代码中,str.substring(2)
调用了str
的方法,我们知道,基本数据类型不是对象,本来是是不应该有方法的,但是实际上我们知道string,number类型都有对应的方法,因为从内存中访问str时,访问进入了一种读取模式,在后台自动做了以下转换:
- 创建一个
String
类型的实例
- 在实例上调用相应方法
- 销毁该实例
特点:自动创建的基本包装类型的对象只存在于执行代码的瞬间,然后立即销毁。
那么可以手动创建基本包装类型吗?当然可以:
var str = new String("Hello")//注意这里是new一个实例,而不是用String类型转换函数
tyPEof(str)//object
var str2 = String(222)//如果使用类型转换函数得到的还是类型
ypeof(str2)//string
此时的str
就是一个显式创建的基本包装类型对象,只是一般来说很少这样去使用
箭头函数
es6中的箭头函数现在也用的比较频繁,但是有个需要注意的点是:
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
其实出现这种情况的根本原因是:箭头函数没有this对象,所以箭头函数的this就是外层代码的this
//例子7
var f = {
getThis:()=>{
console.log(this)
}
}
f.getThis()//Window
这个例子和前面例子2是基本一样的,只是把普通函数改写成箭头函数,但是此时的this对象已经指向了外层的Window
。
考虑到这一点可能不好理解,我们再看几个例子:
//例子8
var g = {
getThis:function(){
return function(){console.log(this)}
}
}
var h = {
getThis:function(){
return ()=> console.log(this)
}
}
g.getThis()()//Window
h.getThis()()//h
这个例子里,g的getThis
写法就和之前的例子3一样,由于函数在全局环境中运行,所以此时this
指向Window
;h的getThis
使用了箭头函数,所以this指向了外层代码块的this所以,此时this
指向的是h。
总结
小结一下,
- 一般情况下
this
对象指向调用函数的对象,全局环境中执行函数this
对象指向Window
- 在
call和apply
函数中this
指向指定的对象,如果指定的对为undefined
或者null
,那么this
对象指向Window
- 在箭头函数中,
this
对象等同于外层代码块的this
然后依然是每次都一样的结尾,如果内容有错误的地方欢迎指出;如果对你有帮助,欢迎点赞和收藏,转载请征得同意后著明出处,如果有问题也欢迎私信交流,主页添加了邮箱地址~溜了
以上是脚本宝典为你收集整理的解析js中的this对象全部内容,希望文章能够帮你解决解析js中的this对象所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。