简单分析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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
微信小程序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数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP学习笔记之一
2011/01/17 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
简单介绍python封装的基本知识
2019/08/10 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
幼儿教师个人求职信范文
2013/09/21 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
现金出纳岗位职责
2014/03/15 职场文书
防暑降温通知书
2015/04/27 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL