js中this的指向问题归纳总结


Posted in Javascript onNovember 28, 2018

前言

js中this指向问题是个老生常谈的问题了,下面这篇文章再来给大家介绍下,大家可以看看,更深入的了解了解,下面话不多说了,来一起看看详细的介绍吧

this

this:上下文,会根据执行环境变化而发生指向的改变.

1.单独的this,指向的是window这个对象

alert(this); // this -> window

2.全局函数中的this

function demo() {
 alert(this); // this -> window
}
demo();

在严格模式下,this是undefined.

function demo() {
 'use strict';
 alert(this); // undefined
}
demo();

3.函数调用的时候,前面加上new关键字

所谓构造函数,就是通过这个函数生成一个新对象,这时,this就指向这个对象。

function demo() {
 //alert(this); // this -> object
 this.testStr = 'this is a test';
}
let a = new demo();
alert(a.testStr); // 'this is a test'

4.用call与apply的方式调用函数

function demo() {
 alert(this);
}
demo.call('abc'); // abc
demo.call(null); // this -> window
demo.call(undefined); // this -> window

5.定时器中的this,指向的是window

setTimeout(function() {
 alert(this); // this -> window ,严格模式 也是指向window
},500)

6.元素绑定事件,事件触发后,执行的函数中的this,指向的是当前元素

window.onload = function() {
 let $btn = document.getElementById('btn');
 $btn.onclick = function(){
 alert(this); // this -> 当前触发
 }
}

7.函数调用时如果绑定了bind,那么函数中的this指向了bind中绑定的元素

window.onload = function() {
 let $btn = document.getElementById('btn');
 $btn.addEventListener('click',function() {
 alert(this); // window
 }.bind(window))
}

8.对象中的方法,该方法被哪个对象调用了,那么方法中的this就指向该对象

let name = 'finget'
let obj = {
 name: 'FinGet',
 getName: function() {
 alert(this.name);
 }
}
obj.getName(); // FinGet
---------------------------分割线----------------------------
let fn = obj.getName;
fn(); //finget this -> window

腾讯笔试题

var x = 20;
var a = {
 x: 15,
 fn: function() {
 var x = 30;
 return function() {
  return this.x
 }
 }
}
console.log(a.fn());
console.log((a.fn())());
console.log(a.fn()());
console.log(a.fn()() == (a.fn())());
console.log(a.fn().call(this));
console.log(a.fn().call(a));

答案

1.console.log(a.fn());

对象调用方法,返回了一个方法。

# function() {return this.x}

2.console.log((a.fn())());

a.fn()返回的是一个函数,()()这是自执行表达式。this -> window

# 20

3.console.log(a.fn()());

a.fn()相当于在全局定义了一个函数,然后再自己调用执行。this -> window

# 20

4.console.log(a.fn()() == (a.fn())());

# true

5.console.log(a.fn().call(this));

这段代码在全局环境中执行,this -> window

# 20

6.console.log(a.fn().call(a));

this -> a

# 15

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 #Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 #Javascript
Vue触发式全局组件构建的方法
Nov 28 #Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 #Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 #Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 #Javascript
You might like
其他功能
2006/10/09 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
php防止sql注入简单分析
2015/03/18 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
vue使用codemirror的两种用法
2019/08/27 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python 解压pkl文件的方法
2018/10/25 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Django实现文件上传下载功能
2019/10/06 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
NULL是什么,它是怎么定义的
2015/05/09 面试题
智乐游戏测试笔试题
2014/05/21 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
商场营业员岗位职责
2015/04/14 职场文书
教师岗位说明书
2015/09/30 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python