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 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
详解Typescript里的This的使用方法
Jan 08 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 分库分表hash算法
2009/11/12 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
javascript控制台详解
2015/06/25 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
EJB实例的生命周期
2016/10/28 面试题
我的网上商城创业计划书
2013/12/26 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
汉语拼音教学反思
2016/02/22 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python