当前位置:首页 » 《资源分享》 » 正文

一篇文章带你看懂js函数指针this_csdncaoguo940713的博客

24 人参与  2021年10月16日 17:23  分类 : 《资源分享》  评论

点击全文阅读


函数的this指向问题一直都是困扰包括我在内的不少开发者的问题,我一直以来都是这样看待这个问题的,函数属于谁它的this就指向谁,直到我遇到了一个无法用这个简单粗暴的方法辨识的场景时,我才真正弄明白,函数的this并不一定指向占有这个函数的对象,而指向调用这个函数的对象,从现在起请牢牢记住这句话

函数的this并不一定指向占有这个函数的对象,而指向调用这个函数的对象

函数的this并不一定指向占有这个函数的对象,而指向调用这个函数的对象

函数的this并不一定指向占有这个函数的对象,而指向调用这个函数的对象

虽然结论很重要,不过这个结论并不是什么新鲜玩意儿,在有关js的书籍教程里面,都能找到这个结论,废话不多说,我通过源代码来推导这个结论,为了简化代码省略<script>标签

function test(){ console.warn('test', this) }; 
test();
//输出Window {0: Window, window: Window...

 控制台输出啥没人不知道吧,如果不知道建议去B站补超哥的视频,这里输出的是window,这里的test()等价于window.test(),在script里面声明的函数会自动变成全局的

//第一种写法等价于
var test = function(){ console.warn('test', this) }; 
test();

也就是变成window的成员函数,在这里有个直观的认识,test属于window,所以它输出的对象是window,但是记住这个结论是不对的

//上面两种写法等价于
window.test = function(){ console.warn('test', this) }; 
window.test();

为了阻止test提升为window的成员,我们使用es6的let/const来声明

let test = function(){ console.warn('test', this) };
window.test();
//window.test is not a function

问题来了,这里我们直接调用test()控制台输出的是谁?结果输出的还是window,所以直接推翻上面的说法,test不是window的成员却仍然指向window

let test = function(){ console.warn('test', this) };
test();
//输出Window {0: Window, window: Window...

 其实只到这里,这个结论就可以验证了,但是一定有同学不满意,test都不是window的成员,window是怎么调用它的,初学者不建议在往下看,记住上面的代码和结论就够了,在js里面每一个函数都有一个调用者,如果使用匿名的形式调用,浏览器会自动帮我们补全,怎么理解这个东西呢,函数的一般调用形式为obj.function(),如果简写成function(),浏览器会在运行的时候自动把函数临时加到当前作用域里面,并使用this.function()的方式调用,体现了js的运行时的特性

let test = function(){ console.warn('test', this) };
test();

//等价于下面的形式
let test = function(){ console.warn('test', this) };
test.call(this)

也就是使用Function原型中的call方法把this直接设置为了当前的this,而在script标签里面this就是window,实际上所有一般的调用形式都会被转化为call,下面的demo.test()等价于demo.test.call(demo)


let demo = {};
demo.test = function(){ console.warn('test', this) };
demo.test();
//输出test {test: ƒ}

let demo = {};
demo.test = function(){ console.warn('test', this) };
test();
//输出test is not defined

let demo = {};
let test = function(){ console.warn('test', this) }; 
demo.test = test;
test.call(demo);
//输出test {test: ƒ}

let demo = {};
demo.test = function(){ console.warn('test', this) };
demo.test.call(demo);
//输出test {test: ƒ}

 所以其实上面的结论可以表述为,函数的this指向call函数的第一个参数,也就是call的第一个参数是谁,函数的this就指向谁,有错误的地方欢迎大家批评指正,有不懂可以问我


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/29949.html

函数  指向  输出  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1