this指向问题的经典场景

dongxiawu 发布于2019-08-30 15:56 / 3275人阅读

摘要：常用场景以函数形式调用指向指向了以方法形式调用指向调用方法的那个对象指向颜色为红色构造函数调用指向实例的对象此处分别指向的实例对象控制台输出使用对象的方法时指向报错因为是的一个方法更改错误使颜色为调用了这个方法此时的指向此操作将指向的赋给则

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的一个方法.

更改错误,使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, …}
 box

box.onclick=function(){ 
    var me = this;
    function fn1(){ 
        console.log(me); 
    } 
   fn1(); //事件触发了fn1,me指向box,所以console的是box
   console.log(this);//事件处理函数中的this,该事件由谁触发,this就指向谁
 };
 控制台输出:
 box
 box

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

云服务器私有云 this的指向改变this指向 this的用法 php 的$this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117478.html

this指向问题的经典场景

摘要：常用场景以函数形式调用指向指向了以方法形式调用指向调用方法的那个对象指向颜色为红色构造函数调用指向实例的对象此处分别指向的实例对象控制台输出使用对象的方法时指向报错因为是的一个方法更改错误使颜色为调用了这个方法此时的指向此操作将指向的赋给则 THIS常用场景 1、以函数形式调用,this指向window function fn(m,n){ m=2; n=3; console...

jeyhan 2019-08-02 14:26 评论0 收藏0
this指向问题的经典场景

摘要：常用场景以函数形式调用指向指向了以方法形式调用指向调用方法的那个对象指向颜色为红色构造函数调用指向实例的对象此处分别指向的实例对象控制台输出使用对象的方法时指向报错因为是的一个方法更改错误使颜色为调用了这个方法此时的指向此操作将指向的赋给则 THIS常用场景 1、以函数形式调用,this指向window function fn(m,n){ m=2; n=3; console...

HitenDev 2019-08-26 13:32 评论0 收藏0
JavaScript继承背后的场景-prototype,__proto__, [[prototype

摘要：实例可以通过代理来找到它，并用来检测其构造函数。经典继承图这也是通过构造函数来创建对象，但是在这一系列的对象和实例之间我们的焦点是放在原型链上。尽管，但构造函数的属性并不是对象自己的属性，它实际上是通过寻找原型链获得的，即所指向的地方。继承是面向对象编程语言的一大核心功能点，虽然JavaScript并不是一门真正意义上的面向对象的编程语言，但也通过某种手段实现了继承这一功能，最常见的...

邹立鹏 2019-08-26 10:14 评论0 收藏0
夯实JS基础（一）：this的指向问题和经典面试题

摘要：很多高级编程语言都给新创建的对象分配一个引用自身的指针比如中的指针，中的，也有指针，虽然它的指向可能相对复杂些，但是指向的，永远只可能是对象。很多高级编程语言都给新创建的对象分配一个引用自身的指针,比如JAVA、C++中的this指针，python中的self，JavaScript也有this指针，虽然它的指向可能相对复杂些，但是this指向的，永远只可能是对象。一、在一般函数方法...

DirtyMind 2019-08-05 17:44 评论0 收藏0
夯实JS基础（一）：this的指向问题和经典面试题

摘要：很多高级编程语言都给新创建的对象分配一个引用自身的指针比如中的指针，中的，也有指针，虽然它的指向可能相对复杂些，但是指向的，永远只可能是对象。很多高级编程语言都给新创建的对象分配一个引用自身的指针,比如JAVA、C++中的this指针，python中的self，JavaScript也有this指针，虽然它的指向可能相对复杂些，但是this指向的，永远只可能是对象。一、在一般函数方法...

lucas 2019-08-26 10:29 评论0 收藏0