js 上下箭头滚动_JS中的this完全讲解,再也不会被this搞晕了

50b203b6557b9563b5b173bcc19c1709.png

关于This对象

js 中的this 是一个比较难理解的对象;所以也经常作为面试的考点,考察应聘者的js 基础能力;其实this的指向也就那么几种情况,接下来我们一一看一下:

函数中的this取何值是在函数真正被调用时确定的(也就是运行时),函数定义时确定不了

1、在全局调用函数 this 指向 window

var a=10;
function fn(){console.log(this);// widowconsole.log(this.a);//10
}
var foo=document.getElementById('foo');
foo.addEventListener('click',fn);
function fn(){console.log(this); // <div id="foo">click</div>
}
var obj={name:"daxiong",fn:function(){console.log(this);}
};
obj.fn(); // obj
var obj={name:"daxiong",fn:function(){console.log(this);}
};
var f1= obj.fn;
f1(); // window
var obj={name:'daxiong',fn:function(){return function(){console.log(this);}}
};
obj.fn()(); // window
var obj={name:'daxiong',fn:function(){console.log(this); var f1=function(){console.log(this);}f1();}
};
obj.fn();
// obj
// window
var obj={name:'daxiong',fn:function(){console.log(this);var f1=()=>{console.log(this);}f1();}
}
obj.fn();
//obj;
var f2=obj.fn;
f2(); 
// window
// window
所以说 箭头函数f1的作用域是 obj.fn的作用域;

5、当然也有例外,比如箭头函数中的this,是词法作用域,this 指向定义所在的作用域。

var bar =foo();

4、如果都不是的话,就是默认绑定。在严格模式下,就绑定到 undefined,否则绑定到全局对象。

var bar=obj1.foo();

3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this 指向那个上下文对象。

var bar =foo.call(obj2);

2、函数是否通过call、apply (显示绑定)?如果是this指向的是指定的对象;

var bar = new foo();

1、函数是否在new 中调用(new绑定)?如果是的话this 绑定的就是新创建的对象。

8、综上所述,我们可以使用下面的规则,对this的指向进行判断:

function foo(){console.log(this.a);
}
var obj={a:1
}
foo.call(obj); //1;

1、call、apply 可以显式绑定;这两个函数的第一个参数是一个对象;他们会把这个对象绑定到this,接着调用函数时指定这个this;

7、显式绑定 改变this的指向

//伪代码;
var new1=function(fn){var newObj=Object.create(fn);fn.call(newObj);return newObj;
};

4、返回这个对象;

3、执行构造函数中的代码(这个函数的调用会绑定到新对象的this);

2、将这个新对象的原型指向 构造函数的 Prototype

1、创建一个新的对象;

我们看一下 new 关键字主要做了哪些事:

6、构造函数中的this 指向创建的实例对象

f1定义的作用域,是obj.fn 的作用域;所以f1 的作用域指向了obj;

箭头函数中this 指向与其他不同,他是在函数定义是就确定了(词法作用域);

5、箭头函数中的This

第一个输出是obj是一位函数在obj中调用了; f1的调用为什么会是window呢:因为他没有绑定到任何一个对象中;

我们在看下这个例子:

在红皮书中有这么一句话:匿名函数的执行环境具有全局性 所以这个输出的是window; 那么为什么呢,其实在这个上下文(执行环境)中匿名函数并没有绑定到任何一个对象中,所以指向了window (非严格模式)

4、匿名函数中的 this 具有全局性

为什么会指向window呢,以为这个函数的指针已经指向了 f1 而f1 的执行环境时 window 所以指向了window;

如果我们做个变形:

3、函数作为对象方法调用时,this就等于那个对象;

这个不难理解;由于DOM元素 调用的他,所以指向了DOM元素

2、DOM事件中的this 指向DOM节点

因为函数是在全局调用的,所以this 指向 window;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/303049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

9张图,Kafka为什么要放弃Zookeeper

