在这里必须要提一句的是,this指向是学习js必须要掌握的(必须),再开始之前先看底部的总结,然后回上面看例子便一目了然。

例子1:

function a(){
var user = "TangSir";
console.log(this.user); //undefined
console.log(this); //Window
}
a();
看总结第2条,这里函数本身没有被父级对象调用,那么这里就指向window
function a(){
var user = "TangSir";
console.log(this.user); //undefined
console.log(this);  //Window
}
window.a();
可以发现是一样的,这是因为window是全局对象,这里的a是被window点出来的,所以指向window(在这里也可以把window理解为a的父级,那么就是总结第3条)

例子2:
var o = {
user:"TangSir",
fn:function(){
console.log(this.user); //TangSir
}
}
o.fn();
这里的this指向o(总结第3条)
var o = {
user:"TangSir",
fn:function(){
console.log(this.user); //TangSir
}
}
window.o.fn();
这里加了个window,但是fn的父级还是o,是o调用了它(总结第3条)
var o = {
a:12,
b:{
a:14,
fn:function(){
console.log(this.a); //14
}
}
}
o.b.fn();
这里父级是b,那么this指向b(总结第3条)
例子3:
var o = {
a:12,
b:{
a:14,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
这里为何是undefined而不是14?是谁最后调用了它,这里是j(),那么this只能是window(总结第1条)
例子4:

function Fn(){
this.user = "TangSir";
}
var a = new Fn();
console.log(a.user); //TangSir
构造函数的this指向函数实例本身,这里赋给了a,等于赋值了一份给了a,那么a.user肯定也是TangSir(总结第5条)

例子5:
function Fn()
{
this.user = 'TangSir';
return {};
}
var a = new Fn();
console.log(a.user); //undefined
因为返回的是对象,所以this指向该对象,所有是undefined(总结第6条)
function Fn()
{
this.user = 'TangSir';
return function(){};
}
var a = new Fn();
console.log(a.user); //undefined
function同样是对象,所以this指向该对象,所有是undefined(总结第6条)
function Fn()
{
this.user = 'TangSir';
return 1;
}
var a = new Fn();
console.log(a.user); //TangSir
这里this指向函数实例本身,所以是TangSir(总结第6条)
function Fn()
{
this.user = 'TangSir';
return undefined;
}
var a = new Fn();
console.log(a.user); //TangSir
这里this指向函数实例本身,所以是TangSir(总结第6条)
function Fn()
{
this.user = 'TangSir';
return null;
}
var a = new Fn();
console.log(a.user); //TangSir
函数里有null比较特殊,这里this指向函数实例本身,所以是TangSir(总结第6条)
例子6:
var obj = {
name:"TangSir",
fn:function(){
fn1=()=>{
console.log(this.name); //TangSir
}
fn1();
}
}
obj.fn();

这里箭头函数父级是fn,去掉父级后,fn1()此时的父级就是obj,那么this.name自然是TangSir(总结第6条和第3条)

例子7:

var o = {
a:12,
b:{
a:14,
c:{
a:15,
d:function(){
console.log(this.a); //15
function e(){
console.log(this.a); //undefined
f();
}
e();
function f(){
console.log(this.a); //undefined
}
g=()=>{
console.log(this.a); //15
}
g();
}
}
}
}
o.b.c.d();
这里第一个console是15(总结4),第二和第三个console是undefined,不然理解,它们的调用时f()和e(),所以是undefined,第三个是箭头函数,根据例子6结合总结第7条,得出15

总结:

1、this在函数定义的时候是没办法确定指向的,只有函数执行的时候,最后谁调用了它才能确定this指向谁

2、如果函数中有this,但是函数本身没有被父级(上一级)对象调用,那么就指向window

3、如果函数中有this,且函数本身被父级(上一级)对象调用,那么this就指向上一级对象

4、如果函数中有this,且函数中有多个对象,尽管函数被最外层对象调用,但this仍然指向父级(上一级)对象

5、构造函数中this,指向构造函数实例,如果创建的实例赋给对象,那么等于复制了一份给对象,该对象也拥有实例中的this(new出来的构造函数可以改变this指向)

6、构造函数中带return,返回值若是对象,this指向的是那个返回的对象,返回值若是null,this还是指向那个构造函数实例

7、es6中=>箭头函数中的this,去掉当前函数的父级(上一级)对象,再看this指向谁,此时指向谁就是谁(结合第3条)

彻底搞懂js this指向问题的更多相关文章

  1. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  2. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  3. 彻底搞懂 JS 中 this 机制

    彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

  4. 一文搞懂 js 中的各种 for 循环的不同之处

    一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...

  5. 彻底搞懂js __proto__ prototype constructor

    在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图 ...

  6. 通过一张简单的图,让你彻底地搞懂JS的==运算

    大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读ECMAScript规范的基础上,我画了一 ...

  7. 晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?

    晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...

  8. 一文彻底搞懂JS前端5大模块化规范及其区别

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  9. Spirit带你彻底搞懂JS的6种继承方案

    JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){ ...

随机推荐

  1. linux 网络编程 基础

    网络编程基础 套接字编程需要指定套接字地址作为参数,不同的协议族有不同的地址结构,比如以太网其结构为sockaddr_in. 通用套接字: struct sockaddr { sa_family_t ...

  2. 使用GitHub API上传文件及GitHub做图床

    本文介绍GitHub API基础及上传文件到仓库API,并应用API将GitHub作为图床 GitHub API官方页面 GitHub API版本 当前版本为v3,官方推荐在请求头中显示添加版本标识. ...

  3. mon的稳定性问题

    MON的稳定性问题: mon的选举风暴影响客户端IO LevelDB的暴涨 频繁的客户端请求的DDOS mon选举风暴: monmap会因为mon之间或者mon与客户端之间网络的影响或者消息传递的异常 ...

  4. freshclam

    1 3 * ** /usr/local/clamav/bin/freshclam 定时更新.定时杀毒

  5. ABBYY FineReader如何将图片转换为Excel

    ABBYY FineReader的OCR文字识别功能很强大,不但可以将文件转换为文本文档或Word文档,也可以识别PDF文件或者图片上的表格,并且转换为Excel文件.下面我就为大家演示一下怎么用AB ...

  6. CorelDRAW 2017提示已安装另一版本导致安装失败的解决办法

    Coreldraw提示"由于您已安装了另一版本,因此无法安装本产品.要安装本产品,您必须首先卸载现有版本"的情况在Coreldraw X8及Coreldraw 2017上都存在,下 ...

  7. Boom 3D支持的音乐都有什么格式

    Boom 3D作为一款专业的3D环绕音效软件,支持多种音频.视频播放格式,除了常用的MP3.WMA.WAV音频格式外,Boom 3D还支持FLAC.AAC这些比较高级的音频格式.同时,Boom 3D还 ...

  8. Java中的第三大特性-多态性

    一.多态性的概念 多态性是以继承为基础上的,举个例子,人属于动物,狗也属于动物,所以动物就是父类,而人和狗都是动物的子类,都属于动物. 二.多态的使用 (1)多态一般用于方法参数或者方法返回值,特别当 ...

  9. Elasticsearch7.7.0安装

    安装 下载解压 elasticsearch-7.7.0-linux-x86_64.tar.gz tar -zxvf elasticsearch-7.7.0-linux-x86_64.tar.gz -C ...

  10. Java基础教程——Scanner类

    Scanner属于java.util包. java.util包是Java内置的一个工具包,其中包含一系列常用的工具类,如处理日期.日历.集合类: 如果要使用到该包中的类,必须显式引入包名:import ...