JS之this
作为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的绑定中断,不再指向对象o goo(); // 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为原型的实例对象p p.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指向window f.call(p);// 30 this指向传入的对象p f.call(null)// 10 this指向window 但是要注意在严格模式下会报错 f.bind(p)// 没有任何反应 f.bind(p)();// //这是因为call是立即调用 而bind只是先改变this的指向,而没有调用该函数
以上就是我总结出来的关于this指向的问题。因为是小白,理解上可能有些地方不是很恰当,总结的也可能不太全面。若发现问题,希望大家能够及时指正错误,多多与我交流,共同进步。
最新文章
- Python学习记录day5
- Java 验证码、二维码
- Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platform)
- bzoj 1191: [HNOI2006]超级英雄Hero
- UVALive 5886 The Grille (模拟)
- spring transactionmanager
- IDX爱定客 | 氪加
- golang函数
- php访问SQLserver时加载的dll
- Spring Boot 之 RESTfull API简单项目的快速搭建(二)
- 定义与声明、头文件与extern总结
- 【CF802C】Heidi and Library (hard) 费用流
- java 规范
- npm publish gives “unscoped packages cannot be private”
- Selenium 之18 种定位方式
- Spring Cloud 坑点
- 历届试题 小数第n位(小技巧)
- vue中nextTick的使用(转载)
- spring-session-data-redis使用redis共享session
- 我的vim配置---jeffy-vim-v2.1.tar
热门文章
- 同网段电脑互ping
- 流行框架angular
- linux可用更新源
- MySQL触发器更新和插入操作
- Spark 2.2.0 文档中文版 Quick Start
- SQL Server 2012 案例教程(贾祥素)——学习笔记
- 如何在web项目中添加javamelody monitoring 监控。
- 中国(北方)大学生程序设计训练赛(第二周) (A B D G)
- Python基础之内置函数和递归
- RxSwift 系列(五) -- Filtering and Conditional Operators