• 1.作为对象方法调用
  • 2.作为普通函数调用
  • 3.构造器调用
    • 1.普通构造器
    • 2.如果构造器显示地返回了一个object类型对象
  • 4.Function.prototype.call 或 Fucktion.prototype.apply调用
    • 1.跟普通的函数调用相比，可以动态的传入函数的this

1.作为对象方法调用

  1. var obj = {
  2.     a:1,
  3.     getA:function(){
  4.         console.log(this===obj);
  5.         console.log(this.a);
  6.     }
  7. }
  8. obj.getA();

2.作为普通函数调用

  1. //作为普通函数进行调用
  2. var name = 'SmarTom';
  3. var getName = function(){
  4.     return this.name;
  5. }
  6. console.log(getName());//返回undefined
  7.  
  8. /*-------------------------------------------------------*/
  9.  
  10. //将函数赋值
  11. var obj ={
  12.     name : 'SmarTom',
  13.     getName : function(){
  14.         return this.name;
  15.     }
  16. }
  17.  
  18. /*将函数赋值给一个对象 相当于
  19. var getname=function(){
  20.     asdfasdf
  21. }
  22. */
  23. var getname = obj.getName;
  24. console.log(getname()); //返回undefined
  25.  
  26. /*===============请忽视分割线=============================*/
  27. var obj ={
  28.     name : 'SmarTom',
  29.     getName : function(){
  30.         return this.name;
  31.     }
  32. }
  33. console.log(obj.getName()); //返回SmarTom
  34. /*===============我知道你不会当做不知道====================*/

有时候我们会遇到一个困扰，比如在div节点事件函数内部，有一个局部的callback方法，callback方法被作为普通函数来调用时，callback内部的this指向了window,但我们往往认为他是指向该div的节点，如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="div1">我是一个div</div>
  9.     <script>
  10.         document.getElementById('div1').onclick = function(){
  11.             alert(this.id); //作为对象调用div1
  12.             var callback =function(){
  13.                 alert(this.id);
  14.             }
  15.             callback(); //调用的是全局的this 弹出  undefined
  16.         }
  17.     </script>
  18. </body>
  19. </html>

解决方法:

1.将this赋值给临时变量

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="div1">我是一个div</div>
  9.     <script>
  10.         document.getElementById('div1').onclick = function(){
  11.             var that = this;
  12.             alert(that.id); //作为对象调用div1
  13.             var callback =function(){
  14.                 alert(that.id);
  15.             }
  16.             callback(); //调用的是全局的this 弹出  undefined
  17.         }
  18.     </script>
  19. </body>
  20. </html>

2.使用严格模式 "use strict" 注意使用的时候会忽略this=undefined 的情况

3.构造器调用

JavaScript中没有类，但是可以从构造器中创建对象，同时也提供了new运算符，使得构造器更像一个类。其实就是用new构造一个对象，看起来更像是类

通常情况下，构造器里的this就指向返回的这个对象

  1. var myClass = function(){
  2.     this.name = 'SmarTom';
  3. }
  4. var obj = new myClass();
  5. console.log(obj.name);  //返回SmarTom

但使用new调用构造器时，还要注意一个问题，如果构造器显示地返回了一个object类型对象，那么此次运算结果最终会返回这个对象，可不是我们之前期待的this;

  1. var myClass = function(){
  2.     this.name = 'SmarTom';
  3.     return {
  4.         name : "Bob Dylan"
  5.     }
  6. }
  7. var obj = new myClass();
  8. console.log(obj.name);  //返回Bob Dylan

4.Function.prototype.call 和 Function.prototype.apply调用

跟普通的函数调用相比，可以动态的传入函数的this

  1. var obj1 = {
  2.     name : "SmarTom",
  3.     getName : function(){
  4.         return this.name;
  5.     }
  6. };
  7. var obj2 = {
  8.     name :"Bob Dylan"
  9. };
  10. console.log(obj1.getName());        //输出'SmarTom'
  11. console.log(obj1.getName.call(obj2));   //输出BobDylan

《JavaScript设计模式与开发》笔记 2.this指针的更多相关文章

  1. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  2. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  3. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  4. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  5. 《javascript设计模式与开发实践》--- （单一职责原则）

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  6. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  7. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  8. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  9. 《JavaScript设计模式》读书笔记——灵活的语言

    最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅. 第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在. 首先, ...

随机推荐

  1. 【转】 纯技术帖：MMOG网络同步算法揭秘

    http://www.360doc.com/content/12/0723/11/110467_225954142.shtml 来源:网络 概述 游戏发展从单机游戏到局域网游戏再到mmog(Massi ...

  2. vsftp管理脚本(CentOS6用)

    #!/bin/bash # ### BEGIN INIT INFO # Provides: vsftpd # Required-Start: $local_fs $network $named $re ...

  3. 2017.4.5 Strom

    Strom是分布式实时计算系统,它对于实时计算的意义类似于hadoop对于批处理的意义.与Storm关系密切的语言:核心代码用clojure书写,实用程序用python开发,使用java开发拓扑. S ...

  4. django HttpResponse的用法

    一.传json字典 def back_json(rquest): #JsonResponse父类是HttpResponse,原码里调用了json.dumps() from django.http im ...

  5. 组合数的求法　（n<=1e8　可以过来看）

    C(n,m) =n!/(m!* (n-m)!  ); o(n) 求 1-m的逆元 o(n) 求 n的阶乘 代码实现 https://www.cnblogs.com/linyujun/p/5194189 ...

  6. 20165313 《Java程序设计》第七周学习总结

    教材学习总结 1.下载安装MySQL数据库管理系统. 2.MySQL数据库基本操作. 3.利用JAVA程序对MySQL数据库系统进行查找,更新,添加和删除操作. 学习中的问题与解决方案 1.运行书上安 ...

  7. 浅谈STM32L071硬件I2C挂死

    STM32的IIC问题一直存在,在网上也被很多人吐槽,然而FAE告诉我,硬件IIC的问题在F1,F3,F4系列单片机存在,而在L0上已经解决了,然而这几天调试加密芯片和显示芯片,都是IIC芯片,却再一 ...

  8. ArrayList 与 LinkedList的区别

    今天查看源码,分析一下两者的异同.外加阐述内部类. 内部类参考官方文档,地址如下: https://docs.oracle.com/javase/tutorial/java/javaOO/nested ...

  9. Go Example--变量

    package main import "fmt" //通过import导入fmt标准包 func main() { //定义变量,并初始化 var a string = &quo ...

  10. 【liunx】date命令总结

    命令简介: date 根据给定格式显示日期或设置系统日期时间.print or set the system date and time 指令所在路径:/bin/date 命令语法: date [OP ...