简单分析js中的this的原理


Posted in Javascript onAugust 31, 2019

很多人可能会有疑问,this到底是什么?为什么this的值变化多端?

首先我们来概括下this.

this是一个对象,一般存在于函数中,表示当前函数的执行上下文;

值得一提的是,当函数在执行后,this才有绑定的对象,函数未执行时,this没有内容

接下来我们看看在不同场景下的this的指向

1.函数默认执行 :此时this指向Window

function fn(){
  console.log(this)
//Window
 };
fn();

在严格模式开启后,this的指向又有所不同

严格模式下 : this指向undefined

function fn(){
  "use strict"
  console.log(this)
//undefined
 };
 fn();

2.函数的隐式执行 : this指向函数的直接执行对象

function fn(){
    console.log(this);

   };
   var a = 10;
   var obj = {
    a:20,
    b:fn
   };
   obj.b();



//this指向obj
  var obj2 = {
    a:30,
    b:obj.b
   };
   obj2.b();


 //this指向obj2
  var obj3 = {
    a:40,
   b:obj2




  };
  obj3.b.b();


//obj3.b.b等价于obj2.b this指向obj2

但当函数作为参数传到另一个函数的变量时, 发生隐式丢失,this指向Window

function fn(){
   console.log(this)  //Window
  };
  var obj = {
   a:20,
   b:fn
  };
 setTimeout(obj.b, 1000);
  function setTimeout(cb,t){
   cb();   
 //obj.b作为参数传给cb,而cb前没对象,相当于默认方式执行fn() 
  };

3.函数的显式执行 : this指向指定对象

我们可以通过函数的bind、call、apply方式指定this的对象,还可以用来修复上文中的隐式丢失

var obj = {
  name: "obj",
  show: function () {
   console.log(this.name)
  }
 }
 obj.show();      //obj

 var obj2 = {
  name: "obj2"
 };
 obj.show.bind(obj2)();   //obj2

 var name = "蜡笔笑嘻嘻";   
 obj.show.bind(window)();  //Window

4.构造函数执行(通过new执行)

构造函数中的this 会指向创建出来的实例对象

function Person() {
  this.name = 'zhar';
 }
 var p = new Person();
 console.log(p.name);  //zhar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
微信小程序image图片加载完成监听
Aug 31 #Javascript
JS实现使用POST方式发送请求
Aug 30 #Javascript
node.js处理前端提交的GET请求
Aug 30 #Javascript
Node.js系列之连接DB的方法(3)
Aug 30 #Javascript
Node.js系列之发起get/post请求(2)
Aug 30 #Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 #Javascript
微信小程序实现写入读取缓存详解
Aug 30 #Javascript
You might like
PHP中feof()函数实例测试
2014/08/23 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python添加菜单图文讲解
2019/06/04 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
keras实现多种分类网络的方式
2020/06/11 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
设计师个人求职信范文
2014/02/02 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
小平小道观后感
2015/06/09 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android