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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
vue src动态加载请求获取图片的方法
Oct 17 Javascript
JS实现的A*寻路算法详解
Dec 14 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函数学习之PHP函数点评
2012/07/05 PHP
php牛逼的面试题分享
2013/01/18 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
DEFER怎么用?
2006/07/01 Javascript
根据分辩率调用不同的CSS.
2007/01/08 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
理解JavaScript原型链
2016/10/25 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
python装饰器代码深入讲解
2021/03/01 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
肯尼迪就职演说稿
2013/12/31 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
交通事故被告代理词
2015/05/23 职场文书
python实现A*寻路算法
2021/06/13 Python
如何使用pdb进行Python调试
2021/06/30 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android