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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 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
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
Bootstrap插件全集
2016/07/18 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
js编写选项卡效果
2017/05/23 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python模拟登陆实现代码
2017/06/14 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
全球立体声:World Wide Stereo
2018/09/29 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
会计学自我鉴定
2014/02/06 职场文书
生日庆典策划方案
2014/06/02 职场文书
会计专业自荐书
2014/07/08 职场文书
个人租房协议书范本
2014/09/30 职场文书
优秀教师先进材料
2014/12/16 职场文书
亲情作文之母爱
2019/09/25 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python