JS this - 这个

原创 uptown 随笔 js 173阅读 2018-09-17 17:59:51 举报

this,这个!

This is mine.  这个是我的!

This is yours. 这个是你的!

世间万物,皆有所属!你的,我的,她的!哪怕失物,无人领取,也会归于公共名下!

今天来聊聊 this,如果要用到JS,this 是避不开的话题,this之于JS ,像自拍之于女人,iPhone之于手机!

来来来,正餐之前,先来一道开胃菜:

注:本文所有测试均在非严格模式下执行!

结果:1,3 

为什么 obj.getInfo() 的结果是3,而不是1?

带着问题,从两个方面来了解 this

一、this 只与函数的执行环境有关,而与声明环境没有关系。

打个不恰当的比喻,好比你的iPhoneX手机,有 faceId 识别功能,()符号代表使用。

你自己用手机,faceId识别-这个是你的,但把你的手机给老王,faceId就懵了,这个不知道是谁!this亦然,关键在谁使用/执行:()    

· 构造函数: 

结果:"Marc"、"未知"

· 对象 

 结果:"Marc"、"未知"

· DOM

结果:"Marc"、"wang"

二、 在非箭头函数下, this 指向调用其所在函数的对象,指向遵循就近原则;
如果箭头函数被非箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this。

先定义一个全局变量,不同应用场景来测试:

1、全局

结果:1,指向Window 对象,等同于:window.num;

2、对象

结果:1,指向 定义的对象 obj;

当然,取变量:console.log(num);  还是 1

3~6 分别是,this的4种绑定规则:默认绑定、隐式绑定、显示绑定、new 绑定。优先级从低到高!

3、默认绑定

普通函数,将全局对象绑定this上

结果:1,指向Window 对象;等同于:window.fn();

console.log(num);  结果才是:2

4、隐式绑定

需要特别注意第二种情况!

结果:2,1

5、显示绑定 call、apply

this就指向第一个参数,如果是null,则指向window 

结果:[1,3,5]  

6、new 绑定
构造函数,this会指向对象实例

结果:3、true ,指向 实例 fx;

7、多层调用链

结果:2,1

8、构造函数内 return

构造函数,如果返回值是一个对象(null 除外),this指向返回的对象,否则还是指向构造函数的实例!

· 返回函数、数组、对象

结果:undefined

· 返回 undefined、字符串、数字、null、布尔值

结果:2

9、定时器

.定时器(匿名函数)内没有默认的宿主对象,所以this指向window

结果:true,true

10、DOM  
this 指向触发事件的 DOM 元素本身

11、箭头函数

如果箭头函数被非箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this

结果:1,1,5

如果这样呢:

结果:1,1,5

回过头来,文章开头的“开胃菜”,是不是有答案了!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复