首页 技术 正文
技术 2022年11月7日
0 收藏 500 点赞 824 浏览 1711 个字

  作为JS中比较容易让人迷糊,同时又很重要的难点。

  关于this指向问题,我们始终要记住一句话,这句话对于理解this指向很重要。这句话是:this要在执行时才能确认它的值,定义时无法确认。

  this的指向出现在以下问题中,我根据我的理解在此做个总结。

  1.全局中的this。很容易理解,在浏览器中,this指向window。

console.log(this) //window

  2.作为普通函数执行的this。在浏览器中,this指向window。

var a=1;
function foo(){
console.log(this);
console.log(this.a);
}foo(); //window 1

  

  3.作为对象方法的函数的this。this指向定义该函数的对象。

var o={
a:1,
foo:function(){console.log(this);console.log(this.a);}
}o.foo(); // {a:1,foo:f} 1

  但是要注意两种情况

  1.当把该对象的方法赋值给一个变量时,此时this的绑定会中断,也就是说此时该变量声明的函数变成了一个普通函数。this指向window

var o={
a:1,
foo:function(){console.log(this);console.log(this.a);}
}var goo=o.foo;//此时this的绑定中断,不再指向对象ogoo(); // window undefined

  2.当在该对象方法中在此定义一个方法,此时this仍然指向window。可能说的有点模糊,看下面代码

var o={
a:1,
foo:function(){
function f(){
console.log(this);console.log(this.a);
};
f();//该函数虽然在foo中定义,但是是作为一个普通函数,而不是作为对象上的直接方法
}
}o.foo();// window undefined

  

  4.作为对象原型链上的this。this会指向该实例对象。

var o={
f:function(){
console.log(this.a+this.b);
}
}var p=Object.create(o);//该方法创建以o为原型的实例对象pp.a=1;
p.b=2;p.f(); //

  

  5.作为new构造器中的this,this会指向创建出来的实例对象。但是想更好的理解这一点,我们需要知道new的构造过程

new过程:

1.创建一个新对象

2.让this指向该对象

3.执行该构造函数中的代码,对this赋值

4.return this对象

但是要注意,若无return 或者 return基本类型值,构造函数返回this。若return一个其他对象的话,则return该对象,this指向该对象。看下面代码

function M(){
this.a=10;
}var o=new M();console.log(o.a); //function N(){
this.a=20;
return {a:30};
} var p=new N();console.log(p.a);//30 这里不是20,因为构造函数返回了一个对象

  6.关于call,apply,bind中的this。这里call和apply很相似,它们只是传入参数的形式不一样,所以只说call和bind。它们都可以改变this的指向。

var a=10;
function f(){
console.log(this.a);
}var p={a:30};f();//10 this指向windowf.call(p);// 30 this指向传入的对象pf.call(null)// 10 this指向window 但是要注意在严格模式下会报错f.bind(p)// 没有任何反应f.bind(p)();////这是因为call是立即调用 而bind只是先改变this的指向,而没有调用该函数

  

  以上就是我总结出来的关于this指向的问题。因为是小白,理解上可能有些地方不是很恰当,总结的也可能不太全面。若发现问题,希望大家能够及时指正错误,多多与我交流,共同进步。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,488
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,487
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,127
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289