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中的类继承
Nov 25 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
使用vant的地域控件追加全部选项
Nov 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP自定义函数收代码
2010/08/01 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
javascript回调函数详解
2018/02/06 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
简单介绍python封装的基本知识
2019/08/10 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
借款协议书范本
2014/04/22 职场文书
感恩的演讲稿
2014/05/06 职场文书
建筑工地质量标语
2014/06/12 职场文书
解放思想演讲稿
2014/09/11 职场文书
四年级数学教学反思
2016/02/16 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS