javascript this指向相关问题及改变方法


Posted in Javascript onNovember 19, 2020

在学习javascript中我们往往会被this的指向问题弄的头昏转向,今天我们就来学习一下this的指向问题,和改变this指向的方法。

一.this的指向问题

在学习this的指向问题之前我们需要明白两点:

1:this永远指向一个对象;

2:this的指向完全取决于函数调用的位置;

针对上面第一点我们能很好理解,因为在javascript中一切都是对象。第二点其实也是好理解,当函数调用的位置不同是,this的指向的对象就不同,所以可以说this的指向可以动态变换的,下面我们先通过一个简单的例子来看一下this的指向是变换的

<script>
function fun(){
   console.log(this.name);

 }
 var change={
   name:'hello',
   f:fun
 }
 var name ='world'
 var result=change.f()//hello
 fun();//world
</script>

通过上述例子我们可以很清楚的看到this的指向的变化,因为有一个函数在对象change里面,所以this就是指向的函数外部的对象,所以输出了hello。

想必看完上述例子后大家对this的动态指向切换有了一定的了解。

那么接下来,我们对this使用最频繁的几种情况做一个总结,最常见的基本就是以下3种:

对象中的方法,事件绑定 ,构造函数 ,定时器

前两个就不必多说了,我们看一下定时器中的this指向问题,

var obj = {
  fun:function(){
    this ;
  }
}
​
setInterval(obj.fun,1000);   // this指向window对象
setInterval('obj.fun()',1000); // this指向obj对象

setInterval() 是window对象下内置的一个方法,接受两个参数,第一个参数允许是一个函数或者是一段可执行的 JS 代码,第二个参数则是执行前面函数或者代码的时间间隔;

在上面的代码中,setInterval(obj.fun,1000) 的第一个参数是obj对象的fun ,因为 JS 中函数可以被当做值来做引用传递,实际就是将这个函数的地址当做参数传递给了 setInterval 方法,换句话说就是 setInterval 的第一参数接受了一个函数,那么此时1000毫秒后,函数的运行就已经是在window对象下了,也就是函数的调用者已经变成了window对象,所以其中的this则指向的全局window对象;

而在 setInterval('obj.fun()',1000) 中的第一个参数,实际则是传入的一段可执行的 JS 代码;1000毫秒后当 JS 引擎来执行这段代码时,则是通过 obj 对象来找到 fun 函数并调用执行,那么函数的运行环境依然在 对象 obj 内,所以函数内部的this也就指向了 obj 对象;

除了这些我们还需要理解三个可以改变this指向的函数,包括箭头函数,call(),apply()

箭头函数:官方有解释,箭头函数引入的其中一个原因,就是其不绑定this;在箭头函数中,箭头函数的this被设置为封闭的词法环境的,换句话说,箭头函数中的this取决于该函数被创建时的环境。

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
// 接着上面的代码
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

无论如何,foo 的 this 被设置为他被创建时的环境(在上面的例子中,就是全局对象)。这同样适用于在其他函数内创建的箭头函数:这些箭头函数的this被设置为封闭的词法环境的。

// 创建一个含有bar方法的obj对象,
// bar返回一个函数,
// 这个函数返回this,
// 这个返回的函数是以箭头函数创建的,
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置,这反过来又设置了返回函数的值。
var obj = {
 bar: function() {
  var x = (() => this);
  return x;
 }
};

// 作为obj对象的一个方法来调用bar,把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this,
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意,如果你只是引用obj的方法,
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后,this指向window,因为它从 bar 继承了this。
console.log(fn2()() == window); // true

call和apply方法:将一个对象作为call或者apply的第一个参数,this将会被绑定到这个参数对象上

var obj = {parent:'男'};
var parent = '28';
function child(obj){
  console.log(this.parent);
}
child(); // 28 
child.call(obj); //男
child.apply(obj); //男

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

Javascript 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
JavaScript实现alert弹框效果
Nov 19 #Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
原生js实现自定义消息提示框
Nov 19 #Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 #Javascript
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
elementUI同一页面展示多个Dialog的实现
Nov 19 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
详解PHP中的Traits
2015/07/29 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
vue单元格多列合并的实现
2020/11/26 Vue.js
Python 的 Socket 编程
2015/03/24 Python
详解Python中的type()方法的使用
2015/05/21 Python
全面了解python字符串和字典
2016/07/07 Python
python发送邮件功能实现代码
2016/07/15 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python 获取url中的参数列表实例
2018/12/18 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
家长评语和期望
2014/02/10 职场文书
结婚老公保证书
2015/02/26 职场文书
法定代表人身份证明书
2015/06/18 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL