this指向问题的经典场景

时间: 2019-03-01阅读: 782标签: this

1、以函数形式调用,this指向window

function fn(m,n){
   m=2;
   n=3;
console.log(this.m,n);//undefined,this指向了window
}
fn();


2、以方法形式调用,this指向调用方法的那个对象

box.onclick =function(){
    this.style.backgroundColor = "red"; //this指向box,box颜色为红色
}


3、构造函数调用,this指向实例的对象

function Person(age , name ) {
         this.a = age ;
         this.b = name;
         console.log(this)  // 此处 this 分别指向 Person 的实例对象 p1 p2
     }
    var p1 = new Person(18, 'zs')
    var p2 = new Person(18, 'ww')
 控制台输出:
 Person {a: 18, b: "zs"}
 Person {a: 18, b: "ww"}
 


4、使用window对象的方法使,指向window

var box =document.getElementById("box");
box.onclick =function(){
    setTimeout(function(){
       this.style.backgroundColor="yellow"
    },1000)
}
//报错,因为setTimeout是window的一个方法.解决方法可以在14行加上var me=this,然后在本行用me.style调用

更改错误,使box颜色为yellow

var box =document.getElementById("box");
box.onclick =function(){
    var me = this;//box调用了这个方法,此时的this指向box,此操作将指向box的this赋给me,则得到的me的指向为指向this
    setTimeout(function(){
       me.style.backgroundColor="yellow"//此时的me.style就指的是box的style
    },1000)
}


5、多重场景改变this指向

box.onclick=function(){ 
     function fn1(){ 
          console.log(this); 
     } 
     fn1(); //事件触发了fn1,在函数内部,以函数形式调用this依旧指向window
     console.log(this);//事件处理函数中的this,该事件由谁触发,this就指向谁
};
 控制台输出:
 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
 <div id = "box">box</div>
 
box.onclick=function(){ 
    var me = this;
    function fn1(){ 
        console.log(me); 
    } 
   fn1(); //事件触发了fn1,me指向box,所以console的是box
   console.log(this);//事件处理函数中的this,该事件由谁触发,this就指向谁
 };
 控制台输出:
 <div id = "box">box</div>
 <div id = "box">box</div>


6、call和apply改变this指向

var person={
      name : "lili",
      age: 21
    };
function aa(x,y){
      console.log(x,y);
      console.log(this.name);
    }
  aa.call(person,4,5);
控制台输出
//4 5
//lili
使用call,this指向call后面紧跟的元素,this就指向person


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2268

关闭

解读Javascript中的this机制,别再为了 this 发愁了

JavaScript中有很多令人困惑的地方,或者叫做机制。但是,就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。

理解call apply bind以及其中所谓的改变this指向问题

上述代码很简单,小明有一只铅笔,有一把转笔刀,可以用来削铅笔,当我们调用;很明显会得到:小明使用了转笔刀把铅笔变成了削好的铅笔和木屑

如何修复Vue中的 “this is undefined” 问题

一个可能的原因是混淆了常规函数和箭头函数的用法,如果你遇到这个问题,我猜你用的是箭头函数。如果用常规函数替换箭头函数,它可能会为你修复这个问题。我们再深入一点,试着理解为什么会这样。

彻底淘汰并消除JavaScript中的this

如果这很难明白,为什么我们不停止使用它呢?认真的思考一下?如果你读过 将90%的垃圾扔进垃圾桶后,我如何重新发现对JavaScript的爱, 当我说扔掉它时,你不会感到惊讶,this被丢弃了

Js中call/apply/bind方法函数的原生实现

在JavaScript中,函数中this的指向往往在调用时才可确定,而JavaScript提供了call/apply/bind方法让我们得以显示绑定函数的this指向。它们的第一个参数是一个对象,它们会把这个对象绑定到调用他们的函数内的this

this的指向问题

举个生活中的例子:比如说你在厨房做菜,那厨房就是你的上下文环境,你要拿一点辣椒,顺手就拿到了;比如你在试衣间,那试衣间就是你的上下文环境,你想在试衣间拿一点辣椒,但是这次拿不到了

JS中定时器setInterval和setTImeout的this指向问题

在js中setTimeout和setInterval都是用来定时的一个功能,下面这篇文章主要给介绍了JS中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细,有需要的朋友可以参考借鉴,一起来看看吧。

JavaScript中this指针指向的彻底理解

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

this指针

javascript中this指针是动态的,主要是根据当前函数执行上下文及函数调用方式决定的.以函数方法调用时this指针全局或严格模式中为undefined,以方法调用时this是指针当前对象实例的.以构造函数方式时this指向当前创建的实现对象。

理解JavaScript函数调用和this

我看到很多人都有关于JavaScript函数调用的困惑。特别是,很多人抱怨函数调用中的语义令人困惑。在我看来,通过理解核心函数调用原语,可以清除很多这种混淆,然后查看在该原语之上调用函数作为语法糖的所有其他方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!