JavaScript中this函数使用实例解析


Posted in Javascript onFebruary 21, 2020

这篇文章主要介绍了JavaScript中this函数使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

普通函数

普通函数中的this,普通函数中的this表示调用此函数时的对象,如下例:

var x=11;
var obj={
 x:22,
 say:function(){
 console.log(this.x)
 }
}
obj.say();
//console.log输出的是22
//调用say函数的是对象obj,所以this指代对象obj,输出的就是obj对象里的x值,即22。

箭头函数

箭头函数中的this,资料上说的箭头函数内部是没有this的,也就是说,箭头函数里面的this会继承自外部的this,下面有个例子,用来详细说明下:

var x=11;
var obj={
 x:22,
 y:this,//window
 say:()=>{
 console.log(this.x);
 }
}
obj.say();
//输出的值为11
console.log(obj.y);
//输出的值为window对象
//obj对象中的this指代的就是window,也就是全局环境,因为箭头函数中的this就会就近找到上一个对象中this所指代的对象,从以上例子可以看出来,obj内部属性y就为obj内部this指代的对象,输出是window。

由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值,

1、所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数,对它的 this 毫无影响。

2、考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。(可以忽略是否在严格模式下的影响)

因为箭头函数可以捕获其所在上下文的this值 所以

function Person() { 
 this.age = 0; 
 setInterval(() => {
 // 回调里面的 `this` 变量就指向了期望的那个对象了
 this.age++;
 }, 3000);
}

var p = new Person();

两个例子加深印象

普通函数

var a=11
function test1(){
 this.a=22;
 let b=function(){
 console.log(this.a);
 };
 b();
}
var x=new test1();
//输出11

为什么会输出11?因为普通函数中的this指向的是调用它的对象,如果没有直接调用对象,会指向undefined或者window,一般都会指向window,在严格模式下才会指向undefined。上述的例子中,并没有明确的调用对象,而普通函数中的this并不会向上继续找对象,所以直接返回window。

箭头函数

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//输出22

箭头函数中会往上寻找this,直到找到所代表的this为止。例子中,构造函数被实例化成为一个对象x,那x中的this指代的就是对象x本身,所以箭头函数this就代表x对象,x对象内部的a值为22,所以输出22。

总结

1、箭头函数中的this是在声明中就定义好了的,而普通函数中的this则是在调用时定义好的。

2、箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值。正是因为它没有this,所以也就不能用作构造函数。,

3、若想改变this指向可以用bind方法。bind方法在ES5引入, 在Function的原型链上, Function.prototype.bind。通过bind方法绑定后, 函数将被永远绑定在其第一个参数对象上, 而无论其在什么情况下被调用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
javascript实现简单的进度条
Jul 02 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
JS实现判断移动端PC端功能
Feb 21 #Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 #Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 #Javascript
纯js实现无缝滚动功能代码实例
Feb 21 #Javascript
You might like
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP getName()函数讲解
2019/02/03 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
详解Python 正则表达式模块
2018/11/05 Python
彻底理解Python中的yield关键字
2019/04/01 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python版百度语音识别功能
2019/07/09 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
python db类用法说明
2020/07/07 Python
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
推荐信格式范文
2014/05/09 职场文书
安全目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
感恩教师节主题班会
2015/08/12 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL