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

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

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

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

  1. console.log(this) //window

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

  1. var a=1;
  2. function foo(){
  3. console.log(this);
  4. console.log(this.a);
  5. }
  6.  
  7. foo(); //window 1

  

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

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

  但是要注意两种情况

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

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

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

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

  

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

  1. var o={
  2. f:function(){
  3. console.log(this.a+this.b);
  4. }
  5. }
  6.  
  7. var p=Object.create(o);//该方法创建以o为原型的实例对象p
  8.  
  9. p.a=1;
  10. p.b=2;
  11.  
  12. p.f(); //

  

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

new过程:

1.创建一个新对象

2.让this指向该对象

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

4.return this对象

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

  1. function M(){
  2. this.a=10;
  3. }
  4.  
  5. var o=new M();
  6.  
  7. console.log(o.a); //
  8.  
  9. function N(){
  10. this.a=20;
  11. return {a:30};
  12. }
  13.  
  14. var p=new N();
  15.  
  16. console.log(p.a);//30 这里不是20,因为构造函数返回了一个对象

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

  1. var a=10;
  2. function f(){
  3. console.log(this.a);
  4. }
  5.  
  6. var p={a:30};
  7.  
  8. f();//10 this指向window
  9.  
  10. f.call(p);// 30 this指向传入的对象p
  11.  
  12. f.call(null)// 10 this指向window 但是要注意在严格模式下会报错
  13.  
  14. f.bind(p)// 没有任何反应
  15.  
  16. f.bind(p)();//
  17.  
  18. //这是因为call是立即调用 而bind只是先改变this的指向,而没有调用该函数

  

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

JS之this的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  10. JS核心系列:理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

随机推荐

  1. Python系列教程(三):输入和输出

    1.1 raw_input() 在Python中,获取键盘输入的数据的方法是采用 raw_input 函数(至于什么是函数,咱们以后的章节中讲解),那么这个 raw_input 怎么用呢? 看如下示例 ...

  2. VB6之反编译工具VBRezQ

    该软件的下载地址:http://www.xiazaiba.com/html/5276.html 网站上是这么介绍的: VBRezQ是一个针对VB程序的反编译软件.VBRezQ反编译的可读性尤其对早期版 ...

  3. JavaMail 邮件开发

    (api  + 配置) 开发中,邮件的应用? -à 注册,填写生日:  后期系统会自动发送生日祝贺   -à 发货,发货提醒!邮件提醒! 邮件: 1. 发邮件:[程序中如何发邮件!] 2. 收邮件:[ ...

  4. Spring Security4实例(Java config版)——ajax登录,自定义验证

    本文源码请看这里 相关文章: Spring Security4实例(Java config 版) -- Remember-Me 首先添加起步依赖(如果不是springboot项目,自行切换为Sprin ...

  5. Nginx 反向代理、负载均衡

    ## Nginx 反向代理. (一)简介 一.什么是代理服务器 客户机原本发送给服务器的请求,不会直接发送给服务器,而是先发送给代理服务器:经过代理服务器处理后转发给服务器:服务器数据处理后转回给代理 ...

  6. 纯 CSS 实现波浪效果!

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  7. 读Zepto源码之Callbacks模块

    Callbacks 模块并不是必备的模块,其作用是管理回调函数,为 Defferred 模块提供支持,Defferred 模块又为 Ajax 模块的 promise 风格提供支持,接下来很快就会分析到 ...

  8. 虚拟机Linux系统下配置网络

    虚拟机上安装Redhat9.0后是没有网络的,而本来的Windows系统是可以上网的,此时想在Redhat上网就需要在Linux系统上配置网络,以下是笔者自己配置的一点心得. 1.电脑本机系统打开网络 ...

  9. HTLM5新增属性

    1.<meta http-equiv="Pragma" content="no-cache"/> //禁止页面缓存 2.<script def ...

  10. Windows 10 IoT Serials 9 – 如何利用IoTCoreAudioControlTool改变设备的音频设备

    大家知道,在Windows 10 IoT Core上,如果用户外接了USB声卡.带有麦克风的摄像头之类的硬件,就会有多个音频设备可以用.但是,系统目前并没有提供直接的UI来设置音频的输入或者输出设备. ...