JavaScript的this的指向问题!

这是我自己敲的, 报错!

  1. <button>点击查看绑定事件的this指向!</button>
  2. <script>
  3. // 函数的不同调用方式决定了this 的指向不同!
  4. // 1 普通函数 this 指向window
  5. function fn() {
  6. console.log('普通函数的this指向' + this);
  7. }
  8. window.fn();
  9. // fn.call();
  10. // 2 对象的方法!就是函数放在对象里面!this 指向当前的对象 obj!
  11. var obj = {
  12. sWhat() {
  13. console.log('对象中的方法的调用的this指向' + this);
  14. }
  15. }
  16. obj.sWhat();
  17. // 3 构造函数 this 指向我们的实例化对象 xiaoshi
  18. function Singer() {};
  19. // 在我们构造函数原型上的方法也是指向我们实例化对象的!
  20. Singer.prototype.guitar = function () {
  21. }
  22. var xiaoshi = new Singer();
  23. // 4 绑定事件函数 this 指向的是函数的调用者 btn 这个按钮对象!
  24. var btn = document.querySelector('button')
  25. btn.onclick = function () {
  26. console.log('绑定事件函数的this指向' + this)
  27. }; // 点击了按钮就会调用这个函数!
  28. // 5 定时器函数
  29. window.setTimeout(function () {
  30. console.log('定时器函数中的this指向' + this);
  31. }, 1000)
  32. // 6 立即执行函数
  33. // 立即函数的构成 (function() {})()
  34. (function() {
  35. console.log('立即执行函数的this' + this);
  36. })();
  37. // 立即执行函数的第二种写法!
  38. // (function () {
  39. // console.log(this)
  40. // }())
  41. </script>

{{uploading-image-628696.png(uploading...)}}

下面的是老师的代码!

  1. <button>点击查看绑定事件的this指向!</button>
  2. <script>
  3. // 函数的不同调用方式决定了this 的指向不同
  4. // 1. 普通函数 this 指向window
  5. function fn() {
  6. console.log('普通函数的this' + this);
  7. }
  8. window.fn();
  9. // 2. 对象的方法 this指向的是对象 o
  10. var o = {
  11. sayHi: function() {
  12. console.log('对象方法的this:' + this);
  13. }
  14. }
  15. o.sayHi();
  16. // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
  17. function Star() {};
  18. Star.prototype.sing = function() {
  19. }
  20. var ldh = new Star();
  21. // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
  22. var btn = document.querySelector('button');
  23. btn.onclick = function() {
  24. console.log('绑定时间函数的this:' + this);
  25. };
  26. // 5. 定时器函数 this 指向的也是window
  27. window.setTimeout(function() {
  28. console.log('定时器的this:' + this);
  29. }, 1000);
  30. // 6. 立即执行函数 this还是指向window
  31. (function() {
  32. console.log('立即执行函数的this' + this);
  33. })();
  34. </script>

我自己觉得没有什么不一样 啊!

详细的请看下表!

调用方式 this指向
普通函数调用 window
构造函数调用 实例对象 原型对象里面的方法也指向实例对象
对象方法调用 该方法所属对象
事件绑定方法 绑定事件对象
定时器函数 window
立即执行函数 window

重点: this指向并不是一开始就定义好的,而是在函数调用执行的时候才知道它指向的是谁!

JavaScript中函数的this指向!的更多相关文章

  1. 改变JavaScript中函数的内部this指向!

    改变JavaScript中函数的内部this指向! 第一种方法 call call 可以 调用函数 + 改变函数内的this指向! var obj = { name: 'lvhang' } funct ...

  2. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  3. javascript中几种this指向问题

    javascript中几种this指向问题   首先必须要说的是,this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象. (1).作为函数名调用   函数作为全局对象调用,this指向 ...

  4. JavaScript中函数函数的定义与变量的声明<基础知识一>

    1.JavaScript中函数的三种构造方式 a.function createFun(){ } b.var createFun=function (){ } c.var createFun=new ...

  5. JavaScript中函数的形参和实参的实现原理剖析

    我们都知道JS里面参数的传递是可以不一样的,比如我们有一个函数: <script type="text/javascript"> function one(a,b,c) ...

  6. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  7. JavaScript中函数是不能重载原因

    以前有一次写JS插件的时候,由于后台写习惯了,妄想在JS中写重载函数,可惜不能成功,原因花了一点时间记了下来 首先要理解重载的含义:函数返回值不同或者形式参数个数不同但函数名相同的函数 JavasSc ...

  8. JavaScript中函数的调用

    JavaScript中函数的调用 制作人:全心全意 在JavaScript中,函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用该函数,调用函数需要创建调用语句,调用语句包含函数名称和参数. ...

  9. JavaScript中函数的定义

    JavaScript中函数的定义 制作人:全心全意 在JavaScript中,函数是由关键字function.函数名加一组参数以及置于大括号中需要执行的一段代码定义的.定义函数的基本语法格式如下: f ...

随机推荐

  1. CCNP之OSPF实验报告

    OSPF实验报告 一.实验要求 1.R4为ISP,其上只能配置IP地址:R4与其它所有直连设备间使用公有IP2.R3--R5/6/7为MGRE环境,R3为中心站点3.整个OSPF环境IP地址为172. ...

  2. vscode常用快捷键和插件

    常用快捷键 快捷键 用途 ctrl+· 打开终端 shift+alt+A 块注释 ctrl+/ 行注释 ctrl+shift+F 文件夹查找 ctrl+enter 下方插入一行 ctrl+shift+ ...

  3. .net core 和 WPF 开发升讯威在线客服与营销系统:系统总体架构

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  4. mybatis-plus 自定义SQL,XML形式,传参的几种方式

    mybatis-plus 自定义SQL,XML形式,传参的几种方式 前提说明 所涉及文件 传参类型说明 1.Java代码中使用QueryWrapper动态拼装SQL 2.简单类型参数(如String, ...

  5. flowable中传入审批人是list

    package org.springblade.flow.engine.listener; import org.flowable.engine.delegate.DelegateExecution; ...

  6. Android驱动学习-内部机制_回顾binder框架关键点

    内部机制_回顾binder框架关键点server注册服务时, 对每个服务都提供不同的ptr/cookie,在驱动程序里对每个服务都构造一个binder_node, 它也含有ptr/cookie cli ...

  7. 多人VNC远程桌面服务配置

    博主前篇博客里面已经讲过VNC的配置,为了方便查看,单独拿出来写一下. (1) 搜索可以用来安装vncserver的软件包: sudo apt-cache search vncserver (2) 安 ...

  8. yum被系统升级锁定

    Another app is currently holding the yum lock; waiting for it to exit... 可能是系统自动升级正在运行,yum在锁定状态中. 已经 ...

  9. JVM 常用命令行工具

    本文部分摘自<深入理解 Java 虚拟机第三版> 基础故障处理工具 Java 开发人员肯定都知道 JDK 的 bin 目录下有许多小工具,这些小工具除了用于编译和运行 Java 程序外,打 ...

  10. 第十一章节 BJROBOT PS3 手柄控制【ROS全开源阿克曼转向智能网联无人驾驶车】

    1.把小车架空平放在地板上.   2.用 USB 线将 PS3 蓝牙手柄连接至小车主控端,初次连接手柄上的 4 个红色指示灯会同时闪烁; 3.按下手柄中间的圆形配对键,然后等待红灯闪烁至停止. 4.此 ...