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之函数直接量(function(){})()
Jun 29 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
js友好的时间返回函数
Aug 24 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 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
Snoopy类使用小例子
2008/04/15 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python迭代器的使用方法实例
2013/11/21 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python实现树形打印目录结构
2018/03/29 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python如何从键盘获取输入实例
2020/06/18 Python
flask开启多线程的具体方法
2020/08/02 Python
python 5个实用的技巧
2020/09/27 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
小学生暑假家长评语
2014/04/17 职场文书
党纪处分决定书
2015/06/24 职场文书
高一作文之暖冬
2019/11/09 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
Win10 Anaconda安装python-pcl
2022/04/29 Servers
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android