简单分析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实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js实现表格筛选功能
Jan 18 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 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判断文件上传图片格式的实例详解
2017/09/30 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
使用Python pip怎么升级pip
2020/08/11 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
爽歪歪广告词
2014/03/20 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
娱乐节目策划方案
2014/06/10 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
调研汇报材料范文
2014/08/17 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
Python实现位图分割的效果
2021/11/20 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python