简单分析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实现页面自适应
Jan 19 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
PHP7新特性简述
Jun 11 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 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
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python3 max()函数基础用法
2019/02/19 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Python Django view 两种return的实现方式
2020/03/16 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
.NET remoting的两种通道是什么
2016/05/31 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
经典团队口号
2014/06/06 职场文书
片区教研活动总结
2014/07/02 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
公司行政管理制度范本
2015/08/05 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js