JavaScript中的this基本问题实例小结


Posted in Javascript onMarch 09, 2020

本文实例讲述了JavaScript中的this基本问题.分享给大家供大家参考,具体如下:

在函数中 this 到底取何值,是在函数真正被调用执行的时候确定下来的,函数定义的时候确定不了。

执行上下文环境 :

 **定义**:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和this。

 **作用**:用来保存本次运行时所需要的数据

当你在代码中使用了 this,这个 this 的值就直接从执行的上下文中获取了,而不会从作用域链中搜寻。

关于 this 的取值,大体上可以分为以下几种情况:

情况一:全局 & 调用普通函数

在全局环境中,this 永远指向 window。

console.log(this === window);   //true

普通函数在调用时候(注意不是构造函数,前面不加 new),其中的 this 也是指向 window。

但是如果在严格模式下调用的话会报错:

var x = 1;
function first(){
  console.log(this);   // undefined
  console.log(this.x);  // Uncaught TypeError: Cannot read property 'x' of undefined
}
first();

情况二:构造函数

所谓的构造函数就是由一个函数 new 出来的对象,一般构造函数的函数名首字母大写,例如像 Object,Function,Array 这些都属于构造函数。

function First(){
  this.x = 1;
  console.log(this);  //First {x:1}
}
var first = new First();
console.log(first.x);   //1

上述代码,如果函数作为构造函数使用,那么其中的 this 就代表它即将 new 出来的对象。

但是如果直接调用 First函数,而不是 new First(),那就变成情况1,这时候 First() 就变成普通函数。

function First(){
  this.x =1;
  console.log(this);  //Window
}
var first = First();
console.log(first.x);   //undefined

情况三:对象方法

如果函数作为对象的方法时,方法中的 this 指向该对象。

var obj = {
  x: 1,
  first: function () {
    console.log(this);    //Object
    console.log(this.x);   //1
  }
};
obj.first();

注意:若是在对象方法中定义函数,那么情况就不同了。

var obj = {
  x: 1,
  first: function () {
    function second(){
      console.log(this);   //Window
      console.log(this.x);  //undefined
    }
    second();
  }
}
obj.first();

可以这么理解:函数 second虽然是在 obj.first 内部定义的,但它仍然属于一个普通函数,this 仍指向 window。

在这里,如果想要调用上层作用域中的变量 obj.x,可以使用 self 缓存外部 this 变量。

var obj = {
  x:1,
  first: function () {
    var self = this;
    function second(){
      console.log(self);   //{x: 1}
      console.log(self.x);  //1
    }
    second();
  }
}
obj.first();

如果 first 函数不作为对象方法被调用:

var obj = {
  x: 1,
  first: function () {
    console.log(this);    //Window
    console.log(this.x);   //undefined
  }
};
var fn = obj.first;
fn();

obj.first 被赋值给一个全局变量,并没有作为 obj 的一个属性被调用,那么此时 this 的值是 window。

情况四:构造函数 prototype 属性

function First(){
  this.x = 1;
}
First.prototype.getX = function () {
  console.log(this);    //First {x: 1, getX: function}
  console.log(this.x);   //1
}
var first= new First();
first.getX();

在 First.prototype.getX 函数中,this 指向的first 对象。不仅仅如此,即便是在整个原型链中,this 代表的也是当前对象的值。

情况五:函数用 call

var obj = {
  x:1
}
function first(){
  console.log(this);   //{x: 1}
  console.log(this.x);  //1
}
first.call(obj);

当一个函数被 call调用时,this 的值就取传入的对象的值。

来源:知乎

链接:https://zhuanlan.zhihu.com/p/25294187?utm_source=com.youdao.note&utm_medium=social

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
You might like
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue实现信息管理系统
2020/05/30 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python实现telnet客户端的方法
2015/04/15 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python批量修改ssh密码的实现
2019/08/08 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Python序列类型的打包和解包实例
2019/12/21 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
新闻记者实习自我鉴定
2013/09/19 职场文书
贺卡寄语大全
2014/04/11 职场文书
婚内房产协议书范本
2014/10/02 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server