当前位置: 首页 > news >正文

this指向

(1)在全局环境中的this——window
无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。

      "use strict"console.log(this); //windowconsole.log(this===window);//true

(2)在函数中的this——window
在函数内部,this的值取决于函数被调用的方式。   

     function f() {console.log(this); //windowconsole.log(this===window);//true}f()console.log(f()===window.f()); //true

因为定义的函数在全局作用域下定义的 

(3)函数在严格模式下——undefined

 function f() {"use strict"console.log(this); //undefinedconsole.log(this === window); //false}f()

上面的f是直接调用的指向undefined 

      function f() {"use strict"console.log(this); //windowconsole.log(this === window); //true}window.f()

有一些浏览器最初在支持严格模式时没有正确实现这个功能,于是它们错误地返回了window对象。

 (4)对象中的this——指向调用者

    let obj = {fn: function () {console.log(this);}}obj.fn() //指向obj这个对象


(5)栗子①

    function fun() {console.log(this.name);}let obj = {name: '思思',fn: fun}var name = "七七"obj.fn()  //思思fun()    //七七

obj.fn() 是obj 调用的所以去找obj里面的name 

fun是window调用的所以去找全局里面的this.name

(6)栗子②

    var obj1 = {name: '七七',f: function () {console.log('姓名:' + this.name);}}var obj2 = {name: '思思'}obj2.f = obj1.fobj1.f() //姓名:七七obj2.f() //姓名:思思

把obj1.赋值给obj2.f  obj2也有了f 方法 

(7)栗子③

      function foo() {console.log(this.a);}var obj2 = {a:2,fn:foo}var obj1={a:1,o1:obj2}obj1.o1.fn() //2

 obj1里面的o1是obj2  obj2里的fn是foo函数   在obj2里面调用的拿到obj2中的a

(8)事件绑定中的this 

 <button onclick="Hclick()">点击事件</button>
<script>function Hclick() {console.log(this);}
</script>

 由于还是在当前window环境下运行的还是指向window

  <button onclick="console.log(this)">点击事件</button>

运行在节点对象中 指向当前dom

(9)动态绑定

<button>动态绑定</button>
<script>let btn=  document.getElementsByTagName('button')[0].onclick=function(){console.log(this);    }
</script>

指向当前dom

(10)addEventlistenr——当前dom

     let btn = document.getElementsByTagName('button')[0].addEventListener('click',function () { console.log(this); })

指向当前dom <button>动态绑定</button>   

    let btn = document.getElementsByTagName('button')[0].addEventListener('click',()=>{console.log(this);})

换成箭头函数后 this指向当前作用域下的上级作用域的this    window 

(11)构造函数中的this——当前实例化对象

   function Pro() { this.x='1'this.y=function(){ console.log(this);}}var p = new Pro()p.y()

通过构造函数创建了一个新的实例对象  所以当前的this指向新的实例对象

(12)定时器中的this——window  

   setInterval(function () {console.log(this)  },1000)

this指向当前window

小扩展

       var MyClass = function () {this.name = 1;}var myClass = new MyClass();console.log('myClass:', myClass);

当有了返回值以后

        var MyClass = function () {this.name = 1;return {name: 2}}var myClass = new MyClass();console.log('myClass:', myClass);

会把return的内容放在构造函数中 
 

http://www.lryc.cn/news/622.html

相关文章:

  • 安卓小游戏:小板弹球
  • 7、单行函数
  • 华为机试题:HJ56 完全数计算(python)
  • opencv——傅里叶变换、低通与高通滤波及直方图等操作
  • 【NGINX入门指北】 进阶篇
  • Python中关于@修饰符、yeild关键词、next()函数的基本功能简述
  • 结合Coverity扫描Spring Boot项目进行Path Manipulation漏洞修复
  • 【FFMPEG源码分析】从ffplay源码摸清ffmpeg框架(一)
  • C++蓝桥杯 基础练习,高精度加法,输入两个整数a和b,输出这两个整数的和。a和b都不超过100位。
  • MySQL面试题:SQL语句的基本语法
  • Fluid-数据编排能力原理解析
  • 并发线程、锁、ThreadLocal
  • CMMI-结项管理
  • 网络通信协议是什么?
  • 阶段5:Java分布式与微服务实战
  • 我的创作纪念日
  • Qml学习——动态加载控件
  • 设计模式之职责链模式
  • MySQL入门篇-MySQL 8.0 延迟复制
  • FPGA时序约束与分析 --- 实例教程(1)
  • go深拷贝和浅拷贝
  • linux网络系统层面的配置、管理及操作命令汇总
  • R数据分析:孟德尔随机化中介的原理和实操
  • 【C++】 类和对象 (下)
  • asp获取毫秒时间戳的方法 asp获取13位时间戳的方案
  • Python基础篇(十五)-- Python程序接入MySQL数据库
  • 程序员不得不知道的 API 接口常识
  • 【项目精选】基于Java的银行排号系统的设计与实现
  • 前端 基于 vue-simple-uploader 实现大文件断点续传和分片上传
  • 解决报错: ERR! code 128npm ERR! An unknown git error occurred