最近&#xff0c;confluent社区发表了一篇文章&#xff0c;主要讲述了Kafka未来的2.8版本将要放弃Zookeeper&#xff0c;这对于Kafka用户来说&#xff0c;是一个重要的改进。之前部署Kafka就必须得部署Zookeeper&#xff0c;而之后就只要单独部署Kafka就行了。[1]1.Kafka简介Ap…

Python能用来做什么?以下是Python的三大主要用途

如果你想学Python&#xff0c;或者你刚开始学习Python&#xff0c;那么你可能会问&#xff1a;“我能用Python做什么&#xff1f;”这个问题不好回答&#xff0c;因为Python有很多用途。但是随着时间&#xff0c;我发现有Python主要有以下三大主要应用&#xff1a; Web开发 数据…

qbuttongroup如何都不选中_全程马拉松,半程马拉松该如何跑?很多人都不知道这些细节...

现在已经到12月份了&#xff0c;全国各地的马拉松也接近尾声&#xff0c;回想自己这一年参加了多少次全程马拉松或半程马拉松&#xff1f;很多人跑步最初的宗旨是为了减肥、为了健康&#xff0c;为了让自己拥有一个好身体&#xff0c;可是不知不觉中在朋友又或自己的兴趣中“投…

通过Dapr实现一个简单的基于.net的微服务电商系统(五)——一步一步教你如何撸Dapr之状态管理...

状态管理和上一章的订阅发布都算是Dapr相较于其他服务网格框架来讲提供的比较特异性的内容&#xff0c;今天我们来讲讲状态管理。目录&#xff1a;一、通过Dapr实现一个简单的基于.net的微服务电商系统二、通过Dapr实现一个简单的基于.net的微服务电商系统(二)——通讯框架讲解…

过Div将页面分三块(上,中,下),然后通过Ext来改变Content的内容(三)--终结版

2019独角兽企业重金招聘Python工程师标准>>> 这几天的页面重构终于快要结束了。 最终页面架构选择了Sitemesh&#xff0c;经过昨天下午及今天上午的调试终于把Sitemesh下css、js问题解决了。 使用Sitemesh总结以下几点&#xff1a; 1、<decorator:head />放在…

Python+人工智能的超强组合,再不学就跟不上时代啦!

《Python人工智能》原价 899.00 现超 410 人参团仅售 199.00 点击文末阅读原文立即参团参团&#xff0c;咨询&#xff0c;查看课程&#xff0c;请点击【阅读原文】↓↓↓

如何证明服从卡方分布_谈谈抽样分布定理

各位阿娜答&#xff0c;这个月就更新了一篇文章&#xff0c;这都月底了&#xff0c;还有两次自荐机会没用&#xff0c;所以最后这几天要更两篇文章&#xff0c;大家敬请期待&#xff01;明明是夏天&#xff0c;但却是个多事之秋啊~(ง •_•)ง2020年注定是不平凡的一年&#x…

C#中ManualResetEvent用法简介

简单介绍多个线程可以通过调用ManualResetEvent对象的WaitOne方法进入等待或阻塞状态。当控制线程调用Set()方法&#xff0c;所有等待线程将恢复并继续执行。ManualResetEvent是如何工作的在内存中保持着一个bool值&#xff0c;如果bool值为False&#xff0c;则使所有线程阻塞&…

anaconda和python有什么不一样_黄山毛峰的味道为什么会不一样?

黄山毛峰&#xff0c;最早为人所熟知的黄山名茶&#xff0c;最经典的绿茶&#xff0c;特别是那种清香清爽的味道&#xff0c;很受茶友的喜爱。这两年经常接到茶友的电话问&#xff0c;为什么之次每次买的黄山毛峰都不一样&#xff0c;在不同的茶叶店&#xff0c;买的味道都不一…

Newbe.Claptrap 0.10.2 发布,Blazor 演示

Newbe.Claptrap 0.10.2 发布&#xff0c;我们为项目模板引入了 Minion 以及 Blazor 制作的交互界面。更新内容 类库常规升级升级了相关的所有类库至最新版本。包括 Dapr SDK 1.1 等等。项目模板增强现在&#xff0c;我们为最新的项目模板引入了 Minion 以演示如何使用 Minion 处…

