归纳总结this的指向问题

作者: 老王420 | 来源:发表于2018-11-28 21:31 被阅读8次

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


本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

相关文章

  • 归纳总结this的指向问题

    this:上下文,会根据执行环境变化而发生指向的改变. 1.单独的this,指向的是window这个对象 2.全局...

  • JavaScript中this的指向问题归纳总结

    前言 js中this指向问题是个老生常谈的问题了,下面这篇文章再来给大家介绍下,大家可以看看,更深入的了解了解,下...

  • 【原创】this 指向问题总结

    JavaScript 中关于 this 指向的问题是一个令人比较头疼的问题,至于为什么要在 JavaScript ...

  • 总结js中的this指向问题

    一、js默认绑定 在全局声明的对象或者函数都会被认为是window对象下的,这时候默认this是绑定到全局作用域下...

  • 通用模式之

    概念—模式:可以看作是人们对解决某类问题的方法进行的总结和归纳,以及对这种总结和归纳所做的理论概论。 通用模式是对...

  • js中的this指向问题小结

    最近有点闲暇时间,就来总结js中this的指向问题,如有不对,请指出。this指向,网上做多的描述是指向那个最终调...

  • 金字塔工作原理

    金字塔理论本身是一种逻辑思维方式,因而它也可以被应用于归纳和总结问题上面,而对于问题的归纳和总结,又尤以金字塔原理...

  • PMP 知识点中常见的应对方案的总分关系(应付考试用)

    以下的总结来源于各种资料,是对书本和一些习题答案的归纳,总结归纳过程可能断章取义和活动顺序错乱的问题,不保证完全正...

  • 《哈佛大学教育学院思维训练课》书摘和笔记03

    第五章综合和系统化思路 1、归纳法 认真思考并回答下列问题: 请归纳总结话题/问题的主旨或核心观点 目标:抓住重点...

  • This的指向总结

    1、//定时器中this的指向 结论:如果由定时器调用执行了某个函数,函数中有this,则这个this指向wind...

网友评论

    本文标题:归纳总结this的指向问题

    本文链接:https://www.haomeiwen.com/subject/dqctcqtx.html