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 multibox 全选
Mar 22 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
js截取字符串功能的实现方法
Sep 27 Javascript
element-ui中按需引入的实现
Dec 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的一个登录的类 [推荐]
2007/03/16 PHP
php array_search() 函数使用
2010/04/13 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
vue filters的使用详解
2018/06/11 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python unittest框架操作实例解析
2020/04/13 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
新闻编辑自荐书范文
2014/02/12 职场文书
主题实践活动总结
2014/05/08 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
代办社保委托书范文
2014/10/06 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书