Linux资料分享,强势来袭!

小编从大学开始&#xff0c;便开启资料收集功能。随着大数据时代的来临&#xff0c;计算机发展进入新的阶段&#xff0c;再加上日常的深入研究&#xff0c;小编收集整理了丰富的Linux资料&#xff0c;内容涵盖“集群类”&#xff0c;“监控类”、“编程类”“系统类”等。这次小…

es6 ie不兼容 函数_ES6:什么是块级作用域?

在 ES5 只有全局作用域和函数作用域&#xff0c;没有块级作用域&#xff0c;这带来很多不合理的场景。我们先来看一下下面这种情况&#xff1a;内层变量可能会覆盖外层变量。var txt 外层变量-->你好呀;function fn() {console.log(txt);if (false) {var txt 内层变量--&g…

一个简单的规则引擎例子

本例使用的规则引擎包是RulesEngine&#xff0c;关于RulesEngine的介绍&#xff0c;请自行补充&#xff0c;这里只是一个极简单使用场景。例子大体就是用户有一些优惠券&#xff0c;系统会根据用户订单情况&#xff0c;筛选可以使用的优惠券供用户选择&#xff0c;用户选择后会…

程序员面试必备的20条Python经典面试题

1、Python如何实现单例模式&#xff1f;Python有两种方式可以实现单例模式&#xff0c;下面两个例子使用了不同的方式实现单例模式&#xff1a;1.class Singleton(type):def __init__(cls, name, bases, dict):super(Singleton, cls).__init__(name, bases, dict)cls.instance …

Active Directory系列之十七:实战详解域信任关系

实战详解域信任关系上篇博文中我们对域信任关系作了一下概述&#xff0c;本文中我们将通过一个实例为大家介绍如何创建域信任关系。拓扑如下图所示&#xff0c;当前网络中有两个域&#xff0c;一个域是ITET.COM&#xff0c;另一个域是HOMEWAY.COM。两个域内各有一个域控制器&am…

vim 寄存器 操作_vim指令

vim 是一个基于【动词】 【名词】 建立的语法表。Vim 中常用的名词方位名词表基于字符的移动&#xff1a;h&#xff1a;左j&#xff1a;下k&#xff1a;上l&#xff1a;右 ^ | k 提示&#xff1a; h 的键位于左边&#xff0c;每次按下就会向…

35岁老程序员因身体原因没加班,老板:不想干就滚蛋

近日&#xff0c;某论坛上一名 35 岁老程序员说出了他最近的遭遇&#xff0c;高强度的工作本来就让他感觉越来越劳累&#xff0c;加上又在医院做了一个小手术&#xff0c;于是就按照公司的正常上下班时间下了班&#xff0c;但是领导却说了一句让他难以接受的话&#xff0c;都三…

客制化键盘编程_指尖运动会,谁是打字冠军,双十一机械键盘推荐

机械键盘就只能玩游戏吗&#xff1f;当然不是&#xff0c;其实机械键盘出现还远远早于薄膜键盘&#xff0c;早期类似IBM、AST、HP、康柏一类的品牌机都是标配机械键盘的。早期的机械键盘确实有点笨重&#xff0c;尤其是白轴的机械键盘&#xff0c;让你毕生难忘。比黑轴更加坚硬…

分布式数据库一定会替代Oracle吗?

在传统数据库领域&#xff0c;Oracle一直占据了很大的市场份额&#xff0c;很多企业的业务系统基于此实现OLTP交易场景。近年来&#xff0c;随着分布式技术的发展&#xff0c;分布式数据库逐渐占据了OLTP领域较大的市场&#xff0c;尤其在互联网领域&#xff0c;MYSQL、PG等分布…

数模国赛要点与注意事项全分享!

暑假咻地一下就过去了&#xff0c;转眼数学建模国赛快到了。为了给大家最最直接的帮助&#xff0c;超模君特邀请到周老师为参加国赛的模友们准备了一场干货满满的赛前冲刺直播课。全天候直播&#xff0c;助大家一臂之力&#xff0c;全力冲刺数模国赛&#xff01;周老师拥有多年…