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 相关文章推荐
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
javascript实现数独解法
Mar 14 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
如何通过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
星际争霸中的热键
2020/03/04 星际争霸
PHP的FTP学习(四)
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
PHP 多进程 解决难题
2009/06/22 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
jquery简单体验
2007/01/10 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Ajax基础知识详解
2017/02/17 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python之列表推导式的用法
2019/11/29 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
教师开学感言
2014/02/14 职场文书
留学推荐信怎么写
2015/03/26 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
Redis主从复制操作和配置详情
2022/09/23 Redis