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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 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 printf输出格式使用说明
2010/12/05 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php实现的短网址算法分享
2014/06/20 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
原生js实现分页效果
2020/09/23 Javascript
js实现缓动动画
2020/11/25 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python已协程方式处理任务实现过程
2019/12/27 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
高分子材料与工程专业个人求职信
2013/12/15 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
幼儿教师工作感言
2014/02/14 